Redux 洋葱模型理解
下面的代码会输出:
A middleware1 开始
C middleware2 开始
E middleware3 开始
======= G =======
F middleware3 结束
D middleware2 结束
B middleware1 结束
首先 middleware1, middleware2, middleware3 都先串联对象 middlewareAPI,
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
middlewares.map(middleware => middleware(middlewareAPI));
然后内部是这样执行的 A1( A2( A3(store.dispatch) ) )( actionCreate() ),
A3的next 是store.dispatch, A2的next 是A3最里层的函数, A1的next 是A2里最里层的函数。
var A1 = function(next) {
return function(action) {
console.log('A middleware1 开始');
next(action)
console.log('B middleware1 结束');
};
};
var A2 = function(next) {
return function(action) {
console.log('C middleware2 开始');
next(action)
console.log('D middleware2 结束');
};
};
var A3 = function(next) {
return function(action) {
console.log('E middleware3 开始');
next(action)
console.log('F middleware3 结束');
};
};
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.bootcss.com/redux/3.5.2/redux.min.js"></script>
</head>
<body>
<script>
function middleware1(store) {
return function(next) {
return function(action) {
console.log('A middleware1 开始');
next(action)
console.log('B middleware1 结束');
};
};
} function middleware2(store) {
return function(next) {
return function(action) {
console.log('C middleware2 开始');
next(action)
console.log('D middleware2 结束');
};
};
} function middleware3(store) {
return function(next) {
return function(action) {
console.log('E middleware3 开始');
next(action)
console.log('F middleware3 结束');
};
};
} function reducer(state, action) {
if (action.type === 'MIDDLEWARE_TEST') {
console.log('======= G =======');
}
return {};
} var store = Redux.createStore(
reducer,
Redux.applyMiddleware(
middleware1,
middleware2,
middleware3
)
); store.dispatch({ type: 'MIDDLEWARE_TEST' });
</script>
</body>
</html>
Redux 洋葱模型理解的更多相关文章
- caffe_手写数字识别Lenet模型理解
这两天看了Lenet的模型理解,很简单的手写数字CNN网络,90年代美国用它来识别钞票,准确率还是很高的,所以它也是一个很经典的模型.而且学习这个模型也有助于我们理解更大的网络比如Imagenet等等 ...
- border，padding，margin盒模型理解
安静的敲着键盘,已势不可挡的姿势逼近php,我想我是一个幸福的人,未来不可期,做好现在,偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识. 本文盒模型理解. <!DOCTYPE htm ...
- 全栈项目|小书架|服务器开发-Koa2中间件机制洋葱模型了解一下
KOA2 是什么? Koa是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小.更富有表现力.更健壮的基石. 通过利用 asyn ...
- express 洋葱模型 路由管理 中间件
express 路由管理,通过 app.express(); app.METHOD(path,fn(req, res)的方式进行路由的配置.实现了请求的接口的路由的拆分.那么可以将路由配置,分发到不 ...
- Koa 洋葱模型
Koa 洋葱模型 let context = { data: [] }; async function middleware1(ctx, next) { console.log('action 001 ...
- redux middleware 的理解
前言 这几天看了redux middleware的运用与实现原理,写了一个百度搜索的demo,实现了类似redux-thunk和redux-logger中间件的功能. 项目地址:https://git ...
- css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
- css总结7：盒子模型理解
1 盒子模型 1.1盒子模型的盒子: 以博客园页面为例: 1.2盒子内部构造:边框(border).内容(content).填充(padding).边界(margin)---CSS盒子模式都具 ...
- HAN模型理解2
Hierarchical Attention Networks for Document Classification 论文的理解 在论文的摘要中,它提出了论文的两个特点.第一个就是对应文章所有具有的 ...
随机推荐
- Oracle数据库，忽略大小写Like模糊查询(SQL Server,MySql原理相同)
背景 在使用Oracle或者其它数据库时,使用like 关键字进行模糊查询是大家经常使用的功能,在纯中文环境中使用非常好用,还有一些通配符可以使用,但是在纯英文环境中,会出现大小需要精确匹配的问题,主 ...
- hdu 2157 How many ways?? ——矩阵十题第八题
Problem Description 春天到了, HDU校园里开满了花, 姹紫嫣红, 非常美丽. 葱头是个爱花的人, 看着校花校草竞相开放, 漫步校园, 心情也变得舒畅. 为了多看看这迷人的校园, ...
- 【BZOJ】1486 [HNOI2009]最小圈
[算法]二分+spfa [题解]据说这个叫分数规划? 0-1分数规划 二分答案a,则对于任意的环有w/k≤a即w-ak≤0,若满足条件则a变小,否则a变大. 因为w=w1+w2+...+wk,所以变形 ...
- Tensorflow 2.0.0-alpha 安装 Linux系统
1.TensorFlow2.0的安装测试 Linux Tensorflow Dev Summit 正式宣布 Tensorflow 2.0 进入 Alpha 阶段. 基于 Anaconda 创建环境一个 ...
- js_同步和异步
刚开始写js那会,对这一块是知之甚少,太多太多的知识不足,致使做什么都很艰难.现在工作也有段时间了,知识也有了点积累, 写点什么分享一下. 同步和异步?这个问题是在使用ajax请求后台数据的时候出现的 ...
- 【Linux学习】nohup后台运行程序以及输出重定向
Linux有两种命令使程序后台运行 第一种:支持后台运行,但是关闭终端的话,程序也会停止 command & 第二种:支持后台运行,关闭终端后,程序也会继续运行 nohup command & ...
- python基础===PEP网站，代码规范指南
PEP 8是最古老的PEP之一,它向Python程序员提供了代码格式设置指南.PEP 8的篇幅很长,但大都与复杂的编码结构相关. https://python.org/dev/peps/pep-000 ...
- centos_7.1.1503_src_5
http://vault.centos.org/7.1.1503/os/Source/SPackages/ minicom-2.6.2-5.el7.src.rpm 05-Jul-2014 13:50 ...
- 读取BMP图像size的时候与操作和左移的原因
在读取一个bmp图像的时候,我们会将它的大小读取出来,如果还不清楚bmp的文件结构,那就先看一下这篇博客. 看完我将假设你已经明白所表示的意义.那么,对于bfSize, 它的表示数字为 50 00 0 ...
- C后端设计开发 - 第5章-内功-数据结构下卷
正文 第5章-内功-数据结构下卷 后记 如果有错误, 欢迎指正. 有好的补充, 和疑问欢迎交流, 一块提高. 在此谢谢大家了.