Goal: As Redux Actions work on local Store, they’re be design Synchronous. Now if we want to do some async action before calling Redux Action, we use below styles:
- Write Async stuff in component/svc and once resolved, call Action
- This tightly binds the component with logic and makes testing difficult
- Components should be stateless
- Redux Thunk:
- Create a Action Creator (AC), that the component will call instead of dispatching Action Directly.
- This AC will return a function to the caller that contains the pre Action async logic (using promises) and finally uses .then to dispatches the Action
- Redux Promise:
- Enhances the Dispatch call to take a promise as Payload.
- It optionally takes error as well
- It then makes sure that the Action is called only when the promise resolves, with the data that the promise returns
- Redux Saga
- Uses generators instead of Promises for async actions before calling store action