拆分reducer
我们的todo程序可能不明显,action.type并不多,但是想想,如果我们的应用action.type较多,那时候的reducer我们还用一个巨型的switch语句处理?当然可以,如果你不怕被人拿着板砖来问你这段代码要怎么维护的话
1、怎么干掉巨型switch语句呢?
比较好的方法就是通过组合小的 Reducer 来产生大的 Reducer,而每个小 Reducer 只负责处理 State 的一部分字段。下面我们就来介绍一下如何拆分reducer。
2、如何拆分reducer
还记不记得在state设计中提到的范式化state有利于拆分reducer?在拆分reducer的时候我们首先应该考虑各个字段存不存在依赖关系,将不存在依赖关系的字段拆分给不同的子reducer管理。
拿我们上一小节中的reducer来看,我们会发现filter和todos两个字段不存在相互依赖,因此我们可以将filter和todos分别交给两个子reducer去处理
注意:
a、当state中字段相互依赖时我们可以考虑我们的state是不是遵循了范式化?能不能优化一下state?
b、注意每个 reducer 只负责管理全局 state 中它负责的一部分。每个 reducer 的 state 参数都不同,分别对应它管理的那部分 state 数据。
3、setFilter函数
我们将filter的部分写成子reducer,注意此处的state是filter
function setFilter(state = FILTER.SHOW_ALL,action){
switch(action.type){
case SETFILTER:
return action.filter;
default:
return state;
}
}
4、todos函数
我们将控制todos数组部分写成另外一个子reducer,注意此处的state是todos
function todos(state = [], action) {
switch (action.type) {
case ADD_TODO:
return [...state, {
text: action.text,
completed: false
}];
case COMPLETE_TODO:
return [
...state.slice(0, parseInt(action.index)),
Object.assign({}, state[action.index], {
completed: true
}),
...state.slice(parseInt(action.index)+ 1)
];
default:
return state;
}
}
参照上面案例,完成setFilter函数