浅析redux

一 redux 思想

　　首先，每一个webApp有且只有一个state tree，为方便管理和跟踪state的变化，也为了减少混乱，redux只允许通过发送（dispatch）action的方式来改变state。旧state在action的作用下产生新state，这个过程叫做reduce，具体逻辑由用户自定义，称为reducer函数。

　　另外，redux允许在dispatch action与action到达reducer之间拦截action，做更多的动作，即中间件（middleware），这就像插件机制一样，允许多样的扩展，其中一类重要中间件的功能就是处理异步（与服务端通信）。

二、redux使用

　　redux用起来是这样的：用户先写好处理state各个子部分的多个reducers，通过redux提供的combineReducers函数合并成一个rootReducer；然后选好需要的中间件；reducer和中间件作为参数，通过createStore函数创建Store对象。Store是redux运用起来的核心对象，通过store可以获取state--store.getState(), dispatch action以及订阅state变化store.subscribe()。

const rootReducer = combineReducers(reducers);
const store = createStore(rootReducer, applyMiddleware(...middlewares))

const state0 = store.getState();

const action0 = actionCreator('do something');
store.dispatch(action0);

const unSubscribeHandler = store.subscribe(callback);

三、redux代码解析

　　参考文章（2）以及源代码（3），实现redux核心逻辑的代码如下（自己掰的）：

const createStore = (reducer, enhancer) => {
    if (typeof enhancer === 'function') {
        return enhancer(createStore)(reducer);
    }

    let currentState = undefined;
    let currentReducer = reducer;
    let subscribers = [];

    function dispatch(action) {
        if (typeof currentReducer === 'function') {
            currentState = currentReducer(currentState, action);
            subscribers.forEach(sfn => sfn());
        }
        return action;
    }

    function getState() {
        return currentState;
    }

    function unSubscribe(fn) {
        subscribers = subscribers.filter(sfn => sfn === fn);
    }

    function subscribe(fn) {
        if (typeof fn !== 'function') {
            throw new Error('subscriber must be a function!');
        }
        const oldFn = subscribers.find(fnx => fnx === fn);
        if (!oldFn) {
            subscribers.push(fn);
        }
        return () => unSubscribe(fn);
    }

    dispatch({ type: 'init' });
    return { dispatch, getState, subscribe };
};

// combine multiple reducers into one.
//  const rootReducer = combineReducers(reducerX, reducerY, reducerZ);
//  const store = createStore(rootReducer);
const combineReducers = reducers => (state = {}, action) => {
    const currentState = state;
    reducers.forEach((reducer) => {
        const partialStateName = reducer.name;
        currentState[partialStateName] = reducer(currentState[partialStateName], action);
    });
    return currentState;
};

// const actionA = ActionCreators.doA('xxx');
// dispatch(actionA);
// const actionB = ActionCreators.doB('yyy');
// dispatch(actionB);
// -->
// const Action = bindActionCreators(ActionCreators, dispatch);
// Action.doA('xxx');
// Action.doB('yyy');
const bindActionCreators = (actions, dispatch) => {
    const newActions = {};
    for (const key of Object.getOwnPropertyNames(actions)) {
        newActions[key] = args => dispatch(actions[key](args));
    }
    return newActions;
};

// funcs = [fa, fb, fc]
// compose(...funcs)(...args) <=> fa(fb(fc(...args)))
const compose = (...funcs) => {
    return funcs.reduce((a, b) => (...args) => a(b(...args)));
};

// 返回一个enhancer: enhancer(createStore)(reducer)
const applyMiddleware = (...middlewares) => {
    return createStore => reducer => {
        const store = createStore(reducer);
        let dispatch = store.dispatch;
        //包装dispatch
        const middlewareAPI = {
            getState: store.getState,
            dispatch: action => dispatch(action)
        };
        const chain = middlewares.map(middleware => middleware(middlewareAPI));
        const enhancedDispatch = compose(...chain)(dispatch);
        return { ...store, dispatch: enhancedDispatch };
    };
};

const logger = ({ getState, dispatch }) => next => action => {
    console.log('logger: before action dispatch: ', getState());
    console.log('logger: action: ', action);
    const result = next(action);
    console.log('logger: after action dispatch: ', getState());
    return result;
};

