NASA Photo of the Day 4

Introducing Redux middleware

In this ongoing series of articles we are learning how to use Redux middleware in a React application for the purpose of fetching a photo from an external API.

We have seen how to build an action creator that dispatches a FETCH_PHOTO_START action.
Now we need to modify our action creator so it can dispatch different actions depending on different conditions.

This is the action creator we have so far:

// src/actions/index.js

export const FETCH_PHOTO_START = 'FETCH_PHOTO_START';

export const getPhoto = () => {
  return {
    type: FETCH_PHOTO_START
  }
}

We have seen before that in order to use Redux middleware we need to add the Redux function applyMiddleware to the createStore function.
We also need to pass the thunk function, provided by the Redux Thunk library, to applyMiddleware.

So, let's start by importing applyMiddleware from Redux at the top of our index.js file:

// index.js

import { createStore, applyMiddleware } from 'redux';

We then install the Redux Thunk module:

npm install redux-thunk

and we import it in index.js:

// index.js

import thunk from 'redux-thunk';

Finally, we pass applyMiddleware to createStore and pass thunk as an argument to it:

const store = createStore(rootReducer, applyMiddleware(thunk));

By adding thunk as middleware we practically modify the action creator so it returns a function instead of a plain Javascript object.

We have seen before that a regular action creator function returns an object with type and payload properties.
This object is automatically dispatched to Redux, so we don't have to use any dispatch method.

An action with thunk middleware, on the other hand, can return another function. This inner function gets passed the dispatch method and then returns the dispatch method with the object that describes the action, like for a regular action creator.
The dispatch method is what we use to dispatch that action.

The dispatch method was still implicitly called with a regular action creator. Now, with the thunk middleware added, we are making dispatch explicit because we need to add something before the dispatch happens.
Since we are adding something ourselves, we also have the responsibility to dispatch it after we do our own operation.
Here's what an action creator with thunk middleware looks like:

export const getPhoto = () => {
  return function(dispatch) {
    dispatch({ type: FETCH_PHOTO_START });
  }
}

As you can see, instead of returning an object, it returns a function that gets passed the dispatch method. Inside this inner function we then use dispatch to send the actual action with object type FETCH_PHOTO_START.

If we make this change now, our application should still behave in the same way: when we click on the Fetch Photo button we enter the LOADING state and a loader animation appears.

We have successfully introduced Redux middleware to handle our action.
Now we need to make the actual asynchronous API call and check if it resolves successfully or not and send another appropriate action when this call is done.
We will look at this problem in the next article.

---

I write daily about web development. If you like this article, feel free to share it with your friends and colleagues.

You can receive articles like this in your inbox by subscribing to my newsletter.