Redux 中 combineReducers实现原理
使用一个reducer
const initialState ={id : 2,name : 'myName', }import { createStore } from 'redux';const reducer = function(state=initialState, action) {//... return state;}const store = createStore(reducer);
这种情况下,这个reducer函数会对所有的action进行判断和处理,传入的state参数是整个store中的状态的全集。可能是这样:
{id : 2,name : 'myName', }
使用combineReducers 复合多个reducer
const user = (state = [], action) => {switch (action.type) {case 'RENAME'://...default:return state;}}const product = (state = [], action) => {switch (action.type) {case 'SOLD'://...default:return state;}}const reducers = combineReducers({user,product,
});const store = createStore(reducers);
这种情况下,每个reducer会对相关的action进行处理,返回与之相关的状态。(而实际实现是,combineReducers将所有reducer合并成立一个大的reducer)。
整个store的状态全集会是如下样子:
{user: {id: 0,name: 'myNmae',},product: {id: 0,is_sold: 0,}
}
可以看出这是一个树形结构,每个reducer所处理的数据在自己的分支结构中。因此,每个reducer可以独立的编写,无需关注其他reducer的数据(state)处理方式。同样,dispatch的时候只要发送与之相关的内容即可。
譬如,写一个“我”的reducer:
const initialState ={name : null,displayName : null,};const me = (state = initialState, action) =>{switch (action.type){case 'SET_ME':{const { name, displayName } = action.payload;return { name, displayName };}default:return state;}};//想要设置“我”的属性,只要:
store.dispatch({type : 'SET_ME',payload : { "jacky", "小王"}
});
但是,事实上每个dispatch发出之后,所有reducer都会被调用一遍(只是大部分事不关己,直接返回自己的state),最终会返回一个完整的状态树,就像上面看到的样子。
编码建议
对于复杂的应用,可以编写多个reducer,每个reducer专注处理一类state。
可以将多个reducer的实现放到一个文件里实现,也可以每个reducer使用一个单独的文件(便于分工)。
Redux 中 combineReducers实现原理相关推荐
- Redux中的重要概念
Action/Reducer/Store 首先,先看看第一张图,图中展示了Redux的单向数据流,以及Action.Reducer和Store这三个核心概念. 下面就围绕上图,非别介绍Action.R ...
- Redux中的Reducers
Redux中的action只是表明了在应用中发生了什么,但是并没有对数据state进行处理,Reducers就是用来处理数据的. 因为在Redux中只有一个state对象,所以在设计state时我们要 ...
- java final 实例_Java中final实现原理的深入分析(附示例)
本篇文章给大家带来的内容是关于Java中final实现原理的深入分析(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. final在Java中是一个保留的关键字,可以声明成员变 ...
- 线程池中阻塞队列的作用?为什么是先添加列队而不是先创建最大线程?线程池中线程复用原理
1.一般的队列只能保证作为一个有限长度的缓冲区,如果超出了缓冲长度,就无法保留当前的任务了,阻塞队列通过阻塞可以保留住当前想要继续入队的任务.阻塞队列可以保证任务队列中没有任务时阻塞获取任务的线程,使 ...
- 一个插件让你在 Redux 中写 promise 事半功倍
Redux 的应用给我们开发带来了很多便利,让组件间交互不再那么复杂,但 Redux 也有它的短板,我们知道要通过 Redux 改变一个 state 需要定义 actionType→action→re ...
- FreeRtos学习笔记(11)查找就绪任务中优先级最高任务原理刨析
FreeRtos学习笔记(11)查找就绪任务中优先级最高任务原理刨析 怎么查找就绪任务中优先级最高的? tasks.c中声明了一个全局变量 uxTopReadyPriority,任务从其他状态进入就绪 ...
- 【直播预告】计算机视觉中数据增强原理和实践
应广大粉丝要求,以后有三AI会多组织直播,分享更多实践的干货知识,下面预告一下下周六的知乎Live直播-计算机视觉中数据增强原理和实践. 1.直播基本信息 时间:2019年4月20日20:00开始. ...
- vue指令写在html中的原理,详解Vue中的MVVM原理和实现方法
对Vue中的MVVM原理解析和实现首先你对Vue需要有一定的了解,知道MVVM.这样才能更有助于你顺利的完成下面原理的阅读学习和编写下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家 ...
- 产品工作中的金字塔原理
本文有PMCAFF 原创作者 咸鱼 原创发布于pmcaff.com 金字塔原理是国外一个慈祥的老太太(巴巴拉·明托)提出的一个方法论,主要是帮助我们清晰的思考.表达和写作的思维方式. 一. 什么是金字 ...
最新文章
- 前端开发学习笔记(二)
- 高德技术开放日 | 聊聊技术与成长那些事,大量实习岗、社招岗开放
- mysql的rows大小超过8126_mysql大字段(Row size too large8126)
- learnpythonthehardway下载_Python【十一】:阶段小结
- Oracle 10g RAC Installer 故障之--Oracle软件安装无法发现集群
- mysql 按照汉字的拼音排序、按照首字母分类
- JAVA实现网页版斗地主_java实现斗地主小案例
- zedBoard USB转串口驱动下载问题
- Archlinux 安装软件(更新系统)报错
- 智能合约漏洞,公链的阿喀琉斯之踵
- 流量卡之家:预约量超百万!华为5G手机线上线下产品紧俏 A股概念股大涨
- 参加第2届全国高校大数据教学研讨会总结
- 重磅:腾讯低代码平台正式开源!可拖拽生成手机、PC等项目!接私活福利啊!...
- taro开发微信小程序-播放轨迹(十一)
- 【SaaS考试认证】aPaaS_腾讯千帆神笔
- APP服务器被恶意攻击怎么办?
- true在java_使用truelicense实现用于JAVA工程license机制
- Halcon/C++编程
- 共享体脂秤为公众号增粉100%真粉活粉吗?
- authorization权限控制_授权(Authorization)