Redux: использование combReducers для поддержания чистоты вашего состояния

Redux — это мощный инструмент, который поможет вам управлять состоянием вашего приложения. Прыжок с головой в Redux может быть немного ошеломляющим. Действия, создатели действий, преобразователи, редьюсеры, промежуточное ПО. Все это необходимо для успешного создания магазина и запуска Redux для вашего приложения.

Для начала ваши редукторы не будут слишком сложными.

import {createStore} from 'redux'
const NEW_USER = 'NEW_USER'
const newUser = user => ({type: NEW_USER, user})
const initialState = {}
const reducer = function (state = initialState, action){
  switch(action.type){
    case NEW_USER:
      return action.user
    default:
      return state
  }
}
const store = createStore(reducer)

По мере роста вашего приложения отслеживание нескольких объектов в состоянии может быстро запутаться.

import {createStore} from 'redux'
const NEW_USER = 'NEW_USER'
const ADD_ITEM = 'ADD_ITEM'
const REMOVE_ITEM = 'REMOVE_ITEM'
const newUser = user => ({type: NEW_USER, user})
const addItem = item => ({type: ADD_ITEM, item})
const removeItem = item => ({type: REMOVE_ITEM, item})
const initialState = {user: {}, cart: []}
const reducer = function (state = initialState, action){
  switch(action.type){
    case NEW_USER:
      return {...state, user: action.user}
    case ADD_ITEM:
      return {state.cart[...action.item]}
    case REMOVE_ITEM:
      return {state.cart.filter(item => item.id !== action.item.id)}
    default:
      return state
  }
}
const store = createStore(reducer)

К счастью для нас, в Redux есть встроенный инструмент, помогающий решить эту проблему. combReducers позволяет создавать отдельные редукторы для управления каждым объектом в состоянии. Теперь вам нужно только коснуться той части состояния, которую вы изменяете.

Разбивка каждого редюсера на отдельный файл помогает сделать ваш код более читабельным и управляемым. Теперь вы можете хранить все связанные действия, преобразователи и создателей действий в одном месте.

userReducer.js
------------------------------------------------------------------
const NEW_USER = 'NEW_USER'
const newUser = user => ({type: NEW_USER, user})
const initialState = {}
const userReducer =  function (state = initialState, action) {
  switch(action.type){
    case NEW_USER:
      return action.user
    default: 
      return state
  }
}
export default userReducer
cartReducer.js
--------------------------------------------------------------------
const ADD_ITEM = 'ADD_ITEM'
const REMOVE_ITEM = 'REMOVE_ITEM'
const addItem = item => ({type: ADD_ITEM, item})
const removeItem = item => ({type: REMOVE_ITEM, item})
const initialState = []
const cartReducer =  function (state = initialState, action) {
  switch(action.type){
    case ADD_ITEM:
      return [...state, action.item]
    case REMOVE_ITEM:
      return state.filter(item => item.id !== action.item.id)
    default:
      return state
  }
}
export default cartReducer

Как только мы закончим писать новый редьюсер, все, что нам нужно сделать, это использовать combReducers, чтобы создать один редуктор для создания нашего хранилища.
Теперь вы можете назначить редюсер для управления определенной частью состояния.

import {combineReducers, createStore} from 'redux'
import {userReducer} from './userReducer'
import {cartReducer} from './cartReducer'
const rootReducer = combineReducers(
{user: userReducer,
 cart: cartReducer}
)
const store = createStore(rootReducer);

Поскольку редукторы являются экспортом по умолчанию для этих файлов .js, мы можем использовать синтаксис ES6, чтобы сэкономить время на наборе текста. Назвав редюсер так же, как значение ключа в состоянии, мы можем просто передать импортированный редюсер в combReducers.

import {combineReducers, createStore} from 'redux'
import user from './userReducer'
import cart from './cartReducer'
const rootReducer = combineReducers(
{user, cart}
)
const store = createStore(rootReducer);

Теперь, когда ваш редукционный магазин настроен, управление всеми различными объектами в состоянии будет проще простого.