redux源码图解:createStore 和 applyMiddleware
在研究 redux-saga
时,发现自己对 redux middleware
不是太了解,因此,便决定先深入解读一下 redux
源码。跟大多数人一样,发现 redux源码 真的很精简,目录结构如下:
|—— utils
|—— warnings.js
|—— applyMiddleware.js
|—— bindActionCreator.js
|—— combineReducers.js
|—— compose.js
|—— createStore.js
|—— index.js
在 index.js
中导出了5个模块,即外部可用的:
export {
createStore,
combineReducers,
bindActionCreators,
applyMiddleware,
compose
}
然而,当真正解读的时候,发现还真是有点吃不消,经过几天的硬啃之后,只能说:终于等到你,还好我没放弃。。。(自带BGM)
这里,我可能不会仔细去分析它的源码,但会就自己的理解进行梳理概括,具体的对我很有帮助的文章会放到结尾参考处。
首先是对 createStore
、 applyMiddleware
及 compose
的梳理,因为这3个模块存在相互调用的关系,其关系图如下(高清图请查看 redux源码图解之createStore和applyMiddleware):
1. 每个模块的作用
createStore
的函数的作用就是生成一个 store 对象,这个对象具有5个方法:
return {
dispatch, // 传入 action,调用 reducer 及触发 subscribe 绑定的监听函数
subscribe,
getState,
replaceReducer, // 用新的 reducer 代替当前的 reducer,使用不多
[$$observable]: observable
}
而 applyMiddleware
函数的作用就是对 store.dispatch
方法进行增强和改造,使得在发出 Action 和执行 Reducer 之间添加其他功能。
compose
函数则是 applyMiddleware
函数的核心,其会形成串联的函数调用关系,用于增强 dispatch
方法。
2. 模块之间的调用关系
(i) 首先,createStore
模块会对传入的参数进行判断,分别处理不同参数的情况,当传入 applyMiddleware(...middleware)
的时候,就会返回 applyMiddleware(...middleware)
执行之后的高阶函数,即:
// createStore.js
if (typeof enhancer !== 'undefined') {
if (typeof enhancer !== 'function') {
throw new Error('Expected the enhancer to be a function.')
}
// 这里的 enhancer 是 applyMiddleware(...) 执行后的高阶函数,传参无 enhancer
return enhancer(createStore)(reducer, preloadedState)
}
(ii)然后,就进入了 applyMiddleware
模块内部的逻辑,从 createStore
返回的高阶函数,其传入的参数是没有 enhancer
的,因此走的是 createStore
函数中没有传入 enhancer 的逻辑,用于先获得没有中间件时返回的 store。
// applyMiddleware.js
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
const store = createStore(reducer, preloadedState, enhancer)
let dispatch = store.dispatch
let chain = [] // 用于存放获取了store的中间件数组
const middlewareAPI = {
getState: store.getState,
dispatch: (...args) => dispatch(...args)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
(iii)接着,获取最原始的 store 的 getState
和 dispatch
,封装于 middlewareAPI
对象。将该对象传入中间件 middleware
中,形成中间件数组 chain
。
其中,middleware
的范式是:(store) => (next) => (action) => {}
,将 middlewareAPI
传入middleware
后,中间件便获得了 {getState, dispacth}
。至此,chain 中间件数组中包含的每个中间件的形式都变成了 (next) => (action) => {}
的形式。
(iiii)最后,调用 compose
函数,如 chian = [middleware1, middleware2, middleware3]
,则 dispatch = compose(...chain)(store.dispatch)
,即执行 middleware1(middleware2(middleware3(store.dispatch)))
,然后赋值给 dispatch
。
总之,不管是否有
applyMiddleware
,createStore
的结果都是输出一个 store 对象,而applyMiddleware
则可以对 store 对象中的dispatch
进行改造。
3. 参考
- redux middleware 详解
- Redux源码分析(一):主要架构,createStore.js,applyMiddleware.js和compose.js部分
- Redux 入门教程(二):中间件与异步操作
redux源码图解:createStore 和 applyMiddleware的更多相关文章
- redux源码阅读之compose,applyMiddleware
我的观点是,看别人的源码,不追求一定要能原样造轮子,单纯就是学习知识,对于程序员的提高就足够了.在阅读redux的compose源码之前,我们先学一些前置的知识. redux源码阅读之compose, ...
- Redux 源码解读--createStore,js
一.依赖:$$observable.ActionTypes.isPlainObject 二.接下来看到直接 export default 一个 createStore 函数,下面根据代码以及注释来分析 ...
- Redux源码分析之createStore
接着前面的,我们继续,打开createStore.js, 直接看最后, createStore返回的就是一个带着5个方法的对象. return { dispatch, subscribe, getSt ...
- Redux源码分析之applyMiddleware
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- redux源码学习笔记 - createStore
本篇是学习redux源码的一些记录,学习的redux版本是^4.0.1. 在页面开发时,需要管理很多状态(state),比如服务器响应,缓存数据,UI状态等等···当页面的庞大时,状态就会变的混乱.r ...
- Redux源码分析之基本概念
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- Redux源码分析之bindActionCreators
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- Redux源码分析之combineReducers
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- Redux源码分析之compose
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
随机推荐
- oracle存储过程出现ORA-01403: 未找到数据 问题解决方法
这段时间在做一个业务,需要用到存储过程处理业务逻辑,但是出现一个ORA-01403: 未找到数据 问题, 那么这个应该如何解决这个问题 declare mixType integer; begin - ...
- webform的代码设计文件莫名出错的解决
不知道怎么回事,建立webform工程时,编译,出错,提示代码设计文件(自动生成的文件代码,不能修改)出错,提示有的对象正在使用,于是删除里面多余的对象标记,还是没用,又自动生成了. 解决办法: 1. ...
- EChart.js 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- html中form表单的使用方法和介绍
from表单的使用方法 一.表单赏析 二.了解表单功能:用于搜集不同类型的用户输入的内容 有了表单,网页的内容可以由用户自己创建,那么对于网页来说,我们既是网页创建都者,也是网页的消费者. 三.常用的 ...
- Python_Mix*匿名函数,sorted,filter,map,递归函数,二分法查找
lambda匿名函数(函数名统一都叫lambda) 为了解决简单的需求而设计的一句话函数 语法: lambda 参数 返回值 n = lambda a,b: max(a,b) ret = n(9,4) ...
- nginx常用模块
Nginx模块介绍 核心模块:core module 标准模块:stand modules HTTP modules: Standard HTTP modules Optional HTTP modu ...
- 分享:五个非常有用的WP插件
一全老师(www.yiquanseo.com)认为非常有用的几款WP插件,用WordPress做站的可以看下,估计你很可能用得到! 第一款WooCommerce Page Builder: 这款插件是 ...
- MFC窗口风格 WS_style/WS_EX_style
窗口风格(Window style) WS_BORDER 有边框窗口 WS_CAPTION 必须和WS_BORDER风格配合,但不能与WS_DLGFRAME风格一起使用.指示窗口包含标题要部分 ...
- JArray数组转换为DataTable
- IIS--------问题解决(localhost可以访问,本地ip不可以)
api:localhost可以访问,本地ip就不可以,报错:405 解决方案:api项目 - 属性 - web - 服务器 将:iis-express 改为 本地iis 创建虚拟目录:eg:http: ...