zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    软件项目开发典型风险一览
    删除数据库所有表数据
    今天愚人节,教大家一个真正的最强整人方法
    潘正磊谈微软研发团队管理之道(下)
    追MM与23种设计模式
    22个所见即所得在线 Web 编辑器
    神奇的js代码,图片全都飞起来了
    字体 小 中 大
    使用ODP.NET连接Oracle数据库一个OracleCommand运行多条SQL语句的方法
    删除SQL数据库中所有的表
  • 原文地址:https://www.cnblogs.com/zhengming2016/p/6918632.html
Copyright © 2011-2022 走看看