状态管理之 Flux、Redux、Vuex、MobX（概念篇）

本文是对 Flux、Redux、Vuex、MobX 几种经常使用状态管理模式的总结，偏向于概念层面，不涉及过多代码。

状态管理

什么是状态管理？

状态管理就是，把组件之间须要共享的状态抽取出来，遵循特定的约定，统一来管理，让状态的变化能够预测。

为何须要状态管理？

状态共享

组件之间一般会有一些共享的状态，在 Vue 或者 React 中咱们通常会将这部分状态提高至公共父组件的 props 中，由父组件来统一管理共享的状态，状态的改变也是由父组件执行并向下传递。这样会致使两个问题:

• 须要将共享的状态提高至公共的父组件，若无公共的父组件，每每须要自行构造
• 状态由父组件自上而下逐层传递，若组件层级过多，数据传递会变得很冗杂

变化跟踪

在应用调试过程当中，可能会有跟踪状态变化过程的需求，方便对某些应用场景的复现和回溯。这时候就须要统一对状态进行管理，并遵循特定的约定去变动状态，从而让状态的变化可预测。

Store 模式

Store 模式是一种相对简单的状态管理模式，通常有如下约定：

• 状态存储在外部变量 store 里（也能够是全局变量）
• store 中的 state 用于存储数据，由 store 实例维护
• store 中的 actions 封装了改变 state 的逻辑

流程图以下：

若是对 state 的变动均经过 actions，那么实现记录变动、保存快照、历史回滚就会很简单，可是 Store 模式并无对此进行强制约束。

Flux

Flux 是一种架构思想，相似于 MVC 、MVVM 等。

Flux 的组成

Flux 把一个应用分红四部分:

• View：视图层
• Action：动做，即数据改变的消息对象（可经过事件触发、测试用例触发等）
  • Store 的改变只能经过 Action
  • 具体 Action 的处理逻辑通常放在 Store 里
  • Action 对象包含 type （类型）与 payload （传递参数）
• Dispatcher：派发器，接收 Actions ，发给全部的 Store
• Store：数据层，存放应用状态与更新状态的方法，一旦发生变更，就提醒 Views 更新页面

Notice:

• Action 本质上是一个纯声明式的数据结构，仅提供对事件的描述，不提供事件的具体逻辑。一般会给 Action 的 type 属性赋值一个大写的字符串，代表是常量，加强可维护性，例如:

{
  type: 'ADD_USER',
  payload: {
    name: 'user_name'                              
  }
}
复制代码

Flux 的特色

• 单向数据流。视图事件或者外部测试用例发出 Action ，经由 Dispatcher 派发给 Store ，Store 会触发相应的方法更新数据、更新视图
• Store 能够有多个
• Store 不只存放数据，还封装了处理数据的方法

Redux

Redux 的组成

• Store：存储应用的状态 -- state 以及用于触发 state 更新的 dispatch 方法等，整个应用仅有单一的 Store。Store 中提供了几个管理 state 的 API：
  • store.getState()：获取当前 state
  • store.dispatch(action)：触发 state 改变（惟一途径）
  • store.subscribe(listener)：设置 state 变化的监听函数（若把视图更新函数做为 listener 传入，则可触发视图自动渲染）
• Action：同 Flux ，Action 是用于更新 state 的消息对象，由 View 发出
  • 有专门生成 Action 的 Action Creator，其本质上是一个返回 Action 对象的函数
• Reducer：是一个根据 action.type 更新 state 并返回 nextState 替换原来的 state 的同步的纯函数（对于相同的参数返回相同的返回结果，不修改参数，不依赖外部变量）。即经过应用状态与 Action 推导出新的 state：(previousState, action) => newState。Reducer 返回一个新的 state

总体流程为：Action Creator => action => store.dispatch(action) => reducer(state, action) => state = nextState。流程图以下：

Middleware

Redux 还支持中间件，用于管理异步数据流。

Redux 的 Middleware 是对 store.dispatch() 进行了封装以后的方法，可使 dispatch 传递 action 之外的函数或者 promise；经过 applyMiddleware 方法应用中间件。（middleware 链中的最后一个 middleware 开始 dispatch action 时，这个 action 必须是一个普通对象）

经常使用库：redux-actions, redux-thunk, redux-promise 。

