How to insert functionality between action creator and reducer in React
Redux middleware allows us to insert some functionality in the action creator before an action is dispatched to the reducer.
This lets us do some extra operations like perform an API
call and have the action creator dispatch different actions depending on the result of the call.
As you know, an API
call can either succeed or resolve into an error and, depending on how the API
call resolves, our application can take different paths to handle the situation.
In order to apply middleware we use a Redux method called applyMiddleware
that is imported from Redux in index.js
, along with the Provider
and the reducer. In this example, we call the reducer rootReducer
.
// index.js
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
As you can see from the example, we pass applyMiddleware
as the second argument to the createStore
function.
applyMiddleware
is the function that lets us work with middleware, but to actually do something with it we need to pass it the actual middleware we want.
We call such a function a thunk
and we pass it to applyMiddleware
like this:
const store = createStore(rootReducer, applyMiddleware(thunk));
A thunk
is a function that receives dispatch
as an argument and calls it asynchronously. Since we want to call an API
inside our middleware, thunk
lets us dispatch different actions depending on the result of the API
call.
We could pass multiple middleware functions to applyMiddleware
and they will be called one by one in a sequence.
Before using thunk
we need to install redux-thunk
and import it into our file as thunk
:
// Install redux-thunk:
npm i redux-thunk
// Import thunk into index.js
import thunk from 'redux-thunk';
This will send all the dispatches of our actions through thunk
.
Now React is going to apply the thunk
middleware and execute whatever is in thunk
in between the action creators and the reducers.
To see how this works in practice, we are going to build a simple application that accesses the NASA API
and fetches the NASA Photo of the Day.
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.
Top comments (1)
Don't forget about logger!