有关reducer拆分的学习

一. reducer拆分

1. reducer代码拆分

我们来看一下目前我们的reducer：

• 当前这个reducer既有处理counter的代码，又有处理home页面的数据；
• 后续counter相关的状态或home相关的状态会进一步变得更加复杂；
• 我们也会继续添加其他的相关状态，比如购物车、分类、歌单等等；

function reducer(state = initialState, action) {
   
  switch (action.type) {
   
    case ADD_NUMBER:
      return {
    ...state, counter: state.counter + action.num };
    case SUB_NUMBER:
      return {
    ...state, counter: state.counter - action.num };
    case CHANGE_BANNER:
      return {
    ...state, banners: action.banners };
    case CHANGE_RECOMMEND:
      return {
    ...state, recommends: action.recommends };
    default:
      return state;
  }
}

如果将所有的状态都放到一个reducer中进行管理，随着项目的日趋庞大，必然会造成代码臃肿、难以维护。

因此，我们可以对reducer进行拆分：先抽取一个对counter处理的reducer：

// counter相关的状态
const initialCounter = {
   
  counter: 0
}

function counterReducer(state = initialCounter, action) {
   
  switch (action.type) {
   
    case ADD_NUMBER:
      return {
    ...state, counter: state.counter + action.num };
    case SUB_NUMBER:
      return {
    ...s