Redux、Flux、Vuex

joy968 发布于2019-08-21 14:35 / 3070人阅读

摘要：结构和数据流一个单向数据流是模式的核心，上面示图应该是程序员心中主要的模型图。

前言

这篇文章不会用具体的代码去阐述redux、flux或者vuex，因为我觉得它们所带来的更是一种编程思想。

前端进化和框架演变

在很久以前，前端没有MVVM的概念，MVVM是对MVC细化的说法（个人觉得两者区别不大），MVC的模式一直在后台使用，效果和优点都很明显。

后来前端工程师仿照MVC模式开发了很多框架出来：backbonejs、angularjs、emberjs、knockoutjs等等。

再后来nodejs的崛起，出现了reactjs、vuejs、avalonjs,都是主打组件化，让数据来驱动视图，再配合像grunt和webpack前端工具更是让前端步入新的时代。

其实这里我想吐槽一下，前端从以前把注意力集中在布局和样式，转变成把精力投入到学习这些思想、工具、框架中，我做为一个前端工程师在这种过渡中觉得是一种力不从心（可能年龄大了，es6普及后不知道还要了解多少新东西），虽然是一个把注意力从视图转到数据上的转变，但这过程其实要付出的挺多。

好，废话到此为止。

Redux 思想

Redux让你以一种新的方式思考开发应用个，这个方式是：状态从一个初始状态开始，被一系列动作序列改变，这种新方式是通往复杂Web应用的捷径。

这么一说，很多人一头雾水，啥意思？下面来个简单代码

var store = {
  state: {
    message: "Hello!"
  },
  actionA: function () {
    this.state.message = "action A triggered"
  },
  actionB: function () {
    this.state.message = "action B triggered"
  }
}
//如果你想改变message的值，你可以调用actionA或者actionA去实现。

上面这段代码可以说就是Redux思想最简单的体现。

Flux

Flux是Facebook用户建立客户端Web应用的前端架构，它通过利用一个单向的数据流补充了React的组合视图组件，这更是一种模式而非正式框架，你能够无需许多新代码情况下立即开始使用Flux

Flux应用有三个主要部分：Dispatcher调度 、存储Store和视图View(React 组件)，这些不应该和MVC:Model-View-Controll(模型-视图-控制器)混淆，控制器在Flux应用中是存在的，但是他们是controller-view(控制器-视图)，视图通常在一个结构顶部，而这种结构是用来从存储stroe获得数据，然后将数据传递到自己的子结构们，此外，Action创建者-Dispatcher的帮助类的方法 -用于支持一个语义API，这个API是描述应用程序中所有变化的可能，通常可将它们看成是Flux更新循环的第四部分。

Flux是以单向数据流方式支持MVC，当一个用户和React视图交互时，视图会将这个动作传播到一个中央Dispatcher，一直到各种存储，在那里保存着应用的数据和业务逻辑，这个使用React的声明式风格的过程是非常棒的，能够允许存储发送更新信息，而无需指定在状态之间如何切换视图。(传统方式更新状态后，会推出一个新的视图页面。)

Flux最初是用于正确导出数据，比如如果我们要显示一系列消息的未读数字，而另外一个视图显示的是所有消息，其中未读的消息会高亮显示。这种情况使用MVC很难处理，将一个消息变为已读状态需要更新消息模型，然后再需要更新未读的计数模型(将未读模型数字减1，因为刚发生一个已读改变)，这种依赖和级联更新经常发生在大型MVC应用，导致一个混乱的数据流编织和不可预知的结果。

控制器被存储反转控制：存储接受更新，适当地调节这些更新，而不是一致地依赖外部更新其数据，存储之外根本不知道它是如何管理领域数据的，这有助于实现一种清晰的分离关注。存储并没有直接的类似setAsRead()之类的方法，而是只有一个单一方式获取数据到其自成一体的世界中，这个方式就是回调，注册在dispatcher中的callback。

结构和数据流

一个单向数据流是Flux模式的核心，上面示图应该是Flux程序员心中主要的模型图。dispatcher 存储和视图是有着不同输入输出的独立节点，Action动作是一个简单对象，只是包含新的数据和一个标识符类型的属性。

视图也许引起新的动作Action，这个动作作为用户交互的响应将在整个系统传播：

