Combining Reducers in JavaScript

When building a large-scale application in JavaScript, it is common to have several related pieces of data that need to be stored in the application state. It can also be helpful to break down the application state into smaller, more manageable pieces, each responsible for a specific area of the application. One way to achieve this is through the use of reducers.

Reducers are functions that take the current state and an action, and return a new state. They are typically used in combination with the redux library to manage the application state.

In some cases, it may be necessary to combine multiple reducers into a single reducer that can be used to manage the overall application state. This can be achieved using the combineReducers function provided by redux.

Here is an example of how to use combineReducers to combine multiple reducers into a single reducer:

import { combineReducers } from 'redux';

const todosReducer = (state = [], action) => {
  // Reducer logic
};

const visibilityFilterReducer = (state = 'SHOW_ALL', action) => {
  // Reducer logic
};

const rootReducer = combineReducers({
  todos: todosReducer,
  visibilityFilter: visibilityFilterReducer
});

export default rootReducer;

In this example, we first define two separate reducers for managing todos and visibilityFilter. We then use the combineReducers function to create a single reducer that manages both pieces of state.

The resulting reducer can be used in our redux store like any other reducer:

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

// Access the todos state
const todos = store.getState().todos;

// Dispatch an action to toggle the visibility filter
store.dispatch({ type: 'SET_VISIBILITY_FILTER', filter: 'COMPLETED' });

Using combineReducers can greatly simplify the management of complex application states by breaking them down into smaller, more manageable pieces.