认识Redux架构

从前文中对Flux的介绍中我们知道了store, action creator,dispatcher间数据单向流动的简洁之处，也了解了其存在的一些不足，那么Redux作为Flux架构的优化版，其改进之处在哪里呢？

Redux的三大基本原则

Flux的基本原则是单向数据流，作为优化版的Redux同样也是如此，但在此基础上增加了3个基本原则。

唯一数据源

我们知道，在Flux中有各种各样的Store分别存储管理数据，这种情况下容易造成数据冗余，并且数据更新的不一致也会导致各种问题。虽然有waitFor方法保证更新顺序，但由此产生的依赖又增加了应用的复杂度。Redux只有唯一一个Store，它是一个树形的对象。

保持状态只读

这一点和Flux是一致的，同样不能直接修改state，必须通过派发一个action对象去修改。不同的是Flux中是限制了组件的store的setter,而Redux根本没有组件的store。取而代之的是根据当前派发的action对唯一Store进行迭代(reducer)，迭代并不修改Store中的state，而是直接生成一个新的State。

状态修改只能通过纯函数完成

这里说的纯函数就是上文中指的reducer了，也是和Flux区别最大的地方。Flux中我们在actionCreator中调用dispatch方法去派发action，然后在组件Store中直接修改了数据。这样不仅有冗余代码，还无法保存数据变化前后的状态。

而Redux通过reducer这个纯函数去迭代，该函数接受state和action作为参数去生成一个新的state并且不产生任何副作用。这样不仅让state的修改变得简单纯粹，还可以保存修改前后的state,跟踪触发action前后的结果使得应用变得更易调试。

Redux数据流动解析

action

和Flux相同，redux同样需要两个文件去定义action，一个文件定义action的类型，这里和flux没有任何不同，但另一个action creator文件就不一样了。在Flux中action创建之后会立刻通过dispatcher派发出去，而redux中只会返回一个action对象，如何处理这个对象的工作交给调用者。

store

唯一Store由官方提供的createStore函数生成，这个函数接受reducer和initialState两个参数。我们已经知道了reducer函数需要根据先前的state和action去迭代产生新的state，而reducer第一次执行没有先前的state，这就是initialState参数的作用了。

和Flux中每个store中注册的逻辑处理回调函数一样，reducer函数中往往也包含以actionType为判断条件的switch语句，但区别在于reducer不会修改state,而是返回一个新的state将state存储的工作交给redux本身。reducer只专注于做一件事，就是基于旧的state迭代出新的state。

view

在view组件中我们需要引入通过createStore函数创建的唯一Store。Store包含有几个核心方法就是用于view组件中。

getState

该方法用于获取store当前的状态，通常用于view组件初始化state。

subscribe

当然仅仅初始化state是不够的，我们还需要在state变化时同步view上的state。该方法用于监听state变化并同步，通常在ComponentDidMount()生命周期时调用，相对的componentWillUnmount()生命周期时调用unsubscribe()解绑。

dispatch

除了同步store中的state,我们也需要去改变store中的state。唯一方法就是通过该方法派发action了。

简单Redux实现

function createStore(reducer，initialState) {
    let state = initialState;
    let listeners = [];
    let dispatch = (action) => {
        state = reducer(state, action);
        listeners.forEach((item) => {
            item();
        });
    }
    let subscribe = (fn) => {
        listeners.push(fn);
        return () => {
            listeners = listeners.filter(item => item !== fn);
        }
    };
    let getState = () => state;
    return {
        getState,
        dispatch,
        subscribe
    }
}

小结

本文主要介绍了redux的基本运作原理及其相较于Flux的改进之处，但这只是个开始。react和redux的协作还有很多可以改进和增强的地方，在今后再一一介绍。