在Redux源码中主要有四个文件createStore,applyMiddleware,bindActionCreators,combineRedures

createStore.js

export default function createStore(reducer, preloadedState, enhancer),其中reducer函数是用来计算规则,preloadedState是初始状态,enhancer(高阶组合函数)是用来增强store对象,返回增强后的store
createStore将通过闭包的方式,封装私有变量,该store中的state等状态会被保存
//返回 store 暴漏出的接口
return {
dispatch, //唯一一个可以改变 state 的哈按时
subscribe, //订阅一个状态改变后,要触发的监听函数
getState, // 获取 store 里的 state
replaceReducer, //Redux热加载的时候可以替换 Reducer
[$$observable]: observable //对象的私有属性,供内部使用
}
如果preloadedState 是function,而enhancer为null,那么将两者交换,enhancer必须是function
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
enhancer = preloadedState // 把 preloadedState 赋值给 enhancer
preloadedState = undefined // 把 preloadedState 赋值为 undefined
}
function subscribe(listener)主要通过观察者模式返回一个取消订阅的函数,订阅通过一个数组队列来完成,添加或者取消监听之前都会保存一份订阅快照
 
在function dispatch(action)中,
 
//标记 dispatch 正在运行
isDispatching = true
 
//执行当前 Reducer 函数返回新的 state
currentState = currentReducer(currentState, action)
 
