- 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
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
import React from "react";
import "./App.css";
import Sample from "./Sample";
const App = () => {
return (
<>
<Sample/>
</>
);
};
export default App;
|
Javascript
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
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
import { combineReducers }
from 'redux';
import userReducer
from './userReducer';
import settingsReducer
from './settingsReducer';
const rootReducer = combineReducers({
user: userReducer,
settings: settingsReducer,
});
export default rootReducer;
|
Javascript
export const UPDATE_USER = 'UPDATE_USER';
export const TOGGLE_DARK_MODE = 'TOGGLE_DARK_MODE';
export const TOGGLE_NOTIFICATIONS = 'TOGGLE_NOTIFICATIONS';
export const updateUser = (userData) => ({
type: UPDATE_USER,
payload: userData
});
export const toggleDarkMode = () => ({
type: TOGGLE_DARK_MODE
});
export const toggleNotifications = () => ({
type: TOGGLE_NOTIFICATIONS
});
|
Javascript
import { createStore } from 'redux';
import rootReducer
from './reducers/rootReducer';
const store = createStore(rootReducer);
export default store;
|
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.
What are combinedReducers in React Redux?
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.