Async in Redux Workshop: Module 4

Transcript

1. MODULE 4: ASYNC WITH THUNKS AND PROMISES
2. THUNK MIDDLEWARE
3. THUNK MIDDLEWARE ▸ Redux’s documentation recommends using redux-thunk middleware. ▸ A thunk is a function that wraps an expression to delay its evaluation.
7. REDUX THUNK ▸ Normal actions are objects. ▸ redux-thunk allows you to dispatch a function which will be called by redux- thunk middleware. ▸ redux-thunk will pass in dispatcher and getState functions so you can dispatch an action at the end of an async operation
11. LET’S TAKE A LOOK AT THE SOURCE CODE
15. PROS ▸ Very simple abstraction. You can write this yourself without the need of a library. ▸ Fairly easy to test if you run your tests in Node. ▸ Works well for small projects.
16. CONS
17. DEPENDENCY INJECTION
22. NOT FSA COMPLIANT
23. FSA: FLUX STANDARD ACTION ▸ A set of standards for describing what an action should look like. ▸ If we can make assumptions about the structure of actions, we can build better abstractions on top of them. ▸ Basically, action must be an object with a “type” property. ▸ Redux thunk dispatches functions, not FSA action objects
30. TOO EASY TO FORGET ERROR HANDLING AND PENDING STATE
31. PROMISE MIDDLEWARE
32. VERY SIMILAR TO THUNK MIDDLEWARE
33. PROMISE MIDDLEWARE ▸ Very similar to thunk middleware but better. ▸ Most redux promise middleware libraries are already FSA compliant. ▸ Promises are in the language and are built for async. ▸ Much easier to remember to catch errors and do things with it. ▸ Use pburtchaell/redux-promise-middleware. It’s the best one out there with good conventions.