本文作者:IMWeb 黄qiong 原文出处:IMWeb社区 未经同意,禁止转载
combindeReducer 字面意思就是用来合并reducer的。
因为这样可以分离相应的逻辑。
我们知道,Reducer是用来管理state的,它要做的事情就是当state没有的时候,返回initalState,有的时候根据action来改变状态,这里注意它是一个纯函数,也就是它不改变传入的state。
当我们的reducer去处理很多action的时候,我们可以根据store的key把它拆分开,是的逻辑更加清晰。
有个todoList的store设计结构长这样:
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
text: 'Consider using Redux',
completed: true,
},
{
text: 'Keep all state in a single tree',
completed: false
}
]
}
接下来看它的reducer如何处理状态变化。
import { VisibilityFilters, ADD_TODO, TOGGLE_TODO } from './actions'
...
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
visibilityFilter: action.filter
})
case ADD_TODO:
return Object.assign({}, state, {
todos: [
...state.todos,
{
text: action.text,
completed: false
}
]
})
case TOGGLE_TODO:
return Object.assign({}, state, {
todos: state.todos.map((todo, index) => {
if (index === action.index) {
return Object.assign({}, todo, {
completed: !todo.completed
})
}
return todo
})
})
default:
return state
}
}
可以看到,每一次dispatch action,reducer都会通过Object.assign 返回一个只修改store里某一部分的新对象。
也就是说其实todos跟visibilityFilter是分开更新的,所以其实我们可以把它们分开来,使得逻辑更加清晰。
// 第一部分用于处理todo的更新
function todos(state = [], action) {
switch (action.type) {
case ADD_TODO:
return [
...state,
{
text: action.text,
completed: false
}
]
case TOGGLE_TODO:
return state.map((todo, index) => {
if (index === action.index) {
return Object.assign({}, todo, {
completed: !todo.completed
})
}
return todo
})
default:
return state
}
}
// 处理visibilityFilter
function visibilityFilter(state = SHOW_ALL, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return action.filter
default:
return state
}
}
// 最后再把todos跟处理visibilityFilter集合起来,凑成一个新的object返回出去
function todoApp(state = {}, action) {
return {
visibilityFilter: visibilityFilter(state.visibilityFilter, action),
todos: todos(state.todos, action)
}
}
这样每个reducer只负责自己那一块的状态更新。
combindReducers做了上面todoApp做的事情,就是返回一个大的function 接受initalState,action,然后根据key用不同的reducer。
用combindReducers就可以写成:
import { combineReducers } from 'redux'
const todoApp = combineReducers({
visibilityFilter,
todos
})
export default todoApp
换一种说法,我们需要写一个函数combineReducers,使得下面的用法
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)
}
}
注意:combinedReducer的key跟state的key一样
知道了需求之后我们来写一个自己的combindReducer吧
参数: reducers(Object)
function combindReducer(reducers) {
// 第一个只是先过滤一遍 把非function的reducer过滤掉
const reducerKeys = Object.keys(reducers)
const finalReducers = {}
reducerKeys.forEach((key) => {
if(typeof reducers[key] === 'function') {
finalReducers[key] = reducers[key]
}
})
const finalReducersKeys = Object.keys(finalReducers)
// 第二步比较重要 就是将所有reducer合在一起
// 根据key调用每个reducer,将他们的值合并在一起
let hasChange = false;
const nextState = {};
return function combind(state={}, action) {
finalReducersKeys.forEach((key) => {
// 第一步先获取目前的state[key],所以说传入reducer的key === store的key
const previousValue = state[key];
// 就用reducer[key]来处理,得到下一个状态
const nextValue = reducers[key](previousValue, action);
// 根据key更新store的值
nextState[key] = nextValue;
hasChange = hasChange || previousValue !== nextValue
})
// 如果整个循环都没有被更新过,返回state
return hasChange ? nextState : state;
}
}