We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
combineReducer是redux中相当重要的一个函数,它接受一个对象作为参数,包含一组子reducer,当应用较为庞大时需要按照某种规则切分reducer,combineReducer就是用来组合这些reducer给createStore生成store树的
combineReducer
createStore
createStore函数的第一个参数是可以返回一个state对象的reducer
以下对部分类型判断以及错误信息做了省略,可结合官方源码combineReducers一同食用
export default function combineReducers(reducers) { // 使用Object.keys方法将reducers中可枚举的属性生成一个keys数组 const reducerKeys = Object.keys(reducers) const finalReducers = {} for (let i = 0; i < reducerKeys.length; i++) { const key = reducerKeys[i] /*省略部分类型判断*/ if (typeof reducers[key] === 'function') { // 遍历keys数组,并把相应的subreducer赋值给finalReducers finalReducers[key] = reducers[key] } } //第一步其实只是简单的将reducers对象中type为’function’的subreducer筛选出来赋值给finalReducers对象 // 将finalReducers中可枚举的属性生成一个keys数组 const finalReducerKeys = Object.keys(finalReducers) // 这里返回最终合成的reducer,注意这个reducer将会被传递给createStore函数 /* !!!!!!!!!! 划重点 这个函数不同于之前例子中的reducer 将它称为reducer函数是因为他们会有相同的作用 既传入默认state和action将会生成一个计算后的state对象 不同之处在于: 这个函数并不需要根据action.type使用相应的策略更新state 只是简单依次执行所有reducer并将所有reducer生成的state合并起来返回给store 并且它所接受的state参数也是所有reducer生成的state组合后产生的总的state !!!!!!!!!! (东厂厂公) */ return function combination(state = {}, action) { let hasChanged = false // 最终产生的state树 const nextState = {} for (let i = 0; i < finalReducerKeys.length; i++) { const key = finalReducerKeys[i] // 根据key获取相应的subReducer const reducer = finalReducers[key] // 根据key获取相应的subState const previousStateForKey = state[key] /* 这里直接执行reducer函数, 传入subState和action 这个循环内会依次执行subReducer函数 第一个参数state会根据每个reducer的key不同来进行筛选 第二个参数action不出意外会每个reducer都传一遍,有相应策略则会更新 所以不同action的type不能相同,否则会出现状态混乱的情况 */ const nextStateForKey = reducer(previousStateForKey, action) // 把新的state赋值给nextState对象 nextState[key] = nextStateForKey hasChanged = hasChanged || nextStateForKey !== previousStateForKey } // 简单对比后返回最终state return hasChanged ? nextState : state } }
最后返回的combination函数通过引用finalReducers对象形成了一个闭包,当这个函数被返回给createStore调用后,内部依然可以访问finalReducers,而createStore内部dispatch调用reducer时也会把state对象传递进去,再通过reducer的策略更新并返回,形成一个闭环
combination
finalReducers
The text was updated successfully, but these errors were encountered:
No branches or pull requests
redux源码解读第二篇---combineReducers
combineReducer
是redux中相当重要的一个函数,它接受一个对象作为参数,包含一组子reducer,当应用较为庞大时需要按照某种规则切分reducer,combineReducer就是用来组合这些reducer给createStore
生成store树的以下对部分类型判断以及错误信息做了省略,可结合官方源码combineReducers一同食用
最后返回的
combination
函数通过引用finalReducers
对象形成了一个闭包,当这个函数被返回给createStore调用后,内部依然可以访问finalReducers,而createStore内部dispatch调用reducer时也会把state对象传递进去,再通过reducer的策略更新并返回,形成一个闭环The text was updated successfully, but these errors were encountered: