Redux.applyMiddleware(thunk, middleware1) 和 Redux.applyMiddleware(middleware1, thunk) 的区别:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Redux</title>
<script type="text/javascript" src='js/redux.js'></script>
</head>
<body>
<script type="text/javascript">
function reducer(state, action) {
// 首次调用本函数时设置初始 state
state = state || { counter: 0 }; switch (action.type) {
case 'INCREMENT':
console.log('reducer');
return { counter: state.counter + 1 };
case 'DECREMENT':
return { counter: state.counter - 1 };
default:
return state; // 无论如何都返回一个 state
}
} var thunk = (middleApi) => (next) => (action) => {
if(typeof action == 'function'){
console.log(1);
return action(middleApi.dispatch, middleApi.getState);
} console.log(2);
return next(action);
} function middleware1(store) {
return function(next) {
return function(action) {
console.log('middleware1 开始');
next(action);
console.log('middleware1 结束');
};
};
} var inc = () => {
return {type: 'INCREMENT'}
} var incAsy = () => (dispatch) => {
console.log('等待2秒');
setTimeout( ()=>{
dispatch( inc() );
}, 2000);
} function incAsy2(){
return (dispatch, getState)=>{
console.log('等待1秒');
setTimeout( ()=>{
dispatch( incAsy() );
console.log('incAsy2 ');
} ,1000);
}
} /*
Redux.applyMiddleware(thunk, middleware1)
log 如下:
1
等待1秒
1
等待2秒
incAsy2
2
middleware1 开始
reducer
middleware2 开始
*/ /*
Redux.applyMiddleware(middleware1, thunk)
log 如下:
middleware1 开始
1
等待1秒
middleware1 结束 //注意这里触发 dispatch, 又从 middleware1 里面进去了
middleware1 开始
1
等待2秒
middleware1 结束
incAsy2 middleware1 开始
2
reducer
middleware1 结束
*/ var store = Redux.applyMiddleware(thunk, middleware1)(Redux.createStore)(reducer);
store.dispatch( incAsy2() ); </script>
</body>
</html>

Redux 中间件的执行顺序理解的更多相关文章

  1. Django多个中间件的执行顺序

    Django中的中间件是一个轻量级.底层的插件系统,可以介入Django的请求和响应处理过程,修改Django的输入或输出.中间件的设计为开发者提供了一种无侵入式的开发方式,增强了Django框架的健 ...

  2. Koa 中间件的执行顺序

    中间件工作原理 初始化koa实例后,我们会用use方法来加载中间件(middleware),会有一个数组来存储中间件,use调用顺序会决定中间件的执行顺序. 每个中间件都是一个函数(不是函数将报错), ...

  3. koa 基础(八)koa 中间件的执行顺序

    1.koa 中间件的执行顺序 app.js /** * koa 中间件的执行顺序 */ // 引入模块 const Koa = require('koa'); const router = requi ...

  4. JavaScript在页面中的执行顺序(理解声明式函数与赋值式函数) 转载

    JavaScript在页面中的执行顺序 https://blog.csdn.net/superhoy/article/details/52946277 2016年10月27日 15:38:52 阅读数 ...

  5. redux中间件来执行异步操作

    在redux中我们都是执行同步操作,如果我们想要执行异步操作,那么我们就需要依赖到中间件,具体的中间件的概念我就不描述了相信官方文档更详尽.现在就描述下具体的用法,就已我们项目中用到的最多的数据请求为 ...

  6. Struts2拦截器Interceptor执行顺序理解

    invocation.invoke()方法是拦截器框架的实现核心,通过确定invocation.invoke()方法执行位置,来实现Action执行前后处理操作,在invocation.invoke( ...

  7. Django中间件执行顺序

    中间件 Django中的中间件是一个轻量级.底层的插件系统,可以介入Django的请求和响应处理过程,修改Django的输入或输出.中间件的设计为开发者提供了一种无侵入式的开发方式,增强了Django ...

  8. laravel构造函数和中间件执行顺序问题

    今天想重构下代码结构: BaseController.php 放置公共的中间件 class BaseController { public function __construct(){ $this- ...

  9. Redux:中间件

    redux中间件概念 比较容易理解. 在使用redux时,改变store state的一个固定套路是调用store.dispatch(action)方法,将action送到reducer中. 所谓中间 ...

随机推荐

  1. 【NOIP】2013 花匠

    [算法]贪心 [题解] DP可以f[i][0],f[i][1]表示选了i分别满足条件AB的答案,其优化也是利用了下面的性质,不多赘述. 想象数列的波动,最大值一定是取每个波峰和每个波谷,那么只要O(n ...

  2. 20155335俞昆《java程序设计》第三周总结

    20155335  2006-2007-2  <Java程序设计>第三周学习总结 ##  教材学习内容总结 首先,关键是区基本类型和类类型,,产生对象必须定义类,类是一个概念,并不存在,对 ...

  3. TOJ 1005 Hero In Maze (深搜)

    描述 500年前,Jesse是我国最卓越的剑客.他英俊潇洒,而且机智过人^_^. 突然有一天,Jesse心爱的公主被魔王困在了一个巨大的迷宫中.Jesse听说这个消息已经是两天以后了,他知道公主在迷宫 ...

  4. 高精度模板_C++

    高精度压位,压9位 read:读入 write:输出 copy:赋值 change:交换 empty:清0 cmp:比较大小,相当于小于号 plus:加法 dec:减法 multy:乘法 除法实在不会 ...

  5. HashMap 、LinkedHashMap、HashTable、TreeMap 和 Properties 的区别

    HashMap 1.线程不安全: 2.允许null value 和 null key: 3.访问效率比较高: 4.Java1.2引进的Map接口的一个实现: 5.轻量级: 6.根据键的HashCode ...

  6. linux网络编程之IO模型

    本文转自作者:huangguisu 1. 概念理解 在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式:同步:      所谓 ...

  7. leetcode 之Reverse Nodes in k-Group(22)

    这题有点繁琐,在更新指针时很容易出错. ListNode *reverseKGroup(ListNode *head, int k) { )return head; ListNode dummy(-) ...

  8. 算法入门系列1:k-means

    k-means是一种无监督学习算法,用于聚类. 下图(来自http://www.cnblogs.com/jerrylead/archive/2011/04/06/2006910.html)展示了k-m ...

  9. LeetCode解题报告—— Container With Most Water & 3Sum Closest & Letter Combinations of a Phone Number

    1.  Container With Most Water Given n non-negative integers a1, a2, ..., an, where each represents a ...

  10. [vim]使用中问题

    bug1: vim文档中文注释为乱码 step1: vim /var/lib/locales/supported.d/local 在其中添加下面的中文字符集 zh_CN.GBK GBK zh_CN.G ...