react中关于redux和thunk的一些知识

1.thunk源码

2.redux源码中createStore的dispatch方法一些源码


3.applyMiddleware源码

    function applyMiddleware() {

      // 将传入的中间件存入数组中

      for (var _len = arguments.length, middlewares = new Array(_len), _key = 0; _key < _len; _key++) {

        middlewares[_key] = arguments[_key];

      }


      return function (createStore) {

        return function () {

          var store = createStore.apply(void 0, arguments);


          var _dispatch = function dispatch() {

            throw new Error('Dispatching while constructing your middleware is not allowed. ' + 'Other middleware would not be applied to this dispatch.');

          };


          var middlewareAPI = {

            getState: store.getState,

            dispatch: function dispatch() {

              return _dispatch.apply(void 0, arguments);

            }

          };

          var chain = middlewares.map(function (middleware) {

            return middleware(middlewareAPI);

          });

          _dispatch = compose.apply(void 0, chain)(store.dispatch);

          return _objectSpread2({}, store, {

            dispatch: _dispatch

          });

        };

      };

    }

4. 结论

知道了上面的所有之后,结论已经出来了,thunk是一个将异步操作(如数据请求等)从react组件中转移到中间件中执行的redux中间件,可以将组件的代码变得更简洁单纯(因为将复杂的异步请求数据交给了中间件执行,可以让组件专注于页面的各种操作而不必分心去考虑数据来源的事)

在注册了中间件(applyMiddleware)后,这时候外部传入(dispatch)了一个包含有异步操作的函数,都会被thunk所截获并在thunk中执行,一直到最后异步操作完成,如果外部传入(dispatch)不是一个非异步操作的函数,thunk会放行.

这也是我在文档中看的一些知识,分享出来给大家一起看,一起学习react相关的知识

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容