redux源码学习笔记 - combineReducers
上一篇有了解到,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的更多相关文章
- redux源码学习笔记 - createStore
本篇是学习redux源码的一些记录,学习的redux版本是^4.0.1. 在页面开发时,需要管理很多状态(state),比如服务器响应,缓存数据,UI状态等等···当页面的庞大时,状态就会变的混乱.r ...
- Redux源码学习笔记
https://github.com/reduxjs/redux 版本 4.0.0 先了解一下redux是怎么用的,此处摘抄自阮一峰老师的<Redux 入门教程> // Web 应用是一个 ...
- redux源码学习笔记 - applyMiddleware
在创建store时,createStore(reducer, preloadedState, enhancer),除了reducer函数,初始状态,还可以传入enhancer.这个enhancer在c ...
- Redux源码分析之combineReducers
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- Underscore.js 源码学习笔记(下)
上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...
- Underscore.js 源码学习笔记(上)
版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}()); 这样的东西,我们应该知道这是一个 IIFE(立即执行 ...
- AXI_LITE源码学习笔记
AXI_LITE源码学习笔记 1. axi_awready信号的产生 准备接收写地址信号 // Implement axi_awready generation // axi_awready is a ...
- Hadoop源码学习笔记(6)——从ls命令一路解剖
Hadoop源码学习笔记(6) ——从ls命令一路解剖 Hadoop几个模块的程序我们大致有了点了解,现在我们得细看一下这个程序是如何处理命令的. 我们就从原头开始,然后一步步追查. 我们先选中ls命 ...
- Hadoop源码学习笔记(5) ——回顾DataNode和NameNode的类结构
Hadoop源码学习笔记(5) ——回顾DataNode和NameNode的类结构 之前我们简要的看过了DataNode的main函数以及整个类的大至,现在结合前面我们研究的线程和RPC,则可以进一步 ...
随机推荐
- django ajax提交form表单数据
后台: from django.shortcuts import render from django.shortcuts import redirect from django.shortcuts ...
- 旅游类App的原型制作分享-Klook
Klook是一款旅游类App,它能探索和预订惊人的旅行活动.在世界各地以最优惠的价格畅玩. 这款原型中,用到了Mockplus的两种滚动方式,一种是把手机外壳拉长,另一种是使用滚动区组件,其中,滚动区 ...
- UI行业发展预测 & 系列规划的调整
又双叒叕拖更了,上一篇还是1月22号更新的,这都3月9号了…… 前面几期把职业规划.能力分析.几个分析用的设计理论都写完了,当然实际工作中用到的方法论不止上面这些,后续会接着学习: 如果你的目标是一线 ...
- this()基础用法
this()表示调用构造方法,此种调用只能用在构造方法中,即构造方法中调用构造方法this(实参). 1.this().this(实参)必须方法构造方法的第一行 2.在有参数构造方法中调用无参数构造方 ...
- 第二阶段第八次spring会议
昨天我对软件进行了植物网站的添加. 今天我将对软件进行宠物信息的添加. 清屏功能 private void button5_Click(object sender, EventArgs e) { te ...
- JS阻止事件冒泡的3种方法之间的不同
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...
- AJAX随笔2
Ajax作用: 是用JavaScript向服务器发送异步请求,然后服务器给出响应,然后以XML格式的文件返回给浏览器端! 异步: 当浏览器向服务器发送请求的时候,不是整个页面刷新,而是局部刷新[局部信 ...
- jquery选择器基础知识(复制w3c)
jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...
- reactjs 学习笔记
1.安装 npm install -g create-react-app create-react-app my-app cd my-app npm start
- 在ExtJS中查看视频
listeners: { render: function() { win.update( '<video src="' + path+ '" width="100 ...