状态管理

状态管理的解决思路

状态管理模式

Store模式

Flux

Flux是一种思想，他给出了一些基本的概念，所有的框架都可以根据他的思想来做一些实现。

Flux把一个应用分成了四个部分： View Action Dispatcher Store

• View是展示数据的，
• Store是存储数据的
• Action改变Store中的数据 Store改变后，如何通知到View？
• 订阅、监听等

View如何改变Store？

• View先要告诉Dispatcher，让Dispatcher Dispatch一个action， action修改Store

Flux的一些缺点（特点）

Redux

state

• 不可变性 Immutability 如果想要不可变的方式来更新，代码必须先复制原来的object/array，然后更新它的复制体。

Action

Action Creator

reducer

• 仅使用state和action参数计算新的状态值
• 禁止直接修改state。必须通过复制现有的state并对复制的值进行更改的方式来做 不可更新(immutable updates)
• 禁止任何异步逻辑，依赖随机值或导致其他“副作用”的代码

Store

• 当前Redux应用的状态存在一个名为store的对象中
• store是通过传入一个reducer来创建的
• store.getState() 返回当前状态值

Dispatch

• store.dispatch() 更新state的唯一方法时调用store.dispatch()并传入一个action对象。store将执行所有的reducer函数并计算出更新后的state

Selector

Selector函数可以从store状态树中提取执行的片段。随着应用变得越来越大，会遇到应用程序的不同部分需要读取相同的数据，selector可以避免重复这样的读取逻辑。

Redux切片（Slice）

“切片” 是应用中单个功能的Redux reducer 逻辑和action的集合，通常定义在一个文件中。该名称来自于将根 Redux 状态对象拆分为多个状态“切片”。

异步

Redux本身不支持异步

Vuex

Vuex和Redux的区别

Vuex是一个针对Vue特化的Flux，主要是为了配合Vue本身的响应式机制。当然吸取了一些Redux的特点，比如单状态树和便于测试和热重载的API，但是也选择性的放弃了一些在Vue的场景下并不契合的特性，比如

• 强制的immutability（在保证了每一次状态变化都能追踪的情况下，强制的immutability带来的收益就很有限了）
• 为了同构而设计得较为繁琐的API
• 必须依赖第三方才能相对高效的获得状态树的局部状态（相比之下Vuex直接用Vue本身的计算属性就可以） 所以Vue + Vuex会更简洁，也不需要考虑性能问题，代价就是Vuex只能和Vue配合。Vue + Redux 也不是不可以，但是Redux作为一个范用的实现和Vue的锲合度肯定不如Vuex。