min read
November 8, 2019
November 14, 2018

Custom Redux Middlewares with Example

Custom Redux Middlewares with Example
Table of contents

Redux has now become an integral part of the web app development, especially when developed with React. It offers so much flexibility and scalability that no other library as of now. With good coding practices, it is now very feasible to use redux even for small projects and for incremental projects it really leads the way. 

Redux is not just only about the store, actions and reducers, it is much more powerful, robust and scalable when middlewares are used. Conventionally, the middlewares come under the advanced redux but I think middlewares are also a very important part of the redux architecture. 

What is a Redux Middleware?

A redux middleware is nothing more than a function which is invoked on every action and we can do almost anything e.g Data manipulations, popups, confirmations, API response validation and more, before pushing the updates to the reducers followed by the state change. 


  1. Helps in writing very reusable code.
  2. Writing unit tests becomes like heaven.
  3. A product becomes easily scalable.
  4. It makes the process completely automated.
  5. Tons of reducers are available in form of node packages e.g redux-saga, redux-thunk, redux-beacon and so on.
  6. A dev can write its own middleware.


  1. Harder to grasp in the beginning.

How to write your own middleware?
Writing middlewares is as simple as writing simple functions and all you need to do is wrap the middlewares in your redux store using applyMiddleware method. 

What are we going to make?

We are going to make an API middleware which will process our API requests and send the API response (success/error) and other data (isLoading / isLoaded). With this we won’t have to worry about writing the same code again and again, like retrieving the response data or setting/resetting the loading. Also, one of the biggest advantage is we can dispatch multiple actions inside our middleware when needed.

Let’s Get Started

const middleware = store => next => action => {
  // Code to be executed


Const middleware = function(store) {
  return function(next) {
    return function(action) {
      // Code to be executed

        Where store =  Redux store, next = Dispatch function, action = Action fired by the user

  • Our middleware must come into play when there is an API request action needs to be performed and else for other actions it shouldn’t do anything.
  • We are going to add our custom attributes e.g type replaced with types, introducing API attribute.
  • Our action would look something like this 

function requestData(data) {
  return {
    api: axios.get(“”)

          You can see here, we have modified the type to types in order to dispatch multiple actions. E.g Firing loading actions to set/reset isLoading before and after the API request.

  • Let’s start writing our middleware and add some validations to make it only work for API requests

const apiMiddleware = store => next => action => {

  // If action is a function
  if (typeof action === 'function') {
    return action(dispatch, getState);

  const { api, types, } = action;

  // If api is not there, it will filter out our non-api requests
  If (!api) {
    return next(action);

You can use the redux dev extension to know about the changes and actions fired. In this way you will be able to check state diffs on each action.

Code Repository - 


We have implemented an API middleware function which is fired on all the action and filters out the API actions. A number of actions are fired e.g setting/resetting the loading before and after the API is requested and the final response is received. The code might confuse you a bit but try to understand the big picture here. With middlewares, we wouldn’t have to worry about handling the same stuff repeatedly.

Written by
No art workers.
We'd love to talk about your business objectives