What are combinedReducers in React Redux? - Coding

In React Redux ‘combinedReducers‘ is like putting together smaller pieces of a puzzle (reducers) to form one big puzzle (the root reducer). It helps manage your application state more efficiently by organizing and combining these smaller pieces, making your code cleaner and easier to maintain.

Key Features of combinedReducers in React Redux:

Organize your app’s state management by breaking it into smaller, more manageable pieces.
Combines these smaller pieces (reducers) into a single, connected state tree.
Simplifies debugging and maintenance as your app grows by keeping related logic separate.
Enables modularity and reusability of reducers, making adding or modifying features easier.
Improves performance by allowing selective updates to specific parts of the state tree rather than re-rendering the entire app.

Example: Below are the example of combinedReducers in React Redux.

Install the necessary package in your application using the following command.

npm install react-redux 
npm install redux

Javascript

// index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import App from './App';
import rootReducer from './reducers/rootReducer';
 
const store = createStore(rootReducer);
 
const root = createRoot(document.getElementById('root'));
 
root.render(
    <Provider store={store}>
        <App />
    </Provider>
);

Javascript

//App.js
import React from "react";
import "./App.css";
import Sample from "./Sample";
 
const App = () => {
  return (
    <>
      <Sample/>
    </>
  );
};
 
export default App;

Javascript

// todoReducer.js
 
import { ADD_TODO, REMOVE_TODO }
    from "../constants/TodoActionTypes";
 
const initialState = {
    todos: []
};
 
const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_TODO:
            return {
                ...state,
                todos: [...state.todos,
                {
                    id: Date.now(),
                    text: action.payload.text
                }]
            };
        case REMOVE_TODO:
            return {
                ...state,
                todos: state.todos.filter
                    (todo => todo.id !== action.payload.id)
            };
        default:
            return state;
    }
};
 
export default todoReducer;

Javascript

// settingsReducer.js
const initialState = {
    darkMode: false,
    notifications: true
};
 
const settingsReducer = (state =
    initialState, action) => {
    switch (action.type) {
        case 'TOGGLE_DARK_MODE':
            return { ...state, darkMode: !state.darkMode };
        case 'TOGGLE_NOTIFICATIONS':
            return {
                ...state, notifications:
                    !state.notifications
            };
        default:
            return state;
    }
};
 
export default settingsReducer;

Javascript

// rootReducer.js
import { combineReducers }
    from 'redux';
import userReducer
    from './userReducer';
import settingsReducer
    from './settingsReducer';
 
const rootReducer = combineReducers({
    user: userReducer,
    settings: settingsReducer,
});
 
export default rootReducer;

Javascript

// actions.js
 
// Action types for user
export const UPDATE_USER = 'UPDATE_USER';
 
// Action types for settings
export const TOGGLE_DARK_MODE = 'TOGGLE_DARK_MODE';
export const TOGGLE_NOTIFICATIONS = 'TOGGLE_NOTIFICATIONS';
 
// Action creators for user
export const updateUser = (userData) => ({
    type: UPDATE_USER,
    payload: userData
});
 
// Action creators for settings
export const toggleDarkMode = () => ({
    type: TOGGLE_DARK_MODE
});
 
export const toggleNotifications = () => ({
    type: TOGGLE_NOTIFICATIONS
});

Javascript

// store.js
import { createStore } from 'redux';
import rootReducer
    from './reducers/rootReducer';
     
const store = createStore(rootReducer);
 
export default store;

CSS

/* Sample.css */
.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
 
.user-info,
.app-settings {
    margin-bottom: 20px;
}
 
.dark-mode {
    background-color: #333;
    color: #fff;
}
 
.button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
 
.button:hover {
    background-color: #0056b3;
}

Start your application using the following the command.

npm start

Output:

Output

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
Write an overview of React Redux
What are Providers in React Redux?
Responsive Number Counting Animation Using React JS
What are Action's creators in React Redux?
Explain the concept of snapshot testing in React.

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	9