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. bzoj 1197 DP

    我们可以将这个问题转化为在n维空间中一共放m个n维球,求这m个球最多将这个空间分为不同的几个部分. 那么我们设w[i][j]代表i为空间放j个球分为的部分,那么w[i][j]=w[i][j-1]+w[ ...

  2. Spark-2.3.2【SparkStreaming+SparkSQL-实时仪表盘应用】

    应用场景:实时仪表盘(即大屏),每个集团下有多个mall,每个mall下包含多家shop,需实时计算集团下各mall及其shop的实时销售分析(区域.业态.店铺TOP.总销售额等指标)并提供可视化展现 ...

  3. CreateProcess中的部分参数理解

    函数原型,这里写Unicode版本 WINBASEAPIBOOLWINAPICreateProcessW( _In_opt_ LPCWSTR lpApplicationName, //可执行文件名字 ...

  4. 【EverydaySport】健身笔记——人体肌肉分解图

    正面 背面 大肌肉群:胸.背.腿大肌肉群. 建议一周锻炼一次. 小肌肉群:肩.二头肌.三头肌.小臂.小腿.腹肌小肌肉群. 可以一周安排两次. 小腿.小臂肌群属于耐受肌群可以一周安排3次. 建议初学者就 ...

  5. [Leetcode Week14]Construct Binary Tree from Inorder and Postorder Traversal

    Construct Binary Tree from Inorder and Postorder Traversal 题解 原创文章,拒绝转载 题目来源:https://leetcode.com/pr ...

  6. thread_info&内核栈

    转载:http://blog.chinaunix.net/uid-22548820-id-2125152.html 之所以将thread_info结构称之为小型的进程描述符,是因为在这个结构中并没有直 ...

  7. linux 自旋锁和信号量【转】

    转自:http://blog.csdn.net/xu_guo/article/details/6072823 版权声明:本文为博主原创文章,未经博主允许不得转载. 自旋锁最多只能被一个可执行线程持有( ...

  8. selenium===requestium模块介绍

    有时,你可能会在网上实现一些自动化操作.比如抓取网站,进行应用测试,或在网上填表,但又不想使用API,这时自动化就变得很必要.Python提供了非常优秀的Requests库可以辅助进行这些操作.可惜, ...

  9. 110.Balanced Binary Tree---《剑指offer》面试39

    题目链接 题目大意:判断一个二叉树是否是平衡二叉树. 法一:dfs.利用求解二叉树的高度延伸,先计算左子树的高度,再计算右子树的高度,然后两者进行比较.o(nlgn).代码如下(耗时4ms): pub ...

  10. 使用XShell通过SSH访问Google谷歌云服务器方法

    1:先用Xshell创建个密钥 下一步到这里,这个名称要记得,谷歌后台要用的. 把这里的公钥复制出来,当然最好也可以备份下. 2:到谷歌后台去添加ssh,然后就能连接了. 复制刚才生成的公钥,在谷歌云 ...