从Flux到Redux，再到React-Redux

系统管理员 2022-05-24 06:11 230阅读 0赞

要想知道Flux是什么，我们先从MVC框架说起。

在MVC（Model-View-Controller）的世界里，React相当于V（也就是View）部分，只涉及页面的渲染一旦涉及应用的数据管理部分，还是交给Model和Controller，不过，Flux并不是一个MVC框架，事实上，Flux认为MVC框架存在很大问题，它推翻了MVC框架，并用一个新的思维来管理数据流转。

# **一、MVC框架的缺陷** #

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

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

MVC框架的几个组成部分和请求的关系可以用下图表示：

![WEBRESOURCE05a7e751bed4e2291d27ab57786ef299][]

既然MVC框架已经被业界广泛接受，facebook为什么会再次推出flux呢？

来看一下Facebook描述的MVC框架，如下图，在图中，我们可以看到，Model和View之间缠绕着蜘蛛网一样复杂的依赖关系，根据箭头的方向，我们知道有的是Model调用了View，有的是View调用了Model，好乱！

![WEBRESOURCE50487388b6d57ba5668fc23a22a01972][]

为什么会出现这种现象呢，MVC框架提出的数据流很理想，用户请求先到达Controller，由Controller调用Model获得数据，然后把数据交给View，但是，在实际框架实现中，总是允许View和Model可以直接通信，就出现了上图混乱的情况。

对于MVC框架，为了让数据流可控，Controller应该是中心，当View要传递消息给Model时，应该调用Controller的方法，同样，当Model要更新View时，也应该通过Controller引发新的渲染。

# **二、Flux框架** #

Facebook已经无心在MVC框架上纠缠，他们用Flux框架来代替原有的MVC框架，他们提出的Flux框架大致结构如下：

![WEBRESOURCE34fab34f6991bde7ef686f4f2eb664c9][]

一个Flux应用包含四个部分：

*  Dispatcher，处理动作分发，维持Store之间的依赖关系；
 *  Store，负责存储数据和处理数据相关逻辑；
 *  Action，驱动Dispatcher的JavaScript对象；
 *  View，视图部分，负责显示用户界面。

如果非要把Flux和MVC做一个结构对比，那么，Flux的Dispatcher相当于MVC的Controller，Flux的Store相当于MVC的Model，Flux的View当然就对应MVC的View，至于多出来的这个Action，可以理解为对应给MVC框架的用户请求。

在MVC框架中，系统能提供什么样的服务，通过Controller暴露函数来实现。每增加一个功能，Controller往往就要添加一个函数；在Flux的世界里，新增加功能并不需要Dispatcher增加新的函数，实际上，Dispatcher自始至终只需要暴露一个函数Dispatch，当需要添加新的功能时，要做的是增加一种新的Action类型，Dispatcher的对外接口不需要改变。

# 三、Flux总结 #

# 1、Flux的做法 #

在Flux中，Store只有get方法，没有set方法，因此View只能通过get方法获取Store的状态，无法直接去修改状态，如果View要修改Store状态的话，只有派发一个action对象给Dispatcher。

# 2、优点： #

Flux最大的优点就是纠正MVC框架中无法禁止Model与View通信的缺点，实现更严格的数据流控制，即“单向数据流”的管理方式。

# 3、缺点： #

*  store之间的依赖：如果两个Store之间有逻辑依赖关系，就必须用上Dispatcher的waitFor函数，需要Token标识。
 *  难以进行服务器端渲染（尚不理解）
 *  Store混杂了逻辑与状态，当我们需要动态替换一个Store的逻辑时，只能把这个Store整体替换掉，那也就无法保持Store中存储的状态。

# **四、Redux** #

我们把Flux看做一个框架的理念的话，Redux是Flux的一种实现。

Flux的基本原则是“单向数据流”，Redux在此基础上强调三个基本原则：

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

# 1、唯一数据源 #

唯一数据源指的是应用的状态数据应该只存储在唯一的一个Store上。

# 2、保持状态只读 #

保持状态只读，就是说不能去直接修改状态，要修改Store的状态，必须要通过派发一个action对象完成。这点可能比较费解，因为驱动用户界面更改的是状态，如果状态都是只读的不能修改，怎么可能引起用户界面的变化呢？当然，要驱动用户界面渲染，就要改变应用的状态，但是改变状态的方法不是去修改状态上的值，而是创建一个新的状态对象返回给Redux，由Redux完成新的状态的组装。

# 3、数据改变只能通过纯函数完成 #

这里所说的纯函数就是把Reducer，Redux这个名字的前三个字母Red代表的就是Reducer，其实Redux名字的含义就是Reducer+Flux。

Reducer不是一个Redux特定的术语，而是一个计算机科学中的通用概念。以javascript为例，数组类型就有reduce函数，接受的参数就是一个reducer，reduce做的事情就是把数组所有元素依次做“规约”，对每个元素都调用一次参数reducer，通过reducer函数完成规约所有元素的功能。

在Redux中，每个reducer函数如下：

reducer（state，action）

第一个参数state是当前的状态，第二个参数action是接收到的action对象，而reducer函数要做的事情，就是根据state和action的值产生一个新的对象返回，注意reducer必须是一个纯函数，也就是说函数的返回结果必须完全由参数state和action决定，而且不产生任何副作用，也不能修改参数state和action对象。

React和Redux事实上是两个独立的产品，一个应用可以使用React而不使用Redux，也可以使用Redux而不使用React，但是，如果两者结合使用，没有理由不使用一个名为react-dedux的库，这个库能大大简化代码的书写。

下一篇我会结合一个react-redux的应用实例来讲解，欢迎继续关注哦~

[WEBRESOURCE05a7e751bed4e2291d27ab57786ef299]: https://note.youdao.com/yws/res/4361/WEBRESOURCE05a7e751bed4e2291d27ab57786ef299
[WEBRESOURCE50487388b6d57ba5668fc23a22a01972]: https://note.youdao.com/yws/res/4359/WEBRESOURCE50487388b6d57ba5668fc23a22a01972
[WEBRESOURCE34fab34f6991bde7ef686f4f2eb664c9]: https://note.youdao.com/yws/res/4375/WEBRESOURCE34fab34f6991bde7ef686f4f2eb664c9