Как использовать combineReducers и зачем это нужно?

Question

combineReducers — это функция Redux, которая объединяет несколько редьюсеров в один. Это удобно, когда состояние приложения разделено на логические части (например, пользователи, задачи, фильтры). Каждый редьюсер управляет своей частью состояния, а combineReducers объединяет их в единую структуру.

YeaHub · Accepted Answer

Когда приложение становится сложным, разделение состояния на отдельные части (или срезы) помогает организовать код. Каждый срез может управляться своим редьюсером. Функция combineReducers позволяет объединить эти редьюсеры в единый корневой редьюсер, который передается в хранилище Redux.Пример использования:Отдельные редьюсеры для каждого среза состояния:const todosReducer = (state = [], action) => {
	switch (action.type) {
		case 'ADD_TODO':
			return [...state, action.payload];
		case 'REMOVE_TODO':
			return state.filter((todo) => todo.id !== action.payload);
		default:
			return state;
	}
};
const filterReducer = (state = 'all', action) => {
	switch (action.type) {
		case 'SET_FILTER':
			return action.payload;
		default:
			return state;
	}
};Объединение редьюсеров:import { combineReducers } from 'redux';
const rootReducer = combineReducers({
	todos: todosReducer,
	filter: filterReducer,
});
export default rootReducer;Создание хранилища:import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);Пример состояния: После использования combineReducers, состояние будет выглядеть так:{
	todos: [{ id: 1, text: 'Learn Redux' }],
	filter: 'all',
}Доступ к данным: Компоненты могут извлекать данные из соответствующих частей состояния:const todos = store.getState().todos;
const filter = store.getState().filter;Зачем использовать combineReducers?Упрощение структуры: Разделение логики на отдельные редьюсеры делает код более читаемым и поддерживаемым.Масштабируемость: Легче добавлять новые редьюсеры, когда приложение растет.Гибкость: Позволяет каждому редьюсеру фокусироваться только на своей части состояния.В больших приложениях использование combineReducers становится стандартом, так как оно помогает поддерживать порядок в коде и упростить работу с состоянием.