How do Redux Reducers work in React?

If you have ever used Redux when developing applications to manage the state, then you have definitely encountered reducers. So, in this article, we will see how do Redux Reducers work in React.

 

What is a Reducer?

The reducer is a pure function. It takes the state of the application and action as arguments and returns a new state. For example, the authentication reducer can obtain the initial state of the application and action in the form of an empty object. It tells that the user is logged in and returning to the new application state when the user logs in. A pure function is a function without side effects. If the same parameters are passed, the same result will be returned. Let’s consider below an example of a pure function:

const add = (x, y) => x + y;
add(5, 7);

 

The above example returns a value based on the inputs. If you pass 5 and 7 then you’d always get 12. As long as it’s the same input nothing else affects the output you get, that’s an example of a pure function. Below is an example of a reducer function that takes in a state and an action:

const initialState = {};
const cartReducer = (state = initialState, action) => {
// Do something here
}

 

Let’s define the two parameters that a reducer takes in, state & action.

State:

The state is the data your component is using. It contains the data required by the component and determines what the component renders. Once the state object changes, the component will be re-rendered. If the application state is managed by Redux, then the reducer is where the state change occurs.

Action:

An action is an object that contains a payload of information. They are the only source of information for updating the Redux store. Also, Reducers update the store based on the value of action.type. Here we define action.type as ADD_TO_CART.

According to the official documentation, actions are the only things that trigger changes in a Redux application. They contain the payload for changes to an application store. Also, actions are JavaScript objects that tell Redux the type of action to be performed. Usually, they’re defined as functions like the one below:

const action = {
  type: 'ADD_TO_CART',
  payload: {
   product: 'margarine',
   quantity: 4
  }
}

 

The above code is a typical payload value, which contains the content submitted by the user. Also, it will be used to update the state of the application. As can be seen from the above, The action object contains the type of action and a payload object that would be necessary for this particular action to be performed.

Updating State Using Reducers:

Let’s have a look at the below example. The below example will show how Reducers work:

const increaseAction = {
type: 'INCREASE',
};

const decreaseAction = {
type: 'DECREASE'
};

const countReducer = (state = 0, action) => {
switch(action.type){
case INCREASE: 
return state + 1;

case DECREASE : 
return state -1;

default: 
return state;

}
};

 

In the above code, IncreaseAction and DecreaseAction are the actions that are used in the reducer to determine what the state is updated to. Next, we have a reducer function called countReducer, which accepts an action and an initial state with a value of 0. If the value of an action.type is INCREASE, we return a new state incremented by 1. Otherwise, if it is DECREASE, we return a new state decremented by 1. If none of these conditions is true, we return to the state.

Updating State Using Reducers: The Spread Operator:

The state can’t be directly changed. To create or update the state, we can use the JavaScript spread operator to make sure we don’t change the value of the state directly. Instead, return a new object that contains a state passed to it and the payload of the user.

const contactAction = {
type: 'GET_CONTACT',
payload: ['0801234567', '0901234567']
};

const initialState = {
contacts: [],
contact: {},
};

export default function (state = initialState, action) {
switch (action.type) {
case GET_CONTACTS: 
return {
...state,
contacts: action.payload,
};
default: 
return state;
}

 

In the above code, we use the spread operator to make sure we don’t directly change the value of the state. So that we can return a new object that is populated with the state passed to it and the payload sent by the user. By using the spread operator, we can make sure that the state remains the same when all new items are added to it. And replace the contact field in the previously existing state.

Conclusion:

Reducers are an important part of Redux state management. Through reducers, we can write pure functions to the specific areas of Redux application update and without side effects. We have learned the basics of Redux gearboxes, their uses, and the basics of gearboxes, states, and parameters.

Thanks for remaining with us till the end of the article. So, in this article, we have been through how do Redux Reducers work in React. We hope you have enjoyed reading this article.

Feel free to comment with your suggestions and feedback. At BOSC Tech Labs, we have a team of highly experienced React JS developers who can assist you in developing your customized web app. So contact us to hire experienced React JS developers.