阅读 32

Vuex、 Flux、Redux (未完待续)

状态管理

状态管理的解决思路

状态管理模式

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。

文章分类
前端
文章标签