[Redux/Mobx] 说说Redux的实现流程

[Redux/Mobx] 说说Redux的实现流程

通过分析redux的几个核心api,来看如何实现redux

  • store.subscribe: 订阅数据的变化
  • store.dispatch:dispatch后改变state,同时通知store.subscribe函数执行,上面这两个函数可以利用发布-订阅模式
  • store.getState: 通过这个函数直接返回内存中的state变量即可
    简单的实现如下
export function createStore(reducer, enhancer) {if (enhancer && typeof enhancer === 'function') {const newCreateStore = enhancer(createStore);const newStore = newCreateStore(reducer);return newStore;}let state;              // state记录所有状态let listeners = [];     // 保存所有注册的回调function subscribe(callback) {listeners.push(callback);       // subscribe就是将回调保存下来}// dispatch就是将所有的回调拿出来依次执行就行function dispatch(action) {state = reducer(state, action);for (let i = 0; i < listeners.length; i++) {const listener = listeners[i];listener();}}// getState直接返回statefunction getState() {return state;}// store包装一下前面的方法直接返回const store = {subscribe,dispatch,getState}return store;
}export function combineReducers(reducerMap) {const reducerKeys = Object.keys(reducerMap);    // 先把参数里面所有的键值拿出来// 返回值是一个普通结构的reducer函数const reducer = (state = {}, action) => {const newState = {};for (let i = 0; i < reducerKeys.length; i++) {// reducerMap里面每个键的值都是一个reducer,我们把它拿出来运行下就可以得到对应键新的state值// 然后将所有reducer返回的state按照参数里面的key组装好// 最后再返回组装好的newState就行const key = reducerKeys[i];const currentReducer = reducerMap[key];const prevState = state[key];newState[key] = currentReducer(prevState, action);}return newState;};return reducer;
}// 参数支持多个中间件
export function applyMiddleware(...middlewares) {function enhancer(createStore) {function newCreateStore(reducer) {const store = createStore(reducer);// 多个middleware,先解构出dispatch => newDispatch的结构const chain = middlewares.map(middleware => middleware(store));const { dispatch } = store;// 用compose得到一个组合了所有newDispatch的函数const newDispatchGen = Redux.compose(...chain);// 执行这个函数得到newDispatchconst newDispatch = newDispatchGen(dispatch);return {...store, dispatch: newDispatch}}return newCreateStore;}return enhancer;}

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

















主目录

与歌谣一起通关前端面试题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/404232.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据镜像备份工具rsync

rsync可以用来实现数据本地镜像和远程备份。 1&#xff0c;可以镜像保存整个目录和文件。 2&#xff0c;可以增量同步数据&#xff0c;文件传输率高。 3&#xff0c;可以保持原文件的权限&#xff0c;时间等属性。 4&#xff0c;可以加密传输数据。 5&#xff0c;可以使用rcp、…

Error format not a string literal and no format arguments解决方案

From: http://www.cnblogs.com/hhuang2012/p/3336911.html 场景: cocos2dx 跨平台开发, 移植Android版本时, 当进行到build_native.sh步骤后 ndk版本: android-ndk-r9 开发环境: mac os 64bit, AndroidEclipse BUG: CCCommon.cpp:54:77: error: format not a string literal an…

[Redux/Mobx] redux的数据存储和本地储存有什么区别?

[Redux/Mobx] redux的数据存储和本地储存有什么区别&#xff1f; Redux存储的数据本质上都是JS变量&#xff0c;都是在内存中的&#xff0c;页面刷新就会消失本质存储是像localStorage Cookie IndexDB WebSQL等缓存技术&#xff0c;它是存储在硬盘中的&#xff0c;不会随便页面…

java_IO流之 NIO

NIO 定义 即新IO&#xff0c;在JDK1.4的java.nio.*包中引入&#xff0c;其目的在于提高速度。 在Java1.4之前的I/O系统中&#xff0c;提供的都是面向流的I/O系统&#xff0c;系统一次一个字节地处理数据&#xff0c;一个输入流产生一个字节的数据&#xff0c;一个输出流消费一个…

iOS iPhone SDK 包含哪些东西?

From&#xff1a; http://www.cnblogs.com/jy578154186/archive/2013/02/27/2934881.html iPhone SDK 包含哪些东西&#xff1f; 第一部分&#xff1a; 在使用Intel芯片的Macintosh计算机开发iOS应用程序所需的全部接口、工具以及资源全都包含于iPhone SDK。 苹果公司将大部分系…

[Redux/Mobx] 你有使用过redux-saga中间件吗?它是干什么的?

[Redux/Mobx] 你有使用过redux-saga中间件吗&#xff1f;它是干什么的&#xff1f; redux-saga 就是用来处理副作用&#xff08;例如&#xff1a;AJAX请求&#xff09;的一个中间件&#xff0c;使用Generator 函数 个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知…

python Pillow 的简单案例

&#xff03;代码来自 实验楼https://www.shiyanlou.com/courses/ #encodingutf-8#/usr/bin/env pythonfrom PIL import Imageimport argparse parser argparse.ArgumentParser() parser.add_argument(file)parser.add_argument(-o , --output)parser.add_argument(--width, t…

“我的电脑”右键“管理”打不开,提示“该文件没有与之关联的程序来执行该操作“

From: http://bbs.kafan.cn/thread-1240058-1-1.html 如图&#xff1a; 右键单击桌面上的“我的电脑”&#xff0c;再点“管理”就弹出这个对话框了。 【该文件没有与之关联的程序来执行该操作。请安装一个程序&#xff0c;或者&#xff0c;如果已安装程序&#xff0c;请在“…

[Redux/Mobx] Redux怎样重置状态?

[Redux/Mobx] Redux怎样重置状态&#xff1f; 先在store初始化时对store的初始化数据状态进行保存&#xff0c;然后reducer中多定义一个重置状态的type"RESET"的action的逻辑&#xff0c;这个操作里面直接返回初始的状态值&#xff0c;在需要重置状态的时候&#xf…

Java数据结构--HashTable(拉链法)

双向节点 /*** Created by root on 16-3-6.*/ public class Node<E> {public E data;public Node prev;public Node next;public Node(E target,Node prev,Node next){//链接两个孤立节点datatarget;this.prevprev;this.nextnext;}public Node(){this(null,null,null);}p…

[交流] 新手常见(五国)(-v图)错误解决(原版,破解kernel,补丁kext下载)

From: http://blog.csdn.net/ashuai81/article/details/8032952 原文出处&#xff1a;http://bbs.pcbeta.com/viewthread-863656-1-1.html 谢谢大神&#xff0c; 看了这个才弄出了黑苹果。 在可安装的主版硬件上&#xff0c;安装Mac不该是个大问题&#xff0c;声卡、显卡、…

[Redux/Mobx] Context api可以取代Redux吗?为什么?

[Redux/Mobx] Context api可以取代Redux吗&#xff1f;为什么&#xff1f; 可以&#xff0c;但是并不完美。 利用Context APIuseReducer的方案可以实现简化版的Redux。 Redux除了能够存储数据之外&#xff0c;它的强大之处还在于数据修改的单一性&#xff0c;清晰的数据流向&a…

四则运算题1

/*信息&#xff1a;20133075 张勋 《随机生成30道四则运算题目》要求&#xff1a;除整数外&#xff0c;还要支持真分数的四则运算设计思路&#xff1a; 1.通过radom函数生成自然数&#xff0c;给变量赋值 2.另一个变量是真分数&#xff0c;分子比分母小 3.随机生成四则运…

Redux/Mobx面试题汇总

[Redux/Mobx] redux和flux的区别是什么&#xff1f; [Redux/Mobx] 什么是redux&#xff1f;说说你对redux的理解&#xff1f;有哪些运用场景&#xff1f;[Redux/Mobx] 在React中你是怎么对异步方案进行选型的&#xff1f; [Redux/Mobx] 推荐在reducer中触发Action吗&#xff…

RTP传输H264时的sps和pps的获取

From: http://wmnmtm.blog.163.com/blog/static/38245714201192491746701/ 使用RTSP传输H264的时候,需要用到sdp协议描述,其中有两项:Sequence Parameter Sets (SPS) 和Picture Parameter Set (PPS)需要用到,那么这两项从哪里获取呢?答案是从H264码流中获取.在H264码流中,都是…

54.施工方案第二季(最小生成树)

时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description c国边防军在边境某处的阵地是由n个地堡组成的。工兵连受命来到阵地要进行两期施工。 第一期的任务是挖掘暗道让所有地堡互联互通。现已勘测设计了m条互不相交的暗道挖掘方案&a…

jQuery面试题汇总

【jQuery】 [jQuery] 针对jQuery的优化方法有哪些&#xff1f; [jQuery]JQuery一个对象可以同时绑定多个事件&#xff0c;这是如何实现的&#xff1f; [jQuery] jQuery中如何将数组转化为json字符串&#xff0c;然后再转化回来&#xff1f; [jQuery] jQuery UI怎样自定义组…

H264中的SPS、PPS提取与作用

From: http://blog.csdn.net/sunnylgz/article/details/7680262 牛逼的视频会议网站&#xff1a;http://wmnmtm.blog.163.com/blog/#m0 http://wmnmtm.blog.163.com/blog/static/38245714201192491746701/ 使用RTP传输H264的时候,需要用到sdp协议描述,其中有两项:Sequence Pa…

POJ 3991 Seinfeld

Seinfeld Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1285 Accepted: 599 Description I’m out of stories. For years I’ve been writing stories, some rather silly, just to make simple problems look difficult and complex problems look easy. …

HTML面试题汇总

【HTML】 [html] 你有使用过MediaRecorder吗&#xff1f;说说它的运用场景有哪些&#xff1f; [html] 进入编辑页面时&#xff0c;如何把光标聚焦到第一个input&#xff1f; [html] 如何给input的右上角加个清除的按钮 [html] 举例说明只用html和css如何使得一个列表编号倒…