本文来自#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 {