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