react的reducer 拆分

组件间通信：https://blog.csdn.net/RuiKe1400360107/article/details/82992506

redux的用法：https://blog.csdn.net/RuiKe1400360107/article/details/83023732

flux架构：https://blog.csdn.net/RuiKe1400360107/article/details/83028947

router路由：https://blog.csdn.net/RuiKe1400360107/article/details/83053997

一、Reducer 的拆分

   Reducer 函数负责生成 State。由于整个应用只有一个 State 对象，包含所有数据，对于大型应用来说，这个 State 必然十分庞大，导致 Reducer 函数也十分庞大

举个例子：

const chatReducer = (state = defaultState, action = {}) => {
  const { type, payload } = action;
  switch (type) {
    case ADD_CHAT:
      return Object.assign({}, state, {
        chatLog: state.chatLog.concat(payload)
      });
    case CHANGE_STATUS:
      return Object.assign({}, state, {
        statusMessage: payload
      });
    case CHANGE_USERNAME:
      return Object.assign({}, state, {
        userName: payload
      });
    default: return state;
  }
};

上面代码中，三种 Action 分别改变 State 的三个属性。

• ADD_CHAT：chatLog属性
• CHANGE_STATUS：statusMessage属性
• CHANGE_USERNAME：userName属性

这三个属性之间没有联系，这提示我们可以把 Reducer 函数拆分。不同的函数负责处理不同属性，最终把它们合并成一个大的 Reducer 即可：

const chatReducer = (state = defaultState, action = {}) => {
  return {
    chatLog: chatLog(state.chatLog, action),
    statusMessage: statusMessage(state.statusMessage, action),
    userName: userName(state.userName, action)
  }
};

Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer：

import { combineReducers } from 'redux';

const chatReducer = combineReducers({
  chatLog,
  statusMessage,
  userName
})
export default todoApp;

上面的代码通过combineReducers方法（该函数根据 State 的 key 去执行相应的子 Reducer，并将返回结果合并成一个大的 State 对象）将三个子 Reducer 合并成一个大的函数 。这种写法有一个前提，就是 State 的属性名必须与子 Reducer 同名。如果不同名，就要采用下面的写法：

const reducer = combineReducers({
  a: doSomethingWithA,
  b: processB,
  c: c
})

// 等同于
function reducer(state = {}, action) {
  return {
    a: doSomethingWithA(state.a, action),
    b: processB(state.b, action),
    c: c(state.c, action)
  }
}

注意！   可以把所有子 Reducer 放在一个文件里面，然后统一引入：

import { combineReducers } from 'redux'
import * as reducers from './reducers'

const reducer = combineReduce