|
431 | 431 | }, |
432 | 432 | { |
433 | 433 | "title":"Logger", |
434 | | -"description":"We still haven'ttouched on one of the most powerful features of Redux: **middleware**.\n\nMiddleware is triggered on each action.\n\n```\n1. Dispatch(action)\n -> 2. Middleware(state, action)\n -> 3. Reducer(state, action)\n -> 4. state\n```\n\nMiddleware is created with the `store`. In it's most basic form, middleware can look like the function below:\n\n```js\nconst store => next => action => {\n // do something magical here\n return next(action);\n // returns result of reducer called with action\n}\n```\n\nLet's try out the power of middleware with\"redux-logger\".", |
| 434 | +"description":"We still haven'tworked with one of the most powerful features of Redux: **middleware**.\n\nMiddleware is triggered on each action.\n\n```\n1. Dispatch(action)\n -> 2. Middleware(state, action)\n -> 3. Reducer(state, action)\n -> 4. state\n```\n\nMiddleware is created with the `store`. In it's most basic form, middleware can look like the function below:\n\n```js\nconst store => next => action => {\n // do something magical here\n return next(action);\n // returns result of reducer called with action\n}\n```\n\nLet's try out the power of middleware with\"redux-logger\".", |
435 | 435 | "tasks": [ |
436 | 436 | { |
437 | 437 | "description":"import `applyMiddleware` in\"index.js\" from the\"redux\" package. It is a named import.", |
|
443 | 443 | ] |
444 | 444 | }, |
445 | 445 | { |
446 | | -"description":"set the second param in createStore to `applyMiddleware()`", |
| 446 | +"description":"set the second param in createStore to `applyMiddleware()`. See the [docs](http://redux.js.org/docs/api/applyMiddleware.html).", |
447 | 447 | "tests": [ |
448 | 448 | "08/02" |
449 | 449 | ], |
|
452 | 452 | ] |
453 | 453 | }, |
454 | 454 | { |
455 | | -"description":"install\"redux-logger\" using npm", |
| 455 | +"description":"install\"redux-logger\" using npm. See the [docs](https://github.com/evgenyrodionov/redux-logger).", |
456 | 456 | "tests": [ |
457 | 457 | "08/03" |
458 | 458 | ], |
|
489 | 489 | ] |
490 | 490 | } |
491 | 491 | ], |
492 | | -"onPageComplete":"Look in the console" |
| 492 | +"onPageComplete":"Look in the console to see how\"redux-logger\" works. Amazing. We'll learn more about middleware in step 10, but first let's add another action in the next step" |
493 | 493 | }, |
494 | 494 | { |
495 | 495 | "title":"Second Action", |
|
524 | 524 | "09/03" |
525 | 525 | ], |
526 | 526 | "hints": [ |
527 | | -"Try this: `import {sortByPopularity} from'./pokemon';`" |
| 527 | +"Try this: `constsortByPopularity= require('./pokemon').sortByPopularity;`" |
528 | 528 | ] |
529 | 529 | }, |
530 | 530 | { |
|
578 | 578 | ] |
579 | 579 | } |
580 | 580 | ], |
581 | | -"onPageComplete":"In the next step, we'lllook at using**thunks**to call helpfulasyncactions from within middleware" |
| 581 | +"onPageComplete":"As you can see, a thunk is just a function that returns another function.In the next step, we'llsee how**thunks**can be used to createasyncmiddleware for multiple dispatches" |
582 | 582 | }, |
583 | 583 | { |
584 | 584 | "title":"Thunk", |
585 | 585 | "description":"As we've seen in the previous steps, thunks sound more complicated than they really are. A thunk is just a function that returns a function.\n\nInside of middleware, we can determine if an action is returning a function.\n\n```js\nconst store => next => action => {\n if (typeof action === 'function') {\n // it's a thunk!\n }\n return next(action);\n}\n```\n\nIf it is a thunk, we can pass in two helpful params:\n - `store.dispatch`\n - `store.getState`\n\nAs we'll see, `dispatch` alone can allow us to create async or multiple actions.", |
586 | 586 | "tasks": [ |
587 | 587 | { |
588 | | -"description":"install\"redux-thunk\" as a dependency", |
| 588 | +"description":"install\"redux-thunk\" as a dependency. See the [docs](https://github.com/gaearon/redux-thunk).", |
589 | 589 | "tests": [ |
590 | 590 | "10/01" |
591 | 591 | ], |
|