所有通过dispatcher的数据流将作为一个集中式Hub，动作Action在一个action creator方法中被提供给dispatcher，这个动作通常来自于视图中用户的交互，dispatcher然后调用存储已经注册其中的回调函数，分发Action动作到所有的存储，在它们注册的回调函数中，存储会响应每个和它保存的状态有关的每个动作Action，存储然后发射一个 change改变的事件去提醒controller-view（控制器-视图），更新到刚刚改变的新数据。controller-view监听这些事件，然后在一个事件处理器中从存储中获取数据，controller-view调用它们自己的"setState()"方法，这会触发视图的重新渲染，包括DOM组件树中所有更新

通过应用的数据流是一个方向，没有两边绑定(two-way bingding：Angular.js有此方式)，应用状态在存储中维护，允许应用不同部分保持解耦，在存储之间发生依赖的地方，它们能够保持严格的层次关系（设计原则：尽量松耦合，无法回避的就变成树形层次结构），同步管理由dispatcher负责。

说了那么多，重点还是上面两张图，知道了这个流程，就掌握了它的大概思想，如果你还是不懂，这里分享个人认为比较好的文章：

怎样理顺react，flux，redux这些概念的关系，开发中有必要使用它们吗?

Redux 介绍

关于Vuex的几个疑问

vuex介绍

[译] Flux 入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87955.html

关于Flux,Vuex,Redux的思考

摘要：关于的思考是一种前端状态管理架构思想，专门解决软件的结构问题。他们给出了一些库用于实现的思想，并在的基础上做了一些改进。在这些框架里，当前最热门的莫过于和了。关于Flux,Vuex,Redux的思考 Flux是一种前端状态管理架构思想，专门解决软件的结构问题。基于Flux的设计思想，出现了一批前端状态管理框架。他们给出了一些库用于实现Flux的思想，并在Flux的基础上做了一些改进。...

jsbintask 2019-08-22 10:48 评论0 收藏0
Flux,Vuex,Redux

摘要：是一种前端状态管理架构思想，专门解决软件的结构问题。基于的设计思想，出现了一批前端状态管理框架。他们给出了一些库用于实现的思想，并在的基础上做了一些改进。在这些框架里，当前最热门的莫过于和了。 Flux Flux是一种前端状态管理架构思想，专门解决软件的结构问题。基于Flux的设计思想，出现了一批前端状态管理框架。他们给出了一些库用于实现Flux的思想，并在Flux的基础上做了一些改...

anonymoussf 2019-08-22 15:58 评论0 收藏0
Vuex、Flux、Redux、Redux-saga、Dva、MobX

摘要：也就是说不应该有公开的，所有都应该是私有的，只能有公开的。允许使用方法设置监听函数，一旦发生变化，就自动执行这个函数。用一个叫做的纯函数来处理事件。可以通过得到当前状态。在中，同步的表现就是发出以后，立即算出。这篇文章试着聊明白这一堆看起来挺复杂的东西。在聊之前，大家要始终记得一句话：一切前端概念，都是纸老虎。不管是Vue，还是 React，都需要管理状态（state），比如组件之...

hiYoHoo 2019-08-23 14:08 评论0 收藏0
react之redux状态管理

摘要：传统框架的缺陷传统框架的缺陷模型视图控制器的缩写即视图用户看到并与之交互的界面。即模型是管理数据很多业务逻辑都在模型中完成。在的三个部件中，模型拥有最多的处理任务。所有的状态，保存在一个对象里面唯一数据源。1、传统MVC框架的缺陷模型(model)－视图(view)－控制器(controller)的缩写 V即View视图：用户看到并与之交互的界面。 M即Model模型是管理数...

J4ck_Chan 2021-11-19 11:29 评论0 收藏0
react-redux 开发实践与学习分享

摘要：简介是一个状态管理的库，由基础上开发出来，与的主要区别是只有一个，关于，后文会详述。这个函数接受四个参数，它们分别是，，和。之前在注册页面，如果没有满足相关条件，则触发的行为。具体定义了项目中触发的行为类别，通过属性来区别于不同的行为。 redux简介 redux是一个js状态管理的库，由flux基础上开发出来，与flux的主要区别是只有一个store，关于store，后文会详述。在各...

imccl 2019-08-21 16:42 评论0 收藏0