学习Redux之分析Redux核心代码分析

　　1. React，Flux简单介绍

　　学习React我们知道，React自带View和Controller库，因此，实现过程中不需要其他任何库，也可以独立开发应用。但是，随着应用程序规模的增大，其需要控制的state也会越来越多，为了统一控制，我们一般都会将所有的状态和控制逻辑都放在顶层组件中，这样就会导致，react顶层组件中体积庞大，并且数据和组件混合在一起，非常不方便管理。

　　在这种情况下Flux，就出现了，他提出了将应用程序，分为三部分：dispatcher， store，view。其中，dispatcher负责分发事件；store负责保存数据，同时响应事件并更新数据；view负责订阅store中的数据，根据数据渲染相应的页面，并提供用户交互。

　　实际上来说，从React到Flux，我们只是将我们React中定义的顶层组件中数据与逻辑拆分到不同的文件中：

　　1. 将state写在store中，在store 中存放数据，并向外提供一个getter接口，为state提供唯一数据接口；并创建change事件注册函数；

　　2. 将合成事件的回调函数，转化成action对象（js对象，具有一个type属性，用于表示action的类型，并通过payload属性传递数据），并使用Dispatcher对象中的dispatch方法将事件对象分发出去。

　　3. 利用dispatcher对象中提供的register方法，注册action，接收dispatch方法分发action对象，对store的数据进行相应操作，并触发change事件；

　　4. 我们在组件中监听自定义change事件，当监听到change事件，重新获取store中的数据 ，设置state，重新渲染页面。

　　实际上Flux并不是一个框架，而是前端应用架构，它提出了单向数据流，可以提供清晰的数据流。同时将数据和组件分离，使应用程序结构更清晰。但是flux依旧存在一些问题。

　　Redux，利用Flux提出的架构思想和少量的核心代码，方便了我们的开发。以上都是简单介绍，下面通过Redux核心代码，其中部分都是简化代码。

　　2. Redux核心代码介绍

　　1. createStore方法

　　下面代码是createStore的简单实现，其中保留了其中三个主要的方法getState，dispatch，subscribe实现，省略了参数处理部分，和一些其他方法实现。

// createStore方法简单实现

const createStore = (reducer) => {

　　// 定义state，监听器数组
　　let state;
　　let listeners = [];
　　
　　// 定义getter方法，唯一一个获取数据的接口
　　const getState = () => state;

　　// 定义dispatch方法，用户分发action事件，接收一个action对象，生成新的state，并通知所有监听器
　　const dispatch = (action) => {
　　　　// 利用reducer生成新的state
　　　　state = reducer(state, action);
　　　　// 通知所有监听器，调用回调函数
　　　　listeners.forEach(listener => listener());
　　};
　　
　　// 定义subscribe方法，注册监听器，并返回一个用于取消当前注册监听器的函数，用于取消监听　
　　const subscribe = (listener) => {
　　　　// 添加到监听数组中
　　　　listeners.push(listener);
　　　　// 返回取消监听函数
　　　　return () => {
　　　　　　listeners = listeners.filter(l => l !== listener);
　　　　}
　　};

　　// 调用dispatch，初始化state
　　dispatch({});

　　// 返回getState，dispatch，subscribe三个方法
　　return { getState, dispatch, subscribe };
};

　　我们从上面代码可以知道，createStore接收一个reducer函数参数，每次调用dispatch函数，利用reducer函数，以及之前的state，以及action，计算出最新的state，并通知所有的监听器，通过调用getState方法，调用最新的state。同时组件通过subscribe函数，注册一个监听器，从而每当数据更新时，通知监听组件。

　　以上就是Redux中最主要的createStore对象中主要方法介绍。

　　2. combineReducers函数

　　reducer函数，其实就是根据当前的state和action，计算出一个新的state，之所以叫reducer，是因为它的功能就是action对象数组调用reduce函数，产生最新的状态。

　　当我们的应用程序规模非常大时，我们需要将reducer进行拆分，我们可以直接自定义一个总的合并reducer，也可以使用conbineReducers函数来合并，最终效果等价。

// 合并多个reducer
// 返回一个合并的reducer函数，接收两个参数state和action
/**
 * combineReducers调用方法
 * combineReducers({
 *     a: a,
 *     b: b,
 *     c: c
 * }); 
 * 等价于
 * {
 *     a: a(state.a, action),
 *     b: b(state.b, action),
 *     c: c(state.c, action)
 * }
 */
const combineReducers = reducers => {
    return (state = {}, action) => {
        // 获取所有自身可枚举属性，并进行reduce操作，
        // 将合并在一起，初始值为空数组
        return Object.keys(reduers).reduce(
            (nextState, key) => {
                nextState[key] = reducers[key](state[key], action);
                return nextState;
            }, {}
        );
    };
};

　　3. applyMiddleware函数

　　该函数是在当createStore函数传入applyMiddleware参数时，在createStore中调用的。其实createStore函数的实际参数有三个reducer, preloadedState（state默认值）, enhancer， 并且在函数中一些了参数判断，主要就是，将enhancer（在这里是applyMiddleware函数） 参数进行匹配，如果createStore参数中具有enhancer， 则直接调用enhancer(createStore)(reducer, preloadedState)对store进行初始化。

　　其中applyMiddleware中有调用createStore函数，来初始化store，然后用middleware对初始化的store 中的dispatch函数进行包装，得到最终增强的applyMiddleware，最终返回具有增强的applyMiddleware的store。

// 将中间件和store.dispatch组合
// 返回具有整合后的dispatch方法的store

/**/

export default function applyMiddleware(...middlewares) {
    return (createStore) => (reducer, preloadedState, enhancer) => {
        // 根据上面分析，reducer，preloadedState即为createStore中的reducer，preloadedState
        // enhancer为空
        
        // 创建一个初始化的store，基本逻辑即为上面createStore函数分析
        var store = createStore(reducer, preloadedState, enhancer);
        // 获取此时dispatch函数副本
        var dispatch = store.dispatch;
        // 用于存放中间件函数数组
        var chain = [];

        // 中间件的执行参数，中间件编写规定
        var middlewareAPI = {
            getState: store.getState,
            dispatch: (action) => dispatch(action)
        };

        // 对每一个中间件进行处理后存放
        chain = middlewares.map(middleware => middleware(middlewareAPI));
        // 使用compose函数，将处理后的中间件，和dispatch进行合并，得到增强后的dispatch
        // 如果chain为[f1, f2, f3]，那么dispatch经过compose处理后为 f1(f2(f3(dispatch)))
        dispatch = compose(...chain)(store.dispatch);

        // 将增强后的dispatch，赋值给store，并返回store
        return {...store,
            dispatch
        }
    }
}

　　其中的compose函数，主要就是利用了reduceRight函数对参入的参数进行了处理，就不详细说明了。

　　我想大家如果了解了上面这些，就能容易理解Redux如何工作的了。