Creating custom Middleware in React/Redux.

Published in

Netscape

3 min readDec 2, 2016

Redux is known to be the most popular library for managing state across your React application. Redux provides us with a Store which holds our state, and a Dispatch for triggering actions, and Reducers for updating our state tree. If you don’t know about Redux, you can watch this video tutorial https://egghead.io/courses/getting-started-with-redux to have an understanding of Redux.

Redux also provides us with a middleware, this middleware are functions that allow us extend the functionality of our redux application. The middleware sits in between the dispatch and reducers, which means we can alter our dispatched actions before they get to the reducers or execute some code during the dispatch.

An example of a redux middleware is redux-thunk which allows you to write action creators that return a function instead of an action. In this article i would be showing how you can build your own custom middleware.

Writing a middleware is very easy, and below is a basic code to create your middleware.

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

As you can see, the middleware is a curried function. What is a curried function? A curried function is a function that returns another function.

Example:

const foo = a => b => a + b;
foo(1)(2); //=> 3OR in ES5function foo(a) {  
  return function(b) {  
   return a + b;  
  } 
}

Therefore we can say our middleware receives a store, then returns a function that receives a next function and returns another function that receives an action.

The Store: That’s our redux store.

The Next: We call this function when our middleware is done with the task assigned to do. This sends our actions to our reducer or another middleware.

The Action: Thats our action currently being dispatched.

Now let’s write some code:

I have forked the react-redux repo to quickly help us get started with writing code, and i would be working with the counter example.

To apply a middleware in redux, we would need to require the applyMiddleware function from the redux library.

import {createStore, applyMiddleware} from "redux";

In order to check that our middleware is hooked up correctly, we can start by adding a log to display a message when an action is dispatched.

Now if we go ahead to trigger an action by clicking a button, we would see the logged message in our console.

In our middleware we have access to store.getState() to get the current state and store.dispatch() to dispatch a new action if we want to.

Next we can add another middleware to trigger an event when we click the increment button.

Easy as pie! isn’t it.

An exercise you can try out: Display a loader icon when your actions make request to your backend to process data and clear the loader icon when data gets to your reducers.

The code to this tutorial can be found here https://github.com/jihdeh/redux-counter-middleware

Creating custom Middleware in React/Redux.

Written by Babajide Fowotade