Benefits of Redux middleware - React.js Tutorial

- [Instructor] When you first introduce Redux into your app, it makes sense to think of only actions and reducers to start with. However, there's a powerful concept of middleware which is very well suited to Redux and which makes Redux a good state management solution if you plan to utilize a lot of middleware. So what is middleware? Middleware is a way to call third-party endpoints that happens after you dispatch an action and before the action reaches the reducer. It's mostly commonly used for use cases like logging, calling an API, et cetera. Let's take the use case of logging since it can be really helpful when debugging. My first instinct when debugging Redux is to console.log actions, doing something like this. So I would console.log to say like action fired and then I would say console.log like id and so I would do stuff like this and it kind of works but then the other issue is that I'd also have to console.log in my reducer so let's take a look here. I would have to console.log reached reducer, maybe the state or maybe the action so I would be doing all kinds of things here which kind of gets cumbersome if you're doing it from multiple actions. This is where middleware can be really helpful. So, to write middleware, realize that it's just a function. It's often written as a curried function which is another way of saying it takes multiple arguments, one argument at a time. The first argument is the store, the second argument is the next function and the third argument is the action. The first argument is simply the redux store, the next function tells redux to continue processing the next middleware and that we're done doing whatever it was that we planned to do with the middleware. The last argument is the action which will then be sent onto the reducer. Once you're doing executing your middleware task, you call next on the action which determines whether more middleware is run or whether the application will move on to the reducer. Let's try putting it into action. Similar to how we did for context, we're going to want to create a new folder here called middleware and in this middleware folder let's create a loggerMiddleware file. Remember that our middleware is just a function so let's go ahead and get started by writing a function that's similar to the one that we saw before, const logger gets store okay then we're going to have a next argument and then we're going to have an action argument and what we want to do first is we want to console.log dispatching and remember that we have access to the action so we can say dispatching action. Great. We'd also like to store our state after the action is executed. In order to do that, instead of just calling next on action we're going to store that in a variable. So, let result get next on action. Perfect. Now that we have this here, we can now console.log the next state. Perfect so store.getState and then now that we have this we can return result which is really just next calling action. Now that we have state before and after calling the action we can return result which is really next with the argument of action. Now every time we execute an action we get a log of how the state has changed, pretty useful and not that difficult to do. Another use case which doesn't quite make sense for this app but is used all the time in production is calling an external analytics endpoint. For example, at a former company I used to work at we needed to track user clicks for every button. We implemented this in our react components by simply calling an API endpoint so something like this and this would happen every time we fired an on click event. Now let's think about how middleware can make this problem a lot easier. What if for every action we were able to call our analytics API? It would save us a lot of code and we wouldn't be co mingling presentation and business logic. Now our logger example here we can just replace these console logs with calling an analytics endpoint and we can even use the action name as an argument to identify which button was pressed. After that, we can call next and then just move on and we have an analytics tracker so as you can see here, middleware is a powerful tool for state management, to clean up your code and separate your concerns a lot more easily.