Reducer

Introduction

We have already come across Redux and its state management solution for React. As soon as the rise of Redux, Reducers gained immense popularity amongst developers. We don't need to learn Redux to understand Reducers. Its knowledge might help us get adapted quickly. In this article, we would be learning about Reducers and what they are, so let's dive in.

A Reducer can be termed as a pure function that returns a new state whenever we take the state of an application and its action as the argument. In general terms, Reducers are the state managers in an application. Consider an instance where we code something in HTML for an input field. The Reducers thereby manages the UI state of an application or controlled components.

Consider another instance, if we design an authentication reducer that can take an empty object in the initial phase of the application. We can notify the user that he has logged in and had returned to the state, where he is being marked as a logged-in user. It is simple as that.

Implementation

Before implementing the Reducers, we might need to start from the very basics of pure functions. Pure functions are nothing but those functions that do not have any side effects and they return the exact result provided the same arguments are passed in. State management is also a form of pure functions and the actions associated with can be also be termed as a pure function. Consider the below code:

The example above returns a value based on the input fields provided by us i.e. 2 and 3 and we would always get 6 as the output as long as the same input is provided. Nothing else can affect the output we will get. Similarly, a reducer can be easily implemented in the same concept. Consider the below code:

In the above code, we have defined state and action property associated with Reducers. Let's understand them in depth-first.

State

A state can be considered as the data component that holds the data required by the component and instructs the component to render and re-render if the object changes its state. In a Redux managed application, the reducer is where the change of state occurs.

Action

An action can be defined as an object that contains the payload of information or the responsible component that triggers the changes in the Redux application state. Actions are by default the states in JavaScript that tell Redux to perform the specific type of task. Consider the below code:

An action can be defined as an object that contains the payload of information or the responsible component that triggers the changes in the Redux application state. Actions are by default the states in JavaScript that tell Redux to perform the specific type of task.

A reducer function takes two arguments i.e. the current state and the actions and displays result based on both the arguments to a new state. Consider the below syntax for the same.

In the similar sense, a reducer function is implemented. Consider the below code:

In this case, the reducer function increases the count by one since the current state is an integer. Renaming state to count does no harm since the argument becomes more readable and a better approach for beginners. This makes Reducer functions the perfect fit for reasoning about the state changes and has enough room to test them in an isolated environment. You can repeat the same test with the same input and the same output would be displayed.

Moreover, we can also perform conditional state transitions as we do with the core programs. You can do the conditional state transitions with the same concept of increasing and decreasing the count as we did in the example code. Consider the below code:

Conversely, it can be stated that reducers in JavaScript are one of the most useful methods of arrays that should always be in the arsenal of developer community. Reducers can be indirectly called as map methods that are used with arrays to improve their simplicity and performance in specific situations. As discussed earlier, a reduce methods invokes a callback function to each of the array stored element and outputs the final values as operation generator. Reducers deliver a cleaner way to iterate over objects and process the data stored in the array blocks efficiently.

To understand more about the reducers, we can create our own reducer with the help the below example shown. In this example, we are implementing a reducer function to observe how it works under the hood. This example would give you a better idea when to use the Reducer in JavaScript for optimizing the performance of our program.

First, we can check if the reduce method was called on a null or undefined object. Then we check if the passed callback is a function.

In the above code, we first check if the reducer method is called by an undefined or null object. Then we check if the passed callback can be considered as function.

After these initial type checks, we assign the past initial value to the accumulator. We then iterate over the array using loops to call the callback for every array item. After the execution ends, we have to return the value of the accumulator.

We are using this implementation only to help you understand how the reduce method actually works. For example, you can see that it uses for loop to iterate through the array under the hood.

Note: We are using the above coding sample only to make the monolithic concepts of reducers and how the methods work. Hence, the above example is not a production quality code and is used just for the creation of prototyping the reducer method in standard JavaScript.

Conclusion

Reducers are an integral part of state management in Redux. With the help of Reducers, we can easily manage the asynchronous transfer of data into different modes and configure it. Another advantage of using Reducers is that we can write pure functions to update only specific areas of our Redux application without creating any side effects in other areas. In this tutorial, we learned the basics and core of Reducers and how it extends its support while managing states in the Redux application. We also learned the core of reducers i.e. state and actions with the help of various examples.