How to combine multiple reducers in ReactJS ?

To combine multiple reducers in React JS we have a function called combineReducers in the redux. This basically helps to combine multiple reducers into a single unit and use them.

Approach

In React, to combine and implement multiple reducers combineReducers methods are used. It manages multiple reductions and uses them with the defined actions in the redux.

Steps to create React Application

Step 1: Create a React application using the following command:

npx create-react-app example

Step 2: After creating your project folder i.e. example, move to it using the following command:

cd example

Step 3: Install the following modules. From the root directory of your project in the terminal, run the following command:

npm i redux react-redux

Project Structure:

The updated dependencies in package.json file will look like:

{
 "dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-redux": "^8.1.3",
 "react-scripts": "5.0.1",
 "redux": "^4.2.1",
 "web-vitals": "^2.1.4"
 },
}

Example: Make a simple book list application with the help of redux to understand how to combine multiple reducers.

Step to run the application: Run the application using the following command

npm start

Output:  Open browser and visit http://localhost:3000/ to see this output

👁 Peek-2023-10-18-15-30