A quick quide to the redux middleware

what a beautiful day to start with redux middleware

Okay, So the big question is what is a redux middleware?

The answer is pretty simple “Middleware is the suggested way to extend Redux with custom functionality. Middleware lets you wrap the store’s dispatch method for fun and profit. The key feature of middleware is that it is composable. Multiple middleware can be combined together, where each middleware requires no knowledge of what comes before or after it in the chain.”

In react when you use redux the data flow is like as follows

data flow in react&redux app

So the problem here is what if we want some additional checks or functionality to happen when an action is dispatched from the view and it is not received by the reducer yet. This problem is solved by the redux-middleware.

In simple language “MiddleWares is a way to highjack the data flow between the action and reducer and perform some additional functionality”

Let us suppose we want a logger function which logs every action dispatched from view.

So the middleware code for that will be something like this

const logger = (store) => (next) => (action) => {
console.log('Action dispatched is'+ action)
return (next(action));
}
export default logger;

So in the above function we are logging our action that is dispatched from the view of the app.

The above syntax is simple but its confusing. So lets break it down.

Middleware is a function that returns another function which takes store as an argument. Now this function also returns another function which takes next as an argument. Finally, It returns another function which takes the action as an argument. So now we have acces to all three

1. The Store
2. Next
3. The Action itself

We are halfway there

So now we can perform anything that we want to do. In our case its just logging. After our work is done we return next like this next(action) so the control is passed to the next middleware in the line and if there is none then go to the reducer.

Viola, we did it. We just wrote our first middleware function.

So for a better use case scenario we take a look at another example of middleware.

Scenario:- Suppose we have our webapp for todo items and we use redux as our store.And now we want a check for when we add a todo that says “Invest in bitcoin” then we don’t want to add it to our state. We also want to show an alert (“BAD IDEA”).

So That’s how the middleware should look like

const checkAndAdd = (store) => (next) => (action) => {
     if (action.type === 'ADD_Todo') {
       if (action.value.toLowerCase().includes('bitcoin')) {
          return alert('Bad Idea');
       } else {
        return (next(action))
       }
     }
}
export default checkAndAdd;

So, Here we go. In the above middleware we are checking if the action is of “ADD_Todo” type then if the value contains “bitcoin” then don’t pass it to the reducer simply generate the an alert. And if it doesn’t contain “bitcoin” then go ahead and add it to the state.

One Last thing. How To Apply the middleware code to the redux.

Its easy than you think. We need to import “applyMiddleware” from redux and pass it to createStore like this.

createStore(store, applyMiddleware(logger,checkAndAdd));

Voila we did it. We just added some middleware in our redux app. Now we are set to go and use them.

So now the Data flow in our redux app would be like this

Data flow with the middlewares