Learning Redux

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 a src/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 ...