Asynchronous Actions

Learn how the Redux data flow works with asynchronous data and how to use Redux middleware for asynchronous logic.

All actions discussed previously were executed synchronously. This means that each action creator was executed whenever we wanted to modify the state without waiting for the result of an asynchronous process to finish. In many dynamic web applications, this situation is highly unlikely. Many React applications have to deal with asynchronous data flow (in particular, network requests)… Synchronous action creators don’t offer a great solution to this problem. The dispatch method of a store expects an action that contains a simple object containing a type property.

Redux middleware

Redux middleware concepts, and in particular Redux Thunk middleware, can help with this problem.

The createStore() function from the redux package can deal with up to three parameters:

  1. The reducer function: This is the only mandatory parameter and deals with the executed actions of our state by returning a state for each action dispatched.
...