React总结篇之三_从Flux到Redux-创新互联

一、Flux
Redux是Flux思想的另一种实现方式，Flux一族框架（包括Redux）贯彻的最重要的观点是单向数据流；

1.MVC框架的缺陷
MVC是业界广泛接受的一种前端应用框架类型，这种框架把应用分为3个部分：

• Model（模型）负责管理数据，大部分业务逻辑也应该放在Model中；
• View（视图）负责渲染用户界面，应该避免在View中涉及业务逻辑；
• Controller（控制器）负责接受用户输入，根据用户输入调用对应的Model部分逻辑，把产生的数据结果交给View部分，让View渲染出必要的输出。

但是，在实际框架实现中，总是可以允许View和Model直接通信，因此会变得非常混乱！

2.Flux
2.1 Flux包含4个部分：

• Dispatcher：处理动作分发，维持store之间的依赖关系；
• Store：负责存储数据和处理数据相关逻辑；
• Action：驱动Dispatcher的JavaScript对象，代表一个动作的纯数据，action对象必须要有一个名为type的字段（字符串类型）；
• View：视图部分，负责显示用户界面

2.2 Flux的优势与不足
（1）优势：单向数据流。在Flux的理念里，如果想改变界面，就必须改变store中的状态，如果要改变store中的状态，必须派发一个action对象。
（2）不足：store之间依赖关系（如果两个store之间有依赖关系，就必须用上Dispatcher的waitFor函数）；难以进行服务器端渲染；store混杂了逻辑和状态。

二、Redux
1.Redux的基本原则：

• 唯一数据源
• 保持状态只读
• 数据改变只能通过纯函数完成

1.1 唯一数据源：
指应用的状态数据应该只存储在唯一的一个store上，所有组件的数据源就是这个store上的状态。store是一个树形的对象，每个组件往往只是用树形对象上的一部分数据。要驱动用户界面渲染，就要改变应用的状态，但是改变状态的方法不是去修改状态上的值，而是创建一个新的状态对象返回给Redux，由Redux完成新的状态的组装。

1.2 数据改变只能通过纯函数完成：
这个纯函数就是Reducer，在Redux中，每个reducer的函数签名如下：
reducer（state，action）
第一个参数state是当前的状态，第二个参数action是接收到的action对象，而reducer要做的事情，就是根据state和action的值产生一个新的对象返回。reducer只负责计算状态，不负责存储状态。因为reducer是纯函数，函数的返回结果必须由参数state和action决定，而且不产生任何副作用，也不能修改参数state和action对象。

2. 容器组件和傻瓜组件
   （1）容器组件：和Redux Store打交道，读取Store的状态，用于初始化组件的状态，同时还要监听Store的状态改变；当Store状态发生变化时，需要更新组件状态，从而驱动组件重新渲染；当需要更新Store状态时，就要派发action对象。
   （2）傻瓜组件：根据当前props和state，渲染出用户界面。这是一个纯函数，根据props产生结果。

3. React-Redux库
   React-Redux两个最主要的功能：
   （1）connect：连接容器组件和傻瓜组件
   （2）Provider：提供包含store的context

3.1 connect：
export default connect（mapStateToProps，mapDispatchToProps）（Counter）
connect是React-Redux提供的一个方法，它接收两个参数mapStateToProps和mapDispatch-ToProps，执行结果依然是一个函数，所以才在后面又加一个圆括号，把connect函数执行的结果立刻执行，这一次参数是Counter这个傻瓜组件。这里有两个函数执行，第一次是connect函数的执行，第二次是把connect函数返回的函数再次执行，最后产生的就是容器组件。
connect函数作为容器组件，做的事情无外乎两件事：
（1）把store上的状态转换为内层傻瓜组件的prop；
（2）把内层傻瓜组件中的用户动作转化为派送给Store的动作，即把内层傻瓜组件暴露出来的函数类型的prop关联上dispatch函数的调用，每个prop代表的回调函数的主要区别就是dispatch函数的参数不同，这就是mapDispatchToProps函数做的事情。

3.2 Provider
React-Redux几乎就是provider。
React-Redux要求store是包含以下3个函数的object：

• subscribe
• dispatch
• getState

另外，React-Redux定义了provider的componentWillReceiveProps函数，React-Redux在componentWillReceiveProps函数中会检查这一次渲染时代表store的prop和上次的是否一样。如果不一样，就会告警，这样做是为了避免多次渲染用了不同的Redux store，每个Redux应用只能有一个Redux store，在整个Redux的生命周期中都应该保持Store的唯一性。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。