Front-End Insights

What is Redux Middleware?


Do you remember one of my previous posts: Redux Thunk – how to populate various reducers? In it I showed you one of the adoptions of Redux Thunk middleware. But some of you may ask: actually… what is redux middleware? I will try to explain it in today’s blog post!

Redux middleware – the definition

If you take a look at the official documentation of Redux, you will find there the below statement:

Redux middleware provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.

That’s right. Redux middleware is nothing more than a function which is invoked after an action is dispatched but before a reducer takes care of the action. This is why it is an appropriate place to add, for example, the logging to the application. For me, it is something similar to aspect programming – it is an additional action which is transparent for the dispacher and for the reducer.

Redux middleware – an example

Ok, now that we know the definition, let’s take a look at how to create a custom reducer. As I mentioned in the previous paragraph, the most common usage of the middleware is logging. I don’t think there is a need to reinvent the wheel so let’s see how this is done in the Redux documentation:

const logger = store => next => action => {
  console.log('dispatching', action);
  let result = next(action);
  console.log('next state', store.getState());
  return result;

export default logger;

First of all, please note that I used ES6 syntax here (as well as in other React examples). And because of that the below syntax may be difficult to understand for newcomers:

const logger = store => next => action => { ... }

This is actually a cascade of arrow functions and it could be rewritten to something like below:

function logger(store) {
  return function wrapDispatch(next) {
    return function dispatch(action) {

This is a well known concept of functional programming and it is called “currying”.

Ok. Now is the time to explain how it works. So, the logger function is actually our middleware. It gets the store object which is injected by the applyMiddleware function (I will explain this later).
The logger returns another function which gets the next function as a parameter. This function allows us to dispatch the next action.
And the last, most inner, function gets the action object as a parameter. All these three parameters are enough to do everything you want with your actions and stores.

Now, let’s take a look at the content of our middleware (it’s pretty straightforward):

console.log('dispatching', action);
let result = next(action);
console.log('next state', store.getState());
return result;

In the first line we just log the action which is currently dispatching. This is just the action object you usually return in the action creator.
After that we call the next function passing the action object to it. This dispatches the action so, in the third line, when we call store.getState() we get the state of the redux store after this dispatch.
At the end we just return the result of the dispatching of the action.

Applying middleware

Once we have our middleware created we can apply it to the Redux during the store creation. It may look like below:

import { createStore, applyMiddleware } from 'redux';
import logger from './logger';
import reducers from './reducers';

const store = createStore(reducers, applyMiddleware(logger));

As you can see, there is a dedicated method, applyMiddleware, available in the Redux module. Just pass the result of its call as a parameter of the createStore method call.


That’s all for today. I think Redux middleware is a very useful and powerful tool which may be helpful in many aspects of using redux stores. It is good to know how to use it properly.