然后对所有的订阅数组队列,进行遍历
//所有的的监听函数赋值给 listeners
var listeners = currentListeners = nextListeners //遍历所有的监听函数
for (var i = 0; i < listeners.length; i++) { // 执行每一个监听函数
listeners[i]()

applyMiddleware

return一个函数,它可以接受createStore方法作为参数,给返回的store的dispatch方法再进行一次包装
 
return function (reducer, preloadedState, enhancer) {
var store = createStore(reducer, preloadedState, enhancer);
var _dispatch = store.dispatch; //获取dispatch
var chain = []; var middlewareAPI = {
getState: store.getState,
dispatch: function dispatch(action) {
return _dispatch(action);
}
};
chain = middlewares.map(function (middleware) { //遍历middlewares绑定
return middleware(middlewareAPI);
});
_dispatch = compose.apply(undefined, chain)(store.dispatch); return _extends({}, store, {
dispatch: _dispatch
});
};

bindActionCreators

将action和dispatch绑定起来:
bindActionCreators(actionCreators, dispatch)
 
// 判断 actionCreators 是一个函数
if (typeof actionCreators === 'function') {
// 调用 bindActionCreator , 返回包装后的 actionCreators , 包装后 actionCreators 可以直接 dispath
return bindActionCreator(actionCreators, dispatch);
}
如果是Object对象的话,遍历Object的key,获取Oobject每个key对应的value
// 获取 actionCreators 所有的 key
var keys = Object.keys(actionCreators);
// 用来保存新 转换后的 actionCreators
var boundActionCreators = {}; // 遍历 所有的 actionCreators keys
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
// 获取当前的 actionCreator
var actionCreator = actionCreators[key];
// 当前的 actionCreator 是一个函数
if (typeof actionCreator === 'function') {
// 调用 bindActionCreator , 返回包装后的 actionCreators , 包装后 actionCreators 可以直接 dispath
boundActionCreators[key] = bindActionCreator(actionCreator, dispatch);
}

combineReducers

获取combineReduces传进来的对象,获取对象的所有key集合finalReducerKeys。
<Provider store={store}>
</Provider>
获取state集合,遍历reducers集合找到当前reducers中的state,然后和经过reducer后的获取的新的state做对比,如果发生改变返回state
//循环遍历 finalReducerKeys ,执行所有的 reducer, 所以大家一定不要有相同的 action.type ,否则你的状态一定会混乱的
for (var i = 0; i < finalReducerKeys.length; i++) {
//获取当前的 key
var key = finalReducerKeys[i]
//获取当前 reducer
var reducer = finalReducers[key]
//获取当前 key 的 state
var previousStateForKey = state[key]
//执行 reducer ,获取 state
var nextStateForKey = reducer(previousStateForKey, action)
//判断执行完Reducer后, 返回回来的 nextStateForKey 是 undefined
if (typeof nextStateForKey === 'undefined') {
//得到 Undefined 状态的错误消息
var errorMessage = getUndefinedStateErrorMessage(key, action)
//抛出异常
throw new Error(errorMessage)
}
//赋值给 nextState
nextState[key] = nextStateForKey
//判断 state 是否经过 Reducer 改变了
hasChanged = hasChanged || nextStateForKey !== previousStateForKey
}
//返回state
return hasChanged ? nextState : state

  

通过ES6写法去对Redux部分源码解读的更多相关文章

  1. redux:applyMiddleware源码解读

    前言: 笔者之前也有一篇关于applyMiddleware的总结.是applyMiddleware的浅析. 现在阅读了一下redux的源码.下面说说我的理解. 概要源码: step 1:  apply ...

  2. Laravel 源码解读系列第四篇-Auth 机制

    前言 Laravel有一个神器: php artisan make:auth 能够快速的帮我们完成一套注册和登录的认证机制,但是这套机制具体的是怎么跑起来的呢?我们不妨来一起看看他的源码.不过在这篇文 ...

  3. HashTable、HashMap与ConCurrentHashMap源码解读

    HashMap 的数据结构 ​ hashMap 初始的数据结构如下图所示,内部维护一个数组,然后数组上维护一个单链表,有个形象的比喻就是想挂钩一样,数组脚标一样的,一个一个的节点往下挂. ​ 我们可以 ...

  4. redux源码解读

    react在做大型项目的时候,前端的数据一般会越来越复杂,状态的变化难以跟踪.无法预测,而redux可以很好的结合react使用,保证数据的单向流动,可以很好的管理整个项目的状态,但是具体来说,下面是 ...

  5. redux源码解读(二)

    之前,已经写过一篇redux源码解读(一),主要分析了 redux 的核心思想,并用100多行代码实现一个简单的 redux .但是,那个实现还不具备合并 reducer 和添加 middleware ...

  6. redux的源码解析

    一. redux出现的动机 1. Javascript 需要管理比任何时候都要多的state2. state 在什么时候,由于什么原因,如何变化已然不受控制.3. 来自前端开发领域的新需求4. 我们总 ...

  7. Redux 源码解读 —— 从源码开始学 Redux

    已经快一年没有碰过 React 全家桶了,最近换了个项目组要用到 React 技术栈,所以最近又复习了一下:捡起旧知识的同时又有了一些新的收获,在这里作文以记之. 在阅读文章之前,最好已经知道如何使用 ...

  8. redux源码解读(一)

    redux 的源码虽然代码量并不多(除去注释大概300行吧).但是,因为函数式编程的思想在里面体现得淋漓尽致,理解起来并不太容易,所以准备使用三篇文章来分析. 第一篇,主要研究 redux 的核心思想 ...

  9. 剖析nsq消息队列(二) 去中心化代码源码解析

    在上一篇帖子剖析nsq消息队列(一) 简介及去中心化实现原理中,我介绍了nsq的两种使用方式,一种是直接连接,还有一种是通过nslookup来实现去中心化的方式使用,并大概说了一下实现原理,没有什么难 ...

随机推荐

  1. linux 安装源码后的操作 ldconfig

    https://blog.csdn.net/cqkxboy168/article/details/8657487 知识点: .如果使用 ldd 命令时没有找到对应的共享库文件和其具体位置,可能是两种情 ...

  2. recommendation baselines

    整理recommendation baseline 的实现代码和方法归类: bpr:  https://github.com/gamboviol/bpr fpmc:  https://github.c ...

  3. Gitlab命令行简单使用

    使用Gitlab拉取远程文件到本地,然后再创建新分支的流程: git clone url   #将远程分支拉取到本地: git status / git branch #查看git的状态和分支情况,g ...

  4. Mysql 启动失败常见错误

    各位可以按照顺序逐条拍错. mysql启动时报错:Starting MySQL... ERROR! The server quit without updating PID file (/opt/my ...

  5. 一张图看懂CSS cascade, specific, importance, inheritance

    http://www.w3.org/TR/CSS21/cascade.html#inheritance http://www.w3.org/TR/CSS21/cascade.html#cascade ...

  6. request.getRequestDispatcher().forward(request.response)

    request.getRequestDispatcher().forward(request.response)中的那两个参数是哪里来的? 2010-11-09 23:13 QQ357169111 | ...

  7. C# Winform App 获取当前路径

    直接双击执行 D:\test1.exeSystem.Diagnostics.Process.GetCurrentProcess().MainModule.FileName D:\Test1.exe S ...

  8. SAP UI5和微信小程序对比之我见

    今天继续由SAP成都研究院著名的菜园子小哥Wang Cong,给大家分享他作为一个SAP前端人员是如何看待SAP UI5和微信小程序的异同点的. 关于Wang Cong种菜的手艺,大家请移步到他以前的 ...

  9. linux下redis4.0.2安装与部署

    一.redis的介绍 Redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcache类似,但很大程度补偿了Memcache的不足,它支持存储的value类型相对更 ...

  10. “三八节”如何做好EDM邮件营销

    阳春三月,乍暖还寒,万物复苏,一年一度的三八节也马上来临了,各路商家都开足马力,掀起了一股美丽的旋风.如今酒香也怕巷子深,要想取得良好的营销效果,就得早早动手,赚足眼球,才会换来节日当天的丰厚回馈.U ...