Compose Redux Higher Order Reducers

Instructor: In this app component, I added a couple of actions to remove articles and users. Right now, they are just placeholders. We are going to create a higher-order reducer for removing those items.

We go where we have the "add higher-order reducer." Creating a new one would be about duplicating this. Let's say "remove." This will act for the actions that has the "remove" prefix.

Then, to use this higher-order function, it would be the same as using this one, but we need to nest it. It would be about doing "remove," then the reducer is the one that the "add" returns, and we should pass again the user as the section. So if we try this...

Of course, instead of having an element, we need to remove it. By saying "state.filter," then with that item is different to the action payload.

Let's try this again. Now it's been removed.

The problem of this is that, when we are using several higher-order reducers, we are nesting many functions. That can become very unreadable. To improve this, what we can do is apply currying to these two higher-order functions and then we can compose them.

In order to apply currying, what we need to do is, instead of this being a function that has two parameters, let's make it one level deeper. It takes a section and that returns a function that takes our reducer, which returns our reducer function.

Let's do the same with the one above. "Section," then "reducer," and this allow us to, instead of using this syntax here, we could do this. We call "at," with "user," and then we pass the reducer.

The same with "remove." We call remove with user and we call the function return with the reducer return by "add." This is better, but it could be even easier to understand. We can achieve that by composing the higher-order reducer functions.

First, import "compose" from redax, which is a utility function that redax gives us for composing functions. Let's try the section reducer, which is another function that takes a section as a parameter, and then we'll use "compose" with the "add" and the "remove" reducers, passing the section as the first parameter.

This "compose" function, how it works is, from right to left, it will pass, as our first parameter of the function, the result of the previous one. Since this is returning a function that takes a reducer as parameter, "remove" will take the original reducer as a parameter and "add" will take the reducer returned by "remove."

This will allow us to use it in a very neat way, because then we can remove this and say "section reducer." We pass the section user and we call the return function with the user's reducer. We can do this again with the articles, so let's copy and paste that line and change "user" to "article" and pass the article's reducer.

This should work out the same way, so let's try it out. You can apply this to [inaudible 4:28] as many reducers as you want. You will need only to compose them here.