Redux 中间件的执行顺序理解

最新推荐文章于 2022-06-09 22:36:42 发布

weixin_33813128

最新推荐文章于 2022-06-09 22:36:42 发布

阅读量475

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhengming2016/p/6985354.html

版权

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>

转载于:https://www.cnblogs.com/zhengming2016/p/6985354.html

weixin_33813128

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Redux 中间件的执行顺序理解

Redux.applyMiddleware(thunk, middleware1) 和Redux.applyMiddleware(middleware1, thunk) 的区别:<!DOCTYPE HTML><html> <head> <meta http-equiv="content-type" conte...
复制链接

扫一扫