const logger1 = ({ getState, dispatch }) => next => action => {
    console.log('logger1: before action dispatch: ', getState());
    console.log('logger1: action: ', action);
    const result = next(action);
    console.log('logger1: after action dispatch: ', getState());
    return result;
};

 　　主要实现这几个函数：

　　createStore(reducer, enhancer);  以及store.dispatch()  store.getState()

　　combineReducers(reducers);

　　applyMiddleware(...middlewares); 以及 compose(...funcs);

　　(1) createStore(reducer, enhancer)

　　关注enhancer这个参数，enhancer是中间件经过applyMiddleware之后的函数，其实是参数版的装饰器。

enhancer作用在createStore函数上，就是在原来的创建store之外还做了些事情，具体就是改造了store的dispatch函数，加入了中间件。

参考以下代码：比较装饰器decorator直接作为装饰器使用以及作为参数的装饰器。

function funcA(x, enhancer) {
    if (typeof enhancer === 'function') {
        return enhancer(funcA)(x);
    }

    console.log('in funcA');
    return 2 * x;
}

const decorator = (fn) => (x) => {
    console.log('before');
    let result = fn(x);
    console.log('after');
    return result * 10;
};


// commonly used decorator
console.log(decorator(funcA)(5));
console.log('===========');
// decorator as argument
console.log(funcA(5, decorator));

　　（2）compose(...funcs)

　　这个函数的作用是把多个函数（funcs）连成一个函数，其效果等同于逆序地逐个把函数作用于参数上：

　　　　compose(fa, fb, fc)(x)   等价于    fa(fb(fc(x)))

这里的技巧是使用reduce函数：通常的reduce是数据与数据之间reduce，这里用在了函数与函数之间，

注意reduce里面的函数的返回值也是函数，体味一下。

const compose = (...funcs) => {
    return funcs.reduce((a, b) => (...args) => a(b(...args)));
};

 　　（3）applyMiddleware(...middlewares)

　　applyMiddleware(...middlewares)的结果是产生createStore函数的装饰器enhancer。

具体的实现是先创建原生的store，然后增强dispatch函数。

const applyMiddleware = (...middlewares) => {
    return createStore => reducer => {
        const store = createStore(reducer);
        let dispatch = store.dispatch;
        //包装dispatch
        const middlewareAPI = {
            getState: store.getState,
            dispatch: action => dispatch(action)
        };
        const chain = middlewares.map(middleware => middleware(middlewareAPI));
        const enhancedDispatch = compose(...chain)(dispatch);
        return { ...store, dispatch: enhancedDispatch };
    };
};

中间件的实际形式是生成器（creator），它接收一个包含dispatch和getState方法的对象，

返回next函数的装饰器（decorator）:

　　someMiddleware = ({ getState, dispatch }) => next => action => {};

这里面的next，就是下一个next函数的装饰器，前一层装饰后一层，层层装饰直到最后一个next，就是原生的dispatch函数本身了。具体例子参考代码中的logger中间件。

　　上面代码中chain中的元素就都是装饰器了，然后经过compose，再作用到dispatch上就产生了增强版的dispatch，

用这个enhancedDispatch替换原生store中的dispatch就大功告成了。

 　　尾声

　　为了验证上述逻辑理解的是否正确，加几个middleware玩玩。

const interceptor = ({ getState, dispatch }) => next => action => {
    if (action.type === 'DECREMENT') {
        console.log(`action: ${action.type} intercepted!`);
        return null;
    } else {
        return next(action);
    }
};

const actionModifier = ({ getState, dispatch }) => next => action => {
    if (action.type === 'DECREMENT') {
        console.log(`action: ${action.type} got and modified to type = INCREMENT!`);
        action.type = 'INCREMENT';
    }
    return next(action);
};

const useNativeDispatch = ({ getState, dispatch }) => next => action => {
    if (action.type === 'DECREMENT') {
        console.log('shortcut to native dispatch!');
        return dispatch(action);
    } else {
        return next(action);
    }
};

　　interceptor 会拦截特定类型的action，然后不再向后传播，结果就是之前的中间件还能执行，后面的中间件就不执行了；

　　actionModifier 会修改特定类型action的数据，再向后传播，所以前后中间件会看到不同的action；

　　useNativeDispatch 在遇到特定类型的action时，会跳过后面所有中间件，直接调用原生dispatch。

完毕！

参考文章：

（1）redux官方basic&advanced tutorial

（2）一起学习造轮子（二）：从零开始写一个Redux

（3）redux github