状态管理之 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/