理解 Redux 的中间件
将该思想抽象出来,其实和 Redux 就无关了。问题变成,怎样实现在截获函数的执行,以在其执行前后添加自己的逻辑。 为了演示,我们准备如下的示例代码来模拟 Redux dispatch action 的场景: const store = { 我们最终需要实现的效果是 Redux 中 以打日志为例,我们想在调用 dispatch 时进行日志输出。 尝试1 - 手动直接的做法就是手动进行。 console.log("before dispatch `FOO`"); 但其实这并不算一个系统的解决方案,至少需要摆脱手动这种方式。 尝试2 - 包装既然所有 dispatch 操作都会打日志,完全有理由抽取一个方法,将 dispatch 进行包装,在这个方法里来做这些事情。 function dispatchWithLog(action) { 但调用的地方也得变,不能直接使用原始的 - store.dispatch({ type: "FOO" }); 尝试3 - 替换实现/Monkeypatching如果我们直接替换掉原始函数的实现,便可以做到调用的地方不受影响而实现新增的 log 功能,虽然修改别人提供的方法容易引起 bug 且不太科学。 const original = store.dispatch; 尝试4 - 多个函数的截获除了添加 log,如果还想对每次 dispatch 进行错误监控,只需要拿到前面已经替换过实现的 dispatch 方法再次进行替换包装即可。 const original = store.dispatch; 所以针对单个功能的中间件,我们可以提取出其大概的样子来了: function middleware(store) { 改写日志和错误监控为如下: function log(store) { 然后按需要应用上述中间件即可: log(store); 上面中间件的调用可专门编写一个方法来做: function applyMiddlewares(store, middlewares) { 隐藏 Monkeypatching真实场景下,各中间件由三方编写,如果每个中间件都直接去篡改 所以中间件的模式更新成如下: function middleware(store) { 改写 function log(store) { 更新 function applyMiddlewares(store, middlewares) { 最后,应用中间件: applyMiddlewares(store, [log, report]); 进一步优化之所以在应用中间件过程中每次都重新给 如果中间件中不是直接从 function applyMiddlewares(store, middlewares) { 忽略掉实际源码中的一些差异,以上,大致就是 Redux 中间件的创建和应用了。 测试function m1(next) { 输出结果: 3 start 相关资源 |
理解 Redux 的中间件的更多相关文章
- Redux的中间件Middleware不难,我信了^_^
Redux的action和reducer已经足够复杂了,现在还需要理解Redux的中间件.为什么Redux的存在有何意义?为什么Redux的中间件有这么多层的函数返回?Redux的中间件究竟是如何工作 ...
- 理解 Redux 中间件机制
Redux 的 action 是一个 JS 对象,它表明了如何对 store 进行修改.但是 Redux 的中间件机制使action creator 不光可以返回 action 对象,也可以返回 ac ...
- Redux的中间件原理分析
redux的中间件对于使用过redux的各位都不会感到陌生,通过应用上我们需要的所有要应用在redux流程上的中间件,我们可以加强dispatch的功能.最近也有一些初学者同时和实习生在询问中间件有关 ...
- 理解Redux以及如何在项目中的使用
今天我们来聊聊Redux,这篇文章是一个进阶的文章,建议大家先对redux的基础有一定的了解,在这里给大家推荐一下阮一峰老师的文章: http://www.ruanyifeng.com/blog/20 ...
- 轻松理解Redux原理及工作流程
轻松理解Redux原理及工作流程 Redux由Dan Abramov在2015年创建的科技术语.是受2014年Facebook的Flux架构以及函数式编程语言Elm启发.很快,Redux因其简单易学体 ...
- 17. react redux的中间件
1. redux 数据流程图 View 会派发一个 Action Action 通过 Dispatch 方法派发给 Store Store 接收到 Action 连同之前的 State 发给 Red ...
- 3.3 理解 Redux 中间件(转)
这一小节会讲解 redux 中间件的原理,为下一节讲解 redux 异步 action 做铺垫,主要内容为: Redux 中间件是什么 使用 Redux 中间件 logger 中间件结构分析 appl ...
- redux进阶 --- 中间件和异步操作
你为什么需要异步操作? https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in ...
- 【React】360- 完全理解 redux(从零实现一个 redux)
点击上方"前端自习课"关注,学习起来~ 前言 记得开始接触 react 技术栈的时候,最难理解的地方就是 redux.全是新名词:reducer.store.dispatch.mi ...
随机推荐
- [python]创建文本文件,并读取
代码如下: # coding=gbk import os fname = raw_input("Please input the file name: ") print if os ...
- HDU 6634 网络流最小割模型 启发式合并
如果我们先手拿完所有苹果再去考虑花费的话. S -> 摄像头 -> 苹果 -> T 就相当于找到一个最小割使得S和T分开. ans = sum - flow. 然后对于这一个模型, ...
- CodeForces 590C Three States BFS
Three Statesy 题解: 以3个大陆为起点,都dfs一遍,求出该大陆到其他点的最小距离是多少, 然后枚举每个点作为3个大陆的路径交点. 代码: #include<bits/stdc++ ...
- codeforces 626 G. Raffles(线段树+思维+贪心)
题目链接:http://codeforces.com/contest/626/problem/G 题解:这题很明显买彩票肯定要买贡献最大的也就是说买p[i]*(num[i]+1)/(num[i]+a[ ...
- hdu 1176免费馅饼(记忆化搜索)
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1176 题意不解释了 简单的记忆化搜索可以拿来练练手,注意要从pos = 5 开始搜索 #include ...
- CF1009B Minimum Ternary String 思维
Minimum Ternary String time limit per test 1 second memory limit per test 256 megabytes input standa ...
- POJ 3268 Silver Cow Party 单向最短路
Silver Cow Party Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 22864 Accepted: 1044 ...
- NOIP 2016 组合数问题 题解
一道sb题目,注意范围,可打表解决,打出杨辉三角,在用前缀和求解即可 代码(一维前缀和) #include<bits/stdc++.h> using namespace std; int ...
- Flask大型项目框架结构理解
导语:前段时间学习狗书的flask大型项目框架结构的时候有点混乱,到现在也知道是个啥了,想着,把关系理一理,写一篇博客.也方便后来学习的人查阅.以下是我创建项目时候的结构. myproject --- ...
- 【LeetCode】17-电话号码的字母组合
题目描述 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合. 给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任何字母. 示例: 输入:"23" 输出: ...