文章目录
- 一、基本介绍
- 二、三大原则
- 三、工作流程图
一、基本介绍
2013 年 Facebook 提出了 Flux 架构的思想，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构
React 与 Redux的区别就相当于 Java 和 JavaScript 的区别，完全是两种不同的东西，只不过名字比较像
Redux的设计思想：
- React 只是 DOM 的一个抽象层，并不是web应用的完整解决方案。代码结构和组件间的通信，他没有涉及
- web应用是一个状态机，视图与状态是一一对应的
- 所以的状态，保存在一个对象里面（唯一数据源）、
- 目的：实现集中式状态管理
- 如果你不知道是否需要 Redux ，那就是不需要它
- 只有遇到 React 实在解决不了的问题，你才需要Redux
- 简单说，如果你的UI层非常简单，没有很多互动，Redux就是不必要的，用了反而增加复杂性
- 比如：
- 用户的使用方式非常简单
- 用户之间没有协作
- 不需要与服务器大量交互，也没有使用WebSocket
- 视图层（View）只从单一来源获取数据
需要使用Redux的项目：
- 用户的使用方式复杂
- 不同身份的用户有不同的使用方式（比如普通用户和管理员）
- 多个用户之间可以协作
- 与服务器大量交互，或者使用了WebSocket
- View 要从多个来源获取数据
从组件层面考虑，什么样子需要Redux：
- 某个组件的状态，需要共享
- 某个状态需要在任何地方都可以拿到
- 一个组件需要改变全局状态
- 一个组件需要改变另一个组件的状态
二、三大原则
- 单一数据源
>整个应用的state被存储在一棵对象结构树中
>（整个state不是组件中的state，请不要混淆）
>并且这个对象结构只存在唯一一个store中
- State 是只读的
> 唯一改变 state 的方法就是触发 dispatch+action
> action是一个用于描述已发生时间的**普通对象**
> （action普通对象必须要有`type`属性，值是什么无所谓，其余属性也无所谓）
- 数据的改变必须通过纯函数完成
> 为了描述action如何改变state tree，我们需要编写reducer，
> reducer 必须是纯函数，它接收先前的state和action，并返回新的state（不会合并的，自行注意这个坑）
> 一个函数的返回结果只接收其形参的影响，则其就是纯函数
三、工作流程图
- 完整版：
先来个简单版本的：
- Store 相当于老板
- Reducers 相当于厨师
- Action Creators相当于服务员
- React Component 相当于顾客
- 打个比方：
- 顾客（React Component）想吃点东西，于是就把吃啥告诉了服务员（Action Creators）
- 服务员（Action Creators）就用菜单（dispatch）记录（action）下来，点了什么菜（type），和数量（data）。
- 然后把菜单（ dispatch(action) ）交给了老板（Store），老板就根据菜单上的内容，告诉给厨师（Reducers）让他炒什么菜
- 厨师（Reducers）收到老板的指示后，迅速的把菜做好。并端给（return newState）老板（Store）。
- 菜放到老板这后，老板（Store）就通知顾客（React Component）来取餐（getState）
- （previousState, action）：顾客如果开始点了一个蛋炒饭，后面又加了一个紫菜汤。
- 此时表示蛋炒饭之前的数据（previousState），紫菜汤表示现在的数据（ action）
再来看具体实现的：
Action：动作的对象，有两个属性
type：标识属性，值为字符串，唯一，必选参数
data：数据属性，值类型任意，可选参数
Reducer：用于初始化状态和加工状态
加工时根据旧的state值和传过来的action
生成新的state的值，是一个纯函数
Store：将state、action、reducer联系在一起的对象，相当于指挥者
1. 创建store对象：createStore(reducer);
2. 获取state的值：getState()
3. 派发动作：dispatch(action)
4. 注册监听：subscribe() 当产生新的 state 时，自动调用
- 简化版：
Redux 的流程
- store 通过 reducer 创建了初始状态
- view 通过 store.getState() 获取到了 store 中保存的 state，挂载在了自己的状态上
- 用户产生了操作，调用了actions 的方法
- actions 的方法被调用，创建了带有标识性信息的action
- actions 将 action 通过调用 store.dispatch 方法发送到了reducer
- reducer 接收 到 action 并根据标识信息判断之后返回了新的 state
- store 的 state 被 reducer 更新为新的 state 的时候，store.subscribe 方法里的回调函数会执行，此时就可以通知 view 去重新获取 state
