乐趣区

关于状态管理:状态管理VueX与Redux

jiezi

一、概览

Redux与 VueX 是目前利用最广的前端框架的状态治理解决方案，其中 Vuex 是官网推出的计划，而 Redux 是React社区提供的。
2014 年 Facebook 提出了 Flux 架构的概念，引发了很多的实现。2015 年，Redux 呈现，将 Flux 与函数式编程联合一起，通过屡次迭代更新，目前曾经成为 React 生态中的最受欢迎的解决方案。
VueX是追随 Vue 一起公布的状态管理工具，Vue自称是一个渐进式的框架，就意味着其实 VueX 跟Redux一样能够依据本人的需要来选装。它也借鉴了 Flux 的思维。

二、外围概念比照

1、Redux

（1）Web 利用是一个状态机，视图与状态是一一对应的。
（2）所有的状态，保留在一个对象外面。（这两个观点是阮一峰老师的博客里讲的，很精炼，所以拿来间接用了。）
（3）action：同步 action，或借助 中间件 实现异步操作，action 不会扭转 store，只是形容了怎么扭转 store。
（4）reducer（纯函数，依据 action 和旧的 store 计算出新的 store。
（5）store：繁多数据源。
（6）Redux 提供了 store.getState() 这个 API 获取 store 树，还有 store.subscribe(listener) 订阅 store 的变动，当 store 扭转时会调用监听器；
（7）Redux 能够通过 combineReducers（）联合各个组件的 reducer，各个组件能够独自治理本人的状态，最初合并为一个 reducer 用于生成一个 store；
（8）将状态数据绑定到视图：Redux 将状态映射到视图能够通过 React-redux 映射到 React 组件，当然也能够间接应用 Redux 本人提供的 store.subscribe() 订阅 store 的扭转，从而更新视图，因而 Redux 不仅仅能够用于 React，也能够用于其余框架如 Vue；

2、VueX

（1）mutation（用于同步操作）
（2）action（可用于异步操作，提交 mutation）
（3）mutation外面间接批改 state
（4）state（繁多数据源）
（5）Vuex 有一个 getter 的概念用于依据 state 派生出一些数据，像 Vue 的计算属性一样，当 state 扭转时会从新计算出一个后果进去，提供给须要的组件。
（6）Vuex 用 Module 这个概念划分 store，与 Redux 一样，能够多层嵌套子状态。
（7）将状态数据绑定到视图：Vuex 只能用于 Vue，它提供了 mapState、mapAction、mapMutations 等 API 将 store 映射到 Vuex 各个组件，这个参考了 React-redux 的 mapStateToProps。

三、应用准则

Redux 应用准则：

1. 繁多数据源（一个 Redux 利用只有一个 store），也是单向的数据流；
2.state 只读（惟一扭转 state 的办法就是触发 action，action 是一个用于形容已产生事件的一般对象。）；
3. 应用纯函数（reducer）来批改 state。

Vuex 应用准则：

  1. 利用层级的状态应该集中到单个 store 对象中。
  2. 提交 mutation 是更改状态的惟一办法，并且这个过程是同步的。
  3. 异步逻辑都应该封装到 action 外面。

四、异步操作

（一）、Redux
1. Redux 得益于 中间件机制，利用 redux-thunk（redux-thunk 能够 dispatch 函数，这个函数用于生成 action，所以在这个函数外面咱们能够进行异步操作，等异步的后果进去后再放在 action 外面将这个 action 用 dispatch 散发进来, 而这个函数被叫做“action creator”）。
2. 能够将异步逻辑放在 action creator 外面，通过 action creator 做一个管制反转，给 action creator 传入 dispatch 作为参数，于是就能够 dispatch action，（本来是通过 dispatch 来散发 action , 当初是异步 action 即 action creator 把握了控制权调用 dispatch，所以叫管制反转）。
3. Redux 并没有发明独自的概念进去专门用于异步逻辑，它是利用了 Redux 本人实现的中间件机制，中间件从 dispatch 一个异步 action 到 action 达到 reducer 之间解决 action，在这期间通过异步操作失去的后果能够放到 action 外面再通过 dispatch 散发到 reducer。
4. 以前 dispatch 一个 action 之后，这个 action 回立刻达到 reducer，所以是同步 action，当初在 action creator 外面，咱们通过管制反转，能够期待异步操作后果再生成 action 散发，所以叫做异步 action：


（二）、VueX
Vuex 是用 mutation 来对应 Redux 的 action，另外 Vuex 又发明了一个 action 来提交 mutation 并通过异步提交 mutation 来实现异步操作后果可能达到 state。

阐明

以上局部内容起源与本人温习时的网络查找，也次要用于集体学习，相当于记事本的存在，暂不列举链接文章。如果有作者看到，能够分割我将原文链接贴出。

退出移动版