NASA Photo of the Day 4
Tags: react, redux, frontend, javascript
Published: 2020-01-06 15:26:28

---
title: NASA Photo of the Day 4
published: true
description: Introducing Redux middleware
tags: react, redux, frontend, javascript
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20191108-nasa-photo4.jpeg
---

# 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:

```js
// 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:

```js
// 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`:

```js
// index.js

import thunk from 'redux-thunk';
```

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

```js
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:

```js
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](https://cesare.substack.com).*