5.3.1.1 redux-thunk代码片段解读

《深入React技术栈》5.3.1.1

1.原文

 “Thunk函数中间件实现上就是针对多参数的柯里化(Currying)以实现对函数的惰性求值”（P218 line11）

function createThunkMiddleware(extraArgument){
    return({ dispatch, getState }) => next => action => {
        if (typeof action === 'function') {
            return action(dispatch, getState, extraArgument);
        }

        return next(action);
    };
}                                                                       //P218 

 2.ES5闭包

改写示例1

function createThunkMiddleware(extraArgument){
    return function({ dispatch, getState }) { 
        return function(next) { 
            return function(action) {
                if (typeof action === 'function') {
                    return action(dispatch, getState, extraArgument);
                }

                return next(action);
            };
        };
    };
}

 改写示例2

function createThunkMiddleware(extraArgument){
    var outerFunc = function({ dispatch, getState }) { 
        var middleFunc = function(next) { 
            var innerFunc = function(action) {
                if (typeof action === 'function') {
                    return action(dispatch, getState, extraArgument);
                }

                return next(action);
            };

            return innerFunc;
        };

         return middleFunc;
    };

    return outerFunc;
}

2.分析

 传名调用 ({ dispatch, getState }) => next => action => {...}

  (1) ({ dispatch, getState }) 参数直接传入箭头函数函数体 next => action => {...} 

  (2) next 参数传入 action => {...} ,此时 ({ dispatch, getState }) 参数相关逻辑 return action(dispatch, getState, extraArgument); 并未求值

  (3)  action 参数传入  {...} 时参数 ({ dispatch, getState }) 

传名调用时并未进行表达式运算，若为 a => b => c => {...} 写法，参数顺序可互换

3.原理

 闭包

柯里化

参考链接

[ES6高阶箭头函数改写ES5闭包](https://segmentfault.com/a/1190000017335156)