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相关的知识
