上一篇有了解到,reducer函数的两个为:当前state和此次dispatch的action。

state的结构是JavaScript对象,每个key都可以代表着不同意义的数据。比如说

    {
lists:object,
type:string
}

lists管理列表数据,type管理选中的类型。此时就需要考虑将state分为不同的子树,每次子树数据对应一个reducer子函数,单独管理对应的state。但是createStore(reducer,preloadedState)函数接收的reducer必须为单一个函数。这个时候就需要用到combinReducers函数,它的作用是把多个reducer函数合并成一个最终的reducer函数

combineReducers(reducers)

看一下combineReducers函数实现的核心代码,以下代码删掉了异常提示和处理部分,只保留了关键部分。

export default function combineReducers(reducers) {
//过滤掉参数中,value不是function的
const reducerKeys = Object.keys(reducers)
const finalReducers = {}
for (let i = 0; i < reducerKeys.length; i++) {
const key = reducerKeys[i] if (typeof reducers[key] === 'function') {
finalReducers[key] = reducers[key]
}
}
// 处理后的reducers对象的所有key值
const finalReducerKeys = Object.keys(finalReducers) // 返回合并后的reducer函数,她接收的参数和普通的reducer函数一致。
// 这里的state是完整的数据结构,而单一的reducer函数接收的只是它管理的那个子树
return function combination(state = {}, action) { let hasChanged = false
const nextState = {}
// 有action分派时,对所有的子reducer都触发
// 因为action有type字段,所以还是会触发到对应的之reducer函数
for (let i = 0; i < finalReducerKeys.length; i++) {
const key = finalReducerKeys[i]
const reducer = finalReducers[key]
// 对应的子树数据
const previousStateForKey = state[key]
// 调用对应的reduer函数,返回子树数据的更新结果
const nextStateForKey = reducer(previousStateForKey, action) // 子树数据同步到state中
nextState[key] = nextStateForKey
// 标记数据是否发生变化,只要有一个子树改变了就算数据已改变
hasChanged = hasChanged || nextStateForKey !== previousStateForKey
}
// 返回state数据
return hasChanged ? nextState : state
}
}

combineReducers接收的reducers是value为子reducer函数的对象。对象的key值可以和函数名一致,也可以不同。返回的state的key值和reducers对象的key值是保持一致的。

所以当createStore(reducer,preloadedState)中的reducer函数是combineReducers合并成的,传入初始状态时,要注意state的keys要和reducers一致

可见combineReducers主要的功能,就是把action传入到所有的子reducer函数遍历一次,同时处理state的切片和合并

当然这里少了很多异常校验部分的代码,有兴趣可以查阅详细源码。

实例

/* reducer */
import {combineReducers} from 'redux';
import testAsync from './testasync';
import todoList from './todolist'; const reducer = combineReducers({
testAsync,
todoList
}); export default reducer; /* store */
import {createStore} from 'redux';
import reducer from './reducer/index'; let store = createStore(reducer)

{testAsync,todoList}即是reducer函数对象,key和函数名一样。{a:testAsync,b:todoList}写成这样也可以。

state的获取,更新和单一的reducer函数一样,上一篇已做过介绍。

redux源码学习笔记 - combineReducers的更多相关文章

  1. redux源码学习笔记 - createStore

    本篇是学习redux源码的一些记录,学习的redux版本是^4.0.1. 在页面开发时,需要管理很多状态(state),比如服务器响应,缓存数据,UI状态等等···当页面的庞大时,状态就会变的混乱.r ...

  2. Redux源码学习笔记

    https://github.com/reduxjs/redux 版本 4.0.0 先了解一下redux是怎么用的,此处摘抄自阮一峰老师的<Redux 入门教程> // Web 应用是一个 ...

  3. redux源码学习笔记 - applyMiddleware

    在创建store时,createStore(reducer, preloadedState, enhancer),除了reducer函数,初始状态,还可以传入enhancer.这个enhancer在c ...

  4. Redux源码分析之combineReducers

    Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...

  5. Underscore.js 源码学习笔记(下)

    上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...

  6. Underscore.js 源码学习笔记(上)

    版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}());  这样的东西,我们应该知道这是一个 IIFE(立即执行 ...

  7. AXI_LITE源码学习笔记

    AXI_LITE源码学习笔记 1. axi_awready信号的产生 准备接收写地址信号 // Implement axi_awready generation // axi_awready is a ...

  8. Hadoop源码学习笔记(6)——从ls命令一路解剖

    Hadoop源码学习笔记(6) ——从ls命令一路解剖 Hadoop几个模块的程序我们大致有了点了解,现在我们得细看一下这个程序是如何处理命令的. 我们就从原头开始,然后一步步追查. 我们先选中ls命 ...

  9. Hadoop源码学习笔记(5) ——回顾DataNode和NameNode的类结构

    Hadoop源码学习笔记(5) ——回顾DataNode和NameNode的类结构 之前我们简要的看过了DataNode的main函数以及整个类的大至,现在结合前面我们研究的线程和RPC,则可以进一步 ...

随机推荐

  1. django ajax提交form表单数据

    后台: from django.shortcuts import render from django.shortcuts import redirect from django.shortcuts ...

  2. 旅游类App的原型制作分享-Klook

    Klook是一款旅游类App,它能探索和预订惊人的旅行活动.在世界各地以最优惠的价格畅玩. 这款原型中,用到了Mockplus的两种滚动方式,一种是把手机外壳拉长,另一种是使用滚动区组件,其中,滚动区 ...

  3. UI行业发展预测 & 系列规划的调整

    又双叒叕拖更了,上一篇还是1月22号更新的,这都3月9号了…… 前面几期把职业规划.能力分析.几个分析用的设计理论都写完了,当然实际工作中用到的方法论不止上面这些,后续会接着学习: 如果你的目标是一线 ...

  4. this()基础用法

    this()表示调用构造方法,此种调用只能用在构造方法中,即构造方法中调用构造方法this(实参). 1.this().this(实参)必须方法构造方法的第一行 2.在有参数构造方法中调用无参数构造方 ...

  5. 第二阶段第八次spring会议

    昨天我对软件进行了植物网站的添加. 今天我将对软件进行宠物信息的添加. 清屏功能 private void button5_Click(object sender, EventArgs e) { te ...

  6. JS阻止事件冒泡的3种方法之间的不同

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...

  7. AJAX随笔2

    Ajax作用: 是用JavaScript向服务器发送异步请求,然后服务器给出响应,然后以XML格式的文件返回给浏览器端! 异步: 当浏览器向服务器发送请求的时候,不是整个页面刷新,而是局部刷新[局部信 ...

  8. jquery选择器基础知识(复制w3c)

    jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...

  9. reactjs 学习笔记

    1.安装 npm install -g create-react-app create-react-app my-app cd my-app npm start

  10. 在ExtJS中查看视频

    listeners: { render: function() { win.update( '<video src="' + path+ '" width="100 ...