Redux 中间件的执行顺序理解

Posted Hello World

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Redux 中间件的执行顺序理解相关的知识，希望对你有一定的参考价值。

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 中间件的执行顺序理解的主要内容，如果未能解决你的问题，请参考以下文章

无法理解 Redux-thunk 中间件

再探Redux Middleware

学习 redux 源码整体架构，深入理解 redux 及其中间件原理

redux-sage 简单理解

react native和redux的以下代码是啥意思

Redux:中间件