122thunk源码解析

function thunkMiddleware(twoParameters) {//一、(1)在项目初始化阶段，通过applyMiddleware，将getState和改造后的dispatch传入thunk函数并执行
    var afterDispatch = twoParameters.afterDispatch;
    var getState = twoParameters.getState;
    return function (beforeDispatch) {//(2)得到返回值函数functionA，将改造前的dispatch传入functionA函数并执行
        return function (action) {//(3)得到返回值函数functionB。二、(4)在项目进行阶段，给functionB传参，并将执行结果传到改造前的dispatch
            if (typeof action === 'function') {//(4)如果functionB的实参是函数
                return action(afterDispatch, getState);//(5)则把getState和改造后的dispatch传入到这个函数并执行
            }
            return beforeDispatch(action);//(6)如果functionB的实参不是函数，则把实参传入改造前的dispatch并执行。 
        };
    };
}

//1、createStore执行
createStore(
    rootReducer,
    preloadedState,
    compose(
        applyMiddleware(thunkMiddleware),
        DevTools.instrument()
    )/*这是增强函数*/
);
//2、compose定义
function compose() {
    for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++) {
        funcs[_key] = arguments[_key];
    }
    return funcs.reduce(function (a, b) { /*a为compose的第1个参数，b为compose的第2个参数，*/
        return function () {/*返回值为增强函数*/
            return a(b.apply(undefined, arguments));
        };
    });
}
//3、compose执行
var arrayFunction = [functionA, functionB, functionC, functionD];
function compose(arrayFunction) {
    return arrayFunction.reduce(function (a, b) {
        return function () {
            return a(b.apply(undefined, arguments));
        };
    })
}
compose(arrayFunction)(functionLast);//第二层参数传入第一层参数的倒数第一个函数执行，将结果传入倒数第二个函数执行，再将结果传入倒数第三个函数执行......
//第一次循环后的结果为
function functionOne() {
    return functionA(functionB.apply(undefined, arguments));
}
//第二次循环后的结果为
function functionTwo() {
    return functionOne(functionC.apply(undefined, arguments));
}
//第三次循环后的结果为
function functionThree() {
    return functionTwo(functionD.apply(undefined, arguments));
}
//给第三次循环后的结果传参并执行functionThree(functionLast)。

ReactDOM.render(
    <Provider store={store}>
        <div>
            <Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory} children={routes}></Router>
        </div>
    </Provider>,
    document.getElementById('app')
)

　　

转载于:https://www.cnblogs.com/gushixianqiancheng/p/11118774.html