通过源码理解thunk运行原理
1. 需要提前知道的知识
1)函数的柯里化(函数返回函数返回函数·····)其实是一个在连缀调用时不停收集变量和数据的过程,同时使用闭包将收集到的变量进行保存。这么做可以使函数由复杂的多入单出变成简单的单入单出的状态,同时也可以做到将参数进行复用和函数延迟执行的功能
2) redux的中间件的位置,位于数据传入redux后,redux执行反应变更(dispatch)之前,数据要穿过中间件才能真正进入并执行redux相关操作
2.thunk源码
function createThunkMiddleware(extraArgument) {
// 第一层函数,用于从redux源码中收集dispatch和getState方法
// 第二层函数,用于从redux源码中收集自动注入的next
// 第三层函数,截获外部传入的带有异步操作的函数,一直到外部函数返回的是一个符合规则的对象
return ({ dispatch, getState }) => next => action => {
// 如果进来的是函数,就会在这里被截获并反复执行该函数
// 直到这个函数最后返回的不是函数
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
// 如果外部函数的返回值是一个对象就会将值传递下去,进入下一步
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
3.redux源码中createStore的dispatch方法部分源码
function dispatch(action) {
// 这里的isPlainObject()函数是自定义的检测输入参数是否符合规则的函数
// 如果输入的不是符合规则的对象就报错
if (!isPlainObject(action)) {
throw new Error('Actions must be plain objects. ' + 'Use custom middleware for async actions.');
}
····
}
4. 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
});
};
};
}
5. 结论
知道了上面的所有之后,结论已经出来了,thunk是一个将异步操作(如数据请求等)从react组件中转移到中间件中执行的redux中间件,可以将组件的代码变得更简洁单纯(因为将复杂的异步请求数据交给了中间件执行,可以让组件专注于页面的各种操作而不必分心去考虑数据来源的事)
在注册了中间件(applyMiddleware)后,中间件就会被插入redux内部操作之前,react组件数据发送给redux之后,如果这时候外部传入(dispatch)了一个包含有异步操作的函数,不管这个函数柯里化了几次,只要返回的还是函数,都会被thunk所截获并在thunk中执行,一直到最后异步操作完成,获取并传入(dispatch)了一个符合要求的非函数数据,thunk才会放行,这时候这个异步操作所获取到的数据才会真正进入到redux中执行redux的操作(当然,redux的dispatch方法还会检测数据格式是否正确,如果不正确还是会报错的)