Pulling data from an API into the Redux store

Now that we have covered how asynchronous action creators work, it will be easy to pull data from an API into the Redux store.

Extracting boilerplate code

You may have noticed that we are writing a lot of boilerplate code to dispatch the three different actions. We can write a function to be able to reuse this behavior. We will pass an action object, which looks as follows, to this function:

{
  types: [ FETCH_POSTS_REQUEST, FETCH_POSTS_SUCCESS, FETCH_POSTS_FAILURE ],
  promise: fetch('http://localhost:8080/api/posts')
             .then(response => response.json())
}

We are now going to write a generic function that contains all the boilerplate code:

1. Create asrc/actions/utils.js file and parse the action object:

export const thunkCreator = (action) => {
  const { types, promise, ...rest } = action
  const [ REQUESTED, RESOLVED, REJECTED ] = types

2. Next, we will return a function that takes a dispatch argument, with similar code as before. We start...