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

Когда приложение становится сложным, разделение состояния на отдельные части (или срезы) помогает организовать код. Каждый срез может управляться своим редьюсером. Функция 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 становится стандартом, так как оно помогает поддерживать порядок в коде и упростить работу с состоянием.