redux的原理及简单实现

1、redux

抛开react，如果只是仅仅使用redux，就像如下示例：

const initialState = {
    name: 'Jack',
    age: 27,
    gender: 'boy'
};

function reducer(state = initialState, action) {
    switch(action.type) {
        case 'add':
            return { ...state, age: state.age + 1 };
        default:
            return state;
    }
}
const store = createStore(reducer);
store.subscribe(function() {
    console.log(store.getState());
});
store.dispatch({ type: 'add' });

这里其实就是一个createStore函数，返回了dispatch、subscribe、getState这三个方法，如下就是redux的简单实现：

function createStore(reducer, enhancer) {
    // createStore(reducer, applyMiddleware(thunk));
    if (enhancer) {
        return enhancer(createStore)(reducer);
    }
    let state;
    let listeners = [];
    function subscribe(fn) {
        fn && listeners.push(fn);
    }
    function dispatch(action) {
        state = reducer(state, action);
        listeners.forEach(lis => lis());
        return action;
    }
    function getState() {
        return state;
    }
    // 用于初始化state，其中type任意名称
    dispatch({ type: '@Init_XXX_dXXxx' });
    return