Redux 框架简介

Redux 框架

2013 年 Facebook 提出了 Flux 架构的思想，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构

React 与 Redux的区别就相当于 Java 和 JavaScript 的区别，完全是两种不同的东西，只不过名字比较像

Redux的设计思想：

• React 只是 DOM 的一个抽象层，并不是web应用的完整解决方案。代码结构和组件间的通信，他没有涉及
• web应用是一个状态机，视图与状态是一一对应的
• 所以的状态，保存在一个对象里面（唯一数据源）、
• 目的：实现集中式状态管理

---

• action：动作的对象，有两个属性

type：标识属性，值为字符串，唯一，必选参数
data：数据属性，值类型任意，可选参数

• reducer：用于初始化状态和加工状态

加工时根据旧的state值和传过来的action，生成新的state的值，是一个纯函数

• store：将state、action、reducer联系在一起的对象，相当于一个仓库，可以存放state的状态值

1. 创建store对象：createStore(reducer);
2. 获取state的值：getState
3. 派发动作：dispatch(action)
4. 注册监听：subscribe() 当产生新的 state 时，自动调用

---

Redux 的流程

5. store 通过 reducer 创建了初始状态
6. view 通过 store.getState() 获取到了 store 中保存的 state，挂载在了自己的状态上
7. 用户产生了操作，调用了actions 的方法
8. actions 的方法被调用，创建了带有标识性信息的action
9. actions 将 action 通过调用 store.dispatch 方法发送到了reducer
10. reducer 接收 到 action 并根据标识信息判断之后返回了新的 state
11. store 的 state 被 reducer 更新为新的 state 的时候，store.subscribe 方法里的回调函数会执行，此时就可以通知 view 去重新获取 state

---

Redux 的三大原则：

• 单一数据源
• State 是只读的
• 数据的改变必须通过纯函数完成

Redux 安装

• 安装稳定版：

npm install --save redux

• 安装 React 绑定库和开发者工具。

npm install --save react-redux
npm install --save-dev redux-devtools

Redux 使用情况

• 如果你不知道是否需要 Redux ，那就是不需要它
• 只有遇到 React 实在解决不了的问题，你才需要Redux

---

• 简单说，如果你的UI层非常简单，没有很多互动，Redux就是不必要的，用了反而增加复杂性
• 比如：
• 用户的使用方式非常简单
• 用户之间没有协作
• 不需要与服务器大量交互，也没有使用WebSocket
• 视图层（View）只从单一来源获取数据

---

需要使用Redux的项目：

• 用户的使用方式复杂
• 不同身份的用户有不同的使用方式（比如普通用户和管理员）
• 多个用户之间可以协作
• 与服务器大量交互，或者使用了WebSocket
• View 要从多个来源获取数据

---

从组件层面考虑，什么样子需要Redux：

• 某个组件的状态，需要共享
• 某个状态需要在任何地方都可以拿到
• 一个组件需要改变全局状态
• 一个组件需要改变另一个组件的状态

---