Redux 实现过程的推演
这是一篇浅入浅出的 Redux 实现过程的推演笔记!正常来说应该是要从源码下手开始解析,这里是逆向推演,假如有需求是要这么一个东西,那么该如何从零开始实现?
通过该笔记,更多的是希望自己能够多熟悉从无到有的开发思维,而非源码解析这种从有到有的轮子思维。
Rudex 介绍
首先确认目标,要写个什么样的东西。
官宣:A predictable state container for JavaScript apps. JavaScript 应用程序中可预测的状态容器。
通过这句话,挖掘一些关键点:
-
- 要有个状态:state
-
- 要有个(状态)容器:store
-
- 在状态改变的流程中,状态是可预测的,即:
- 3.1 何时触发状态进行改变? dispatch,触发 state 的改变
- 3.2 触发了什么改变? action,描述 state 该做什么修改
- 3.3 状态做什么样改变? reducer,描述 state 的改变过程,传入改变前的 state,返回改变后的 state
reducer 是个纯函数很重要,能够消除其他影响让 state 的变化真正是可预测的。
有了这些关键点,接下来就是实现了
Redux 实现
注意,被控对象(state)被包含在整个链路中,我们关心链路即可
/* * createStore 状态容器 * @param reducers 容器总得需要知道是做什么样的改变 * @param initialState 初始化(预置)的 state */ const createStore = (reducers, initialState) => { // 通过 reducer 取到改变后的值,重新存储 let currentReducer = reducers; // 存 let currentState = initialState; // 取 const getState = () => { return currentState; }; // 改 const dispatch = action => { currentState = currentReducer(currentState, action); return action; }; // 这里可能还需要可被观察的,留坑、不实现,有兴趣的看文章后的源码阅读链接 return { getState, dispatch }; };
至此,容器部分完成。
接下来看改变流程可预测的实现:
action 描述 state 该做什么修改,这仅仅是个对象而已,我们仅需要定义好格式,如下例子(比如数字的重置)
/* * action * @property type 描述需要做什么操作 * @property preload 预加载数据,包含 state 的新值 */ const RESET = "RESET"; const RESET_ACTION = { type: RESET, preload: { count: 0 } };
reducer 描述状态做了什么改变?
/* * reducer * @currentState 当前的 state,旧值 * @action 该做什么修改的类型描述 */ const reducer = (state = { count: 0 }, action) => { switch (action.type) { case RESET: { return { ...state, ...action.preload }; } default: { return state; } } };
将上面三份代码合一起,试一试
const store = createStore(reducer); store.dispatch({ type: RESET, preload: { count: 10 } }); store.getState(); // output { count: 10} store.dispatch(RESET_ACTION); store.getState(); // output { count: 0}
流程是正常了,但情况稍微有点不对,如果在 dispatch 之前去 getState,那么 state 是 {},而不是给的初始值{count:0}
对于这点,只要在 createStore 时候的默认执行一次 dispatch,用以生成初始的 state tree
在 createStore 的 return 之前加入 dispatch
dispatch({ type: "@redux/INIT" });
ok,至此已经有个简版 redux 了(observable 和 subscribe 的话,加个 listeners,这里不多做介绍,有兴趣的点击文末链接),但是 redux 还有 middleware 的功能(而且这部分代码会比这里好玩一点),继续实现 middleware
Middleware 实现
首先,明确一下希望 middleware 能够做什么?
官方描述:
Middleware is the suggested way to extend Redux with custom functionality. Middleware lets you wrap the store's dispatch method for fun and profit. The key feature of middleware is that it is composable. Multiple middleware can be combined together, where each middleware requires no knowledge of what comes before or after it in the chain.
Middleware 是通过自定义功能来扩展 redux 的推荐方法,它能够让你有效的包裹 store 的 dispatch 方法已达到所需的目的,其关键特征在于组合,多个 middleware 能够进行组合,每个 middleware 都是独立的,它们不需要知道在流程的之前或之后会发生什么。
从上面的描述中,得出结论:
- 首先,middleware 要是个 function 且该函数对 dispatch 的执行做包裹;
- 然后,每个 middleware 互不相干且可组合的;
- 最后,值得注意的是 middleware 内部能够访问及操作 state,不然只能做些和 state 不相干的事情,那这个扩展的意义就不大了。
接下来是推演实现的过程:
首先,我们需要考虑的是怎么处理每个函数,让其既是独立的,又是可组合的,而且内部还得包裹 dispatch。看下面的思考过程:
比如我有个函数 a 和函数 dispatch 我们希望执行的过程是 dispatch 被包裹在 a 内部执行,首先想到的肯定是 callback 形式,没毛病,看代码
var a = function(next) { console.log("a-before"); next(); console.log("a-after"); }; var dispatch = function(action) { console.log("do ", action); return action; }; a(dispatch); // output: // a-before // do undefined // a-after
但是没有能够把 dispatch 的参数传进去呀,于是对于内部函数的传参,不陌生的,我们又想到,外包再套一层 function,闭包存参(用 jqyery 的时候绑定事件没少这么干吧),看代码:
var a = function(next) { return function(action) { console.log("a-before"); next(action); console.log("a-after"); }; }; var dispatch = function(action) { console.log("do ", action); return action; }; a(dispatch)("test action"); // output: // a-before // do test action // a-after
但如果 a 的这种类型的包裹函数是多个的,试下加个函数 b,因为要嵌套的是函数,所以将 action 作为第二次执行的参数
var a = function(next) { return function(action) { console.log("a-before"); next(action); console.log("a-after"); }; }; var b = function(next) { return function(action) { console.log("b-before"); next(action); console.log("b-after"); }; }; var dispatch = function(action) { console.log("do ", action); return action; }; a(b(dispatch))("test action"); // output: // a-before // b-before // do test action // b-after // a-after
然后问题又来了 ,我们要再加个函数 c,难道让我写 a(b(c(dispacth)))(action)?
既然函数 a, b, c 都是一种类型的东西,可以格式化成数组,回想一下什么方法能够依次组合数组的每一项。没错,是 reduce,继续看代码:
var a = function(next) { return function(action) { console.log("a-before"); next(action); console.log("a-after"); }; }; var b = function(next) { return function(action) { console.log("b-before"); next(action); console.log("c-after"); }; }; var c = function(next) { return function(action) { console.log("c-before"); next(action); console.log("c-after"); }; }; var dispatch = function(action) { console.log("do ", action); return action; }; var d = [a, b, c].reduce((pre, now) => (...args) => pre(now(...args))); d(dispatch)("test action"); // output: // a-before // b-before // c-before // do test action // c-after // b-after // a-after
好了,想到了如何将 middleware 串起来和如何将 dispatch 封装的方法后,集成到 redux 的代码里试试
单独抽一个 compose 函数用以处理一个或多个 middleware,代码如下:
const compose = (...funcs) => { if (funcs.length === 0) { return arg => arg; } if (funcs.length === 1) { return funcs[0]; } return funcs.reduce((a, b) => (...args) => a(b(...args))); };
修改 createStore 里的 dispatch 方法,让其支持当存在 middleware 的时候,dispatch 需要被重写。代码如下:
/* * createStore 状态容器 * @param reducers 容器总得需要知道是做什么样的改变 * @param initialState 初始化(预置)的 state * @param enhancer 扩展的 middlewares */ const createStore = (reducers, initialState, enhancer) => { // 参数互换 如果 initialState 是个函数,enhancer = undefined 则 enhancer 和 initialState 互换 if (typeof initialState === "function" && typeof enhancer === "undefined") { enhancer = initialState; initialState = undefined; } // 如果有 middleware 的时候,则 createStore 稍后处理,处理详情参照 applyMiddleware 函数 if (typeof enhancer !== "undefined" && typeof enhancer === "function") { // 为什么是这样写? 继续往下看 return enhancer(createStore)(reducer, initialState); } // ... // 之前的代码 };
结合 createStore,注意到前文提出的,middleware 内部支持访问和操作 state,我们需要实现 createStore 里面的 enhancer 函数,就是函数 applyMiddleware,于是给出代码:
/* * applyMiddleware 实现中间件的应用 * @param ...middlewares 插入的 state 处理流程的中间件 */ const applyMiddleware = (...middlewares) => { // 传入 middlewares return createStore => (...args) => { const store = createStore(...args); // middleware 内部能做的 state 操作 const middlewareAPI = { getState: store.getState, dispatch: (...args) => dispatch(...args) }; // 将 middleware 处理,以 middlewareAPI 作为参数执行并且取到 middleware 的内部函数 const chain = middlewares.map(middleware => middleware(middlewareAPI)); // 进行 compose 组合 // 如存在 3 个 middleware A(ABefore,AAfter) B(BBefore,BAfter) C(CBefore,CAfter) // 则执行顺序是 ABefore - BBefore - CBefore - (真实的操作) - CAfter - BAfter - AAfter dispatch = compose(...chain)(store.dispatch); return { ...store, dispatch }; }; };
核心实现的代码写完了,然后测试一下?
我们需要在 createStore 的 dispatch 里加个 "do dispatch" 的 log,方便看执行流程
const store = createStore(reducer, applyMiddleware(logger));
再写 middleware 的函数,
const logger = ({ getState }) => { return next => action => { console.log("will dispatch", action); const returnValue = next(action); console.log("state after dispatch", getState()); return returnValue; }; }; store.dispatch(RESET_ACTION); // output // will dispatch {type: "RESET", preload: {…}} // do dispatch // state after dispatch {count: 0}
好了,来回顾一下实现过程,首先有个目标:做一个可预测的状态容器;然后分析目标,挖掘关键点,依次实现。实现的过程更多在于"容器操作的规范",技术方面好像确实都是一些 js 基础知识的运用。
注意,本文仅解析 redux 的实现思路,代码与源码并不完全相同。redux 不止这些代码(但其实也没多少其余代码),还有一些断言、错误提示、开发提示、bindActionCreators 啥的操作等等...
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
书籍:Python Testing Cookbook, 2nd Edition - 2018.pdf python测试cookbook
简介 借助此基于解决方案的指南,修复Python中的日常测试问题 主要特点 使用doctest和unittest等强大的工具来方便测试 将自动化测试应用于非面向测试的现有遗留系统 使用真实示例简化Python测试的实用指南 图书说明 自动化测试是提高效率,同时减少软件测试缺陷的最佳方法。它有助于在早期阶段轻松找到代码中的错误,从而有效地解决问题。本书深入研究Python中使用的基本测试概念,以帮助您构建健壮且可维护的代码。 Python Testing Cookbook首先简要介绍了Python的单元测试框架,以帮助您编写自动化测试用例。您将学习如何为您的软件编写合适的测试集,并使用Nose运行自动化测试套件。然后,您将使用unittest.mock库,该库允许您使用模拟对象替换正在测试的系统部分,并对如何使用它们进行断言。您还将了解如何应用测试
- 下一篇
Excel 行列转换的最简方法
问题描述 在工作中时常会遇到对 Excel 表格的处理。当编辑一张 Excel 表格时,发现表格的列数太多,而行数较少,为方便打印,这时你或许会希望将该表格行列转换;或许是为了做进一步做统计分析,当前格式不太方便,这时也会用到行列转换。 下面这种交叉式的 Excel 表是很常见的格式,用来填写和查看都比较方便: 但是,如果想做进一步的统计分析,这种格式就不方便了,需要行列转换,变成如下格式的明细表: 显然,手工操作会非常麻烦,若数据量小还可以,数据量大了会耗费大量时间,简直就是灾难。 我们就以此为例,举例说明几种常见的解决方法。 解决方法方法 1:Excel 数据透视表 Excel 可以通过数据透视表支持行列转换功能,效果如下图: 显然,这并不是我们想要的格式。Excel 的数据透视表可以满足简单格式的行列转换,但如果格式稍微复杂,转换效果往往是不尽人意。 方法 2:编程语言 以写程序来解决,思路也很简单: · 加载 excel 文件,装载需要的 sheet 工作表。 · 读取“账套名”所在行,将其转换成字符串数组。 · 读取“科目编码”所在列,将其转换成字符...
相关文章
文章评论
共有0条评论来说两句吧...