状态管理十全大补

[MJingv]

状态管理十全大补

资料来源 【第1525期】Vuex、Flux、Redux、Redux-saga、Dva、MobX

思路：把组件之间需要共享的状态抽取出来，遵循特定的约定，统一来管理，让状态的变化可以预测。

Store模式

• store 的 state 来存数据
• store 的 action 来控制state的改变，方便排错/日志

flux

• 核心：单向数据流
• 组成：view、action、dispatch、store
• 缺点（特点）：一个应用可多个store，多个store有依赖关系
• Flux 架构就像眼镜：您自会知道什么时候需要它。

redux

• 核心：单向数据流
• store：只有一个
• action：改变action的唯一方法 store.dispatch()
• reduce(纯函数)：store收到action返回一个新的state
  1. reduce就是【action（list）+initValue（初始state）=>value（新state）】
  2. redux里的每个reduce负责state的一部分，多个reduce可通过combineReducers方法合成一个根Reducer
• 对比：都是单向数据流

flux	redux
多个数据源（多个store）	单个数据源（一个store）
state可随便改	state只读（reduce返回新state）
非纯函数	纯函数reduce来修改

• 异步处理【中间件】
  1. redux-thunk
  2. redux-promise（封装更多）

vuex

store

• 一个，单一状态树

mutation

• 改变state的唯一方法
• 组成：事件类型 && 回调函数
• commit一个mutation
• 必须为同步事务

action

• 异步

  getter

• 方便计算属性复用

react-redux

原理

• react-redux 就是多了个 connect 方法连接容器组件和UI组件
• map映射
  1. mapStateToProps 把容器组件的 state 映射到UI组件的 props
  2. mapDispatchToProps 把UI组件的事件映射到 dispatch 方法

展示组件 vs 容器组件

-	展示组件	容器组件
作用	描述如何展示（骨架、样式）	描述如何运行（数据后去、状态更新）
直接用redux	否	是
数据来源	props	监听redux的state
数据修改	props调用cb	向redux派发actions
调用方式	手动	react-redux自动

react-saga【异步解决方案】

异步处理方式

• 处理异步：副作用（Side Effect）
• generator实现
• 把saga 想象成开了一个以最快速度不断地调用 next 方法并尝试获取所有 yield 表达式值的线程
• 可以很细粒度的控制各个副作用每一部的操作，可以把异步操作和同步发起 action 一起，随便的排列组合

redux-saga vs redux-thunk

• 异步数据获取的相关业务逻辑放在了单独的 saga.js 中，不再是掺杂在 action.js 或 component.js 中
• saga 代码采用类似同步的方式书写，代码变得更易读

dva

dva=react-redux+redux-saga

mobx

概念先行

1. 状态管理方式：flux、mobx
2. MobX 老大哥在看着 state 呢。state 只要一改变，所有用到它的地方就都跟着改变了
3. flux/redux 函数式编程，mobx面向对象编程
4. mobx vs redux

mobx	redux
没有时间回溯能力，但是view更新精确，粒度控制很细	数据流动自然，利用时间回溯性，增强业务可预测性
autorunasync等方法	中间件处理副作用（异步）
小而精	大而全

[MJingv]

mobx思想及实现原理

概念先行

要点

1. 定义状态并使其可观察
2. 创建视图以响应状态的变化
3. 更改状态

核心概念

1. Observable state(可观察的状态)
2. Computed values(计算值)
3. Reactions(反应)
4. Actions(动作)

概念与原则

1.概念

• state(状态)
• derivation(衍生)
• action(动作)

2.原则

• 单向数据流：action=》state=》views

[MJingv]

rematch

一个基于redux简化的状态管理库

如何使用

1.安装rematch和react-redux两个库 2.定义模型（model），其中描述状态（state）和改变状态的方法（reduces/effects异步） 3.创建store 4.在组件内使用action

• mapstate
• mapdispatch
• connect(mapstate,mapdispatch)(xx)

[MJingv]

mobx

简单可拓展的响应式数据流状态管理库

如何使用

1. 安装mobx
2. 创建observable状态
3. 创建action，修改状态的函数
4. 在组件中使用@observer连接state和action

响应式数据流

• 当状态（observable）发生改变时，自动触发action和computed，进而影响其他状态。
• 数据流是单向的，数据总是从状态流向actions和computed

优点：

1. 简单：只需定义状态和改变，不需要手动更新视图和同步状态
2. 高效：必要时更新
3. 可预测：单向数据流可追溯

vue.js和mobx 响应式数据流区别

• vuejs使用的是依赖追踪实现的
• mobx使用的是观察者模式

vue的数据依赖追踪

步骤

• 数据劫持：创建响应式数据，在实例的定义一个data属性时，使用Object.defineProperty将这个属性转换成getter和setter
• 依赖收集：当你访问一个响应式数据时，在getter里收集依赖（视图or计算属性）
• 触发更新：当你改变一个响应式数据时，自动追踪响应式数据变化并更新视图。