Reducers in JavaScript
Complete Introduction to JS Reducers with Examples
The concept of reducers in JavaScript came to the table with the popularity of the stage management mechanisms like Redux and useReducer hook in React. However, even though the underlying concept of reducers is simple, it might be cumbersome to understand for newcomers at the beginning. So I’ll try to explain things simply in this article.
How do Reducers work?
The reducer is nothing else but a simple function that accepts two arguments and base on those two arguments, returns a new state value.
The reducer will accept a state and an action and then return a new state. Bellow is the pseudo function that represents this concept.
This can rewrite as follows with the JavaScript arrow function.
Please note that even though I used “color” as the first argument above, it is still the state variable, and we can name it whatever we need. And also, note that the second argument, “action.” This is a simple object with a property called type and optional payload property, another object. Because that payload object is optional, and for the simplicity of this first example, I’ll just omit it here and use it later down in this article.
Based on the type property in the action object, the reducer can return a new state conditionally.
This is a straightforward use of the reducer concept, but you’ll most often have complex states than this in your applications. It’s very common to use a switch-case statement rather than the if-else statement inside reducer functions. If this rewrite using a switch-case, it’ll look like this:-
Then let’s look at a bit complex reducer function with an additional payload property (object) in the action object.
Before diving into the reducer function itself, I need to highlight a couple of things in the above code section. First, in line number 2, I used JavaScript object destruction to extract properties from the payload object and bind them to a constant. If you are not familiar with this concept, I recommend going through that first.
The other main thing is, the reducer functions are used to return a new state value based on the incoming state value to the function. This means we never directly change the todos state; rather, the reducer function returns a new todos object. So, in short, the state processed by the reducer function is immutable.
Please note that in the line number 8 and 17 above, I’m using the JavaScript spread operator to change only the part of the matched todo without touching the rest of that todo. And also, using the array map method, I always ensure to return a new array by using the incoming todos array. That’s how we ensure the immutability of the state, in our case, the todos.
So, we can use our todoReducer function in our application like below. Please pay attention to how I define the action object and its optional payload property. The payload property (object) consists of a minimal amount of information our reducer functions need to know to change the state.
After calling to our todoReducer, the new todos state object will look like this:-
Conclusion
- Reducers can be used to manage state transitions in your application.
- The reducer function accepts state object and action.
- The action object consists of mandatory type property which can be used to conditionally check the state transition process and an optional payload object with minimum information need for that state transition.
Basically, that’s all about the reducers! By understanding this, now you should grasp the core concept behind Redux and React’s new useReducer hook. You can find all codes in this GitHub repo.
Thanks 🙏 for reading this, and feel free to share this with your colleagues. If you have any question, I’d love to answer those 😊
