【React系列】Redux(三) state如何管理

本文来自#React系列教程：https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg5MDAzNzkwNA==&action=getalbum&album_id=1566025152667107329)

一. reducer拆分

1.1. reducer代码拆分

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

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

如果将所有的状态都放到一个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 {
    ...state, counter: state.counter - action.num };
    default:
      return state;
  }
}

再抽取一个对home处理的reducer：

// home相关的状态
const initialHome = {
   
  banners: [],
  recommends: []
}

function homeReducer(state = initialHome, action) {
   
  switch (action.type) {
   
    case CHANGE_BANNER:
      return {
    ...state, banners: action.banners };
    case CHANGE_RECOMMEND:
      return {