const store = createStore(
  reducer,
  // 依次执行
  applyMiddleware(thunk, promise, logger)
)
复制代码

Redux 的特色

• 单向数据流。View 发出 Action (store.dispatch(action))，Store 调用 Reducer 计算出新的 state ，若 state 产生变化，则调用监听函数从新渲染 View （store.subscribe(render)）
• 单一数据源，只有一个 Store
• state 是只读的，每次状态更新以后只能返回一个新的 state
• 没有 Dispatcher ，而是在 Store 中集成了 dispatch 方法，store.dispatch() 是 View 发出 Action 的惟一途径
• 支持使用中间件（Middleware）管理异步数据流

Vuex

Vuex 是 Vue 的状态管理模式。

Vuex 的核心概念

• Store：Vuex 采用单一状态树，每一个应用仅有一个 Store 实例，在该实例下包含了 state, actions, mutations, getters, modules
• State：Vuex 为单一数据源
  • 能够经过 mapState 辅助函数将 state 做为计算属性访问，或者将经过 Store 将 state 注入全局以后使用 this.$store.state 访问
  • State 更新视图是经过 vue 的双向绑定机制实现的
• Getter：Getter 的做用与 filters 有一些类似，能够将 State 进行过滤后输出
• Mutation：Mutaion 是 vuex 中改变 State 的惟一途径（严格模式下），而且只能是同步操做。Vuex 中经过 store.commit() 调用 Mutation
• Action：一些对 State 的异步操做能够放在 Action 中，并经过在 Action 提交 Mutaion 变动状态
  • Action 经过 store.dispatch() 方法触发
  • 能够经过 mapActions 辅助函数将 vue 组件的 methods 映射成 store.dispatch 调用（须要先在根节点注入 store）
• Module：当 Store 对象过于庞大时，可根据具体的业务需求分为多个 Module ，每一个 Module 都具备本身的 state 、mutation 、action 、getter

Vuex 的特色：

• 单向数据流。View 经过 store.dispatch() 调用 Action ，在 Action 执行完异步操做以后经过 store.commit() 调用 Mutation 更新 State ，经过 vue 的响应式机制进行视图更新
• 单一数据源，和 Redux 同样全局只有一个 Store 实例
• 只能应用于 Vue

MobX

MobX 背后的哲学是:

任何源自应用状态的东西都应该自动地得到。

意思就是，当状态改变时，全部应用到状态的地方都会自动更新。

MobX 的核心概念

• State：驱动应用的数据
• Computed values：计算值。若是你想建立一个基于当前状态的值时，请使用 computed
• Reactions：反应，当状态改变时自动发生
• Actions：动做，用于改变 State
• 依赖收集（autoRun）：MobX 中的数据以来基于观察者模式，经过 autoRun 方法添加观察者

举个栗子：

const obj = observable({
  a: 1,
  b: 2
})

autoRun(() => {
  console.log(obj.a)
})

obj.b = 3 // 什么都没有发生
obj.a = 2 // observe 函数的回调触发了，控制台输出：2
复制代码

MobX 的特色

• 数据流流动不天然，只有用到的数据才会引起绑定，局部精确更新（细粒度控制）
• 没有时间回溯能力，由于数据只有一份引用
• 基于面向对象
• 每每是多个 Store
• 代码侵入性小
• 简单可扩展
• 大型项目使用 MobX 会使得代码难以维护

总结

• Flux 、Redux 、Vuex 均为单向数据流
• Redux 和 Vuex 是基于 Flux 的，Redux 较为泛用，Vuex 只能用于 vue
• Flux 与 MobX 能够有多个 Store ，Redux 、Vuex 全局仅有一个 Store（单状态树）
• Redux 、Vuex 适用于大型项目的状态管理，MobX 在大型项目中应用会使代码可维护性变差
• Redux 中引入了中间件，主要解决异步带来的反作用，可经过约定完成许多复杂工做
• MobX 是状态管理库中代码侵入性最小的之一，具备细粒度控制、简单可扩展等优点，可是没有时间回溯能力，通常适合应用于中小型项目中

参考：

• www.ruanyifeng.com/blog/2016/0…
• www.ruanyifeng.com/blog/2016/0…
• zhuanlan.zhihu.com/p/53599723
• vuex.vuejs.org/zh/
• cn.redux.js.org/
• cn.mobx.js.org/