# redux

## redux

\[TOC]

### Redux 介绍？

> redux是js状态容器，提供可预测化的状态管理

它认为：

* web应用是一个状态机，视图与状态是一一对应的关系
* 所有的状态，保存在一个对象里面

设计思想：

* 每个state变化可预测 
* 动作与状态统一管理

### Redux与 MobX的区别？

* 【代码量】 redux>mobx
  * redux： 需要定义一堆的action, dispatch,reducer
  * mobx： store和改变的方法
* 【开发难度】 redux>mobx
  * mobx：使用面向对象的编程思维，相对简单
  * redux：比较复杂，函数式编程思维，同时需要借助一系列的中间件来处理异步和副使用
* 【调试难度】 mobx>redux
  * redux：状态不可变，返回一个新的状态，同时使用纯函数；,redux 提供时间回溯的开发工具，同时纯函数以及更少的抽象，让调试变得更加容易
    * mobx：中状态可变，可对其直接修改，mobx中有更多的抽象和封装，调试比较困难，同时结果难预测
* 【store数】
* * redux：单个store
    * mobx: 多个store
* 【功能性】redux> mobx
* * redux: 可回溯状态，时间旅行，适合：画板应用，表格应用，很多时候需要撤销，重做等操作
    * mobx: 直接修改源数据

适用场景总结：

* mobx： 简单项目，适合数据不复杂的应用
* redux：大型项目，有回溯需求

### redux的实现流程？

* 用户（通过view）发出Action,发出方式是调用dispatch方法；
* Store自动调用 Reducer ,传入两个参数，当前state,收到的Action，Reducer 返回新的 State
* state更新后，store就会调用监听函数， 根据state触发重新渲染，更新view

> 整个流程中数据都是单向流动的，这种方式保证了流程的清晰

几个核心概念：

* **Store** :数据中心，整个应用只能有一个store
* **State**: store对象包含的所有数据
* **Action**: 用户触发的行为名称（通过action再去触发state的改变，最终响应view的改变）
* Action Creator: 生成action的函数，可生成多种action
* **Reducer**: store收到action后，处理state的函数，叫到reducer，接收两个参数：action ，和当前state；返回值： 新的state
* Dispatch: view发出action的唯一方法

### Redux与Vuex区别?

相同点：

* 都是做状态管理库
* 都是从Flux中衍生来的（单一数据源，单向数据流）

不同点：

* 【适用范围】redux是一个泛用的实现，也可以用在vue中，但是契合度不如vuex

多个vuex中引入module可以把store划分成多个单元 ；

### redux常用的中间件？

* redux-logger   ： 日志中间件，输出触发的action，和经过reducer处理前后的state值；
* **redux-thunk**：处理异步
  * 优点：
    * **体积小**：实现方式简单，只有不到20行代码
    * **使用简单**：没有引入像redux-sage 或者 redux-observable 额外范式，上手简单
  * 缺点：
    * **耦合严重**：异步操作与redux的action 偶合在一起，不方便管理
    * **功能弱**：常用的功能需要自己封装
* **redux-saga**：处理异步
  * **异步解耦**：异步操作被转移到单独的saga.js中，不再掺杂在action.js 或 component.js中
  * **异常处理**：受益于generator function的 saga实现，代码异常/请求失败 都可以直接通过 try/catch语法直接捕获处理
  * **功能强大**：提供了大量的saga辅助函数和 Effect 创建器 供开发者使用
  * **灵活**：可以将多个saga 串行/并行组合起来，形成一个非常实用的异步flow
  * **易测试**：提供了各种case的测试方案，包括 mock task ,分支覆盖等
* redux-promise：处理异步
* redux-observable
  * -优点
    * -功能最强：背靠 rxjs这个强大的响应式编程库，几乎做任何你能想到的异步处理
  * 缺点
    * -学习成功奇高：如果不会rxjs，则需要额外学习两个复杂的库

### redux中间件是什么，中间件的执行过程？

> redux提供了类似后端experss中间件的概念，本质目地是提供第三方插件的模式

中间件的使用（改变数据流）：

* 未使用redux:   action-> reducer
* 使用redux: 自定义拦截，变成 action->middlewares->reducer

实现如异步action,action过滤，日志输出，异常报告等功能；

使用： redux提供的一个方法： applyMiddleware，可应用多个中间件；

### redux中的connect有什么作用？

redux中的connect方法主要是把UI组件生成容器组件，connect的意思就是就是把两个连接起来；

```
import {connect} from "react-redux"

const VisibleTodoList=connet(

​    mapStateToProps,   //参数

​    mapDispatchToProps   //处理方法

)(TodoList)
```

### 解释一下 Flux思想？

![flux](https://user-gold-cdn.xitu.io/2019/3/25/169b42c4d3813a3e?imageView2/0/w/1280/h/960/format/webp/ignore-error/1)

Flux 是一种强制单向数据流的架构模式。它控制派生数据，并使用具有所有数据权限的中心 store 实现多个组件之间的通信。整个应用中的数据更新必须只能在此处进行。 Flux 为应用提供稳定性并减少运行时的错误。

### Redux遵循的特点？

* **单一数据来源**："整个数据存储在store当中，方便调试和检查应用程序
* **状态只读**：改变状态的唯一方法是云触发一个动作。
* **使用纯函数更改**：纯函数是那些返回值仅取决于其参数的函数

### Redux与flux有何不同？

> Redux是flux思想（单向数据流，store唯一数据源）的一种实现，同时在其基础上做了改进

区别：

* **Store数**
* * Redux: 单个
  * Flux： 多个
* **更新位置不同**
  * Redux:
  * Flux:

### 在 React 中如何处理事件

为了解决跨浏览器的兼容性问题，`SyntheticEvent` 实例将被传递给你的事件处理函数，`SyntheticEvent`是 React 跨浏览器的浏览器原生事件包装器，它还拥有和浏览器原生事件相同的接口，包括 `stopPropagation()` 和 `preventDefault()`。

比较有趣的是，React 实际上并不将事件附加到子节点本身。React 使用单个事件侦听器侦听顶层的所有事件。这对性能有好处，也意味着 React 在更新 DOM 时不需要跟踪事件监听器。

## react-redux

### react-redux的实现原理？

react-redux 提供两个api;

* **Provider**: 从最外部封装整个应用，并向connect模块传递store;  (父子组件)
* **connect**: （高阶组件）负责连接react和redux
* * **包装原组件**：将state,action通过props的方式传入到原组件内部
  * **监听store tree变化**：使其包装的原组件可以响应state的变化

![img](https://xiaomuzhu-image.oss-cn-beijing.aliyuncs.com/710f0a9f0a8e6a320f55fa0ca795a3c7.png)

### react-redux的使用流程?

* 创建store：（定义state,reducer）  （使用Redux中的createStore api创建）
* 封装应用：通过ReactRedux中的Provider方法把store传递给connect模块
* connect