Handling asynchronous operations with Redux

In the preceding chapters, we were only dealing with synchronous operations—when a user interacts with the user interface (for example, clicks on a link), an action is immediately dispatched and the store is updated. However, we haven't yet covered how to dispatch actions that are asynchronous, such as requests to a server. Since the server does not respond immediately, we cannot block the whole application and wait for the result. That is the reason requests in JavaScript were designed in an asynchronous way.

Dispatching multiple actions from an action creator

For synchronous actions, we simply returned an action object from our action creator. A synchronous action creator to fetch posts could look like this:

export const fetchPosts = (posts) => {
  return {
    type: 'FETCH_POSTS',
    posts: posts
  }
}

Now, we will handle asynchronous operations by dispatching multiple actions from an action creator.

Defining action types

Let's think about which...