# Redux

笔记整理自这个视频，概念讲得挺清楚的，但是后面都是用class component举例

bilibili：[链接](https://www.bilibili.com/video/BV1oE411V7RW/?spm_id_from=333.337.search-card.all.click\&vd_source=c93e00647ae8081b67b2f5a6293e8a7e)

## 1. Redux概述

### 什么是Redux

Redux是一个用于JavaScript 状态容器，提供可与预测化的状态管理。 Redux可以让你构建一致化的应用，运行于不同的环境(客户端、服务器、原生应用)，并且易于测试。 Redux除了和React一起使用外，还支持其它界面库，而且它体小精悍(只有2kB)

### Redux的设计初衷

随着JavaScript单页面发开日趋复杂，JavaScript需要管理更多的state(状态)，这些 state 可能包括服务器响应、缓存数据、本地生成未持久化到服务器的数据，也包括UI状态等。 管理不断变化的state非常麻烦，如果一个 model的变化会引起另一个 model变化，那么当view 变化时，就可能引起对应model以及另一个 model的变化，依次可能会引起另一个 view 的变化。所以就会产生混乱, 而Redux 就是为了去解决这个问题。

### Redux三大核心

* 单一数据源

整个应用的`state`被存储在一棵`object tree`中，并且这个`object tree`只存在于唯一一个store中

![截屏2023-06-11 上午1.16.16](https://raw.githubusercontent.com/clairyitinggu/images/main/imgimg202306110116607.png)

* State是只读的

唯一改变`state`的方法就是触发 `action`，`action`是一个用于描述已发生事件的普通对象。

这样确保了视图和网络请求都不能直接去修改state，相反，它们只能表达想要修改的意图，因为所有的修改都被集中化处理，并且严格按照一个接一个的顺序执行

```
store.dispatch({type: 'COMPLETE_TODO',index: 1})
```

* 使用纯函数来执行修改
  * 为了描述 `action` 如何改变 `state tree`，你需要去编写`reducers`
  * Reducers只是一些纯函数，它接收先前的state和action，并且返回新的state。
  * 可以复用、可以控制顺序、传入附加参数

### 总结

1. redux是一个JavaScript容器，用于进行全局的状态管理
2. redux三大核心

* 单一数据源头
* State是只读的
* 使用纯函数来执行修改

![截屏2023-06-11 上午1.26.09](https://raw.githubusercontent.com/clairyitinggu/images/main/img202306110126245.png)

## 2. Redux 组成部分

### State-状态

就是我们传递的数据， 那么我们在用React开发项目的时候，大致可以把State分为三类

* DomainData:可以理解成为服务器端的数据，比如:获取用户的信息，商品的列表等等
* UI State:决定当前UI决定展示的状态，比如:弹框的显示隐藏，受控组件等等
* App State: App级别的状态，比如:当前是否请求loading，当前路由信息等可能被多个和组件去使用的到的状态

### Action-事件

`Action`是把数据从应用传到`store` 的载体，它是`store`数据的唯一来源，一般来说，我们可以通过 `store.dispatch()`将`action`传递给`store`

![截屏2023-06-11 上午1.34.40](https://raw.githubusercontent.com/clairyitinggu/images/main/imgimg202306110134235.png)

### Action特点

* Action 的本质就是一个javaScript的普通对象
* Action 对象内部必须要有一个type属性来表示要执行的动作
* 多数情况下，这个type 会被定义成字符串常量
* 除了type 字段之外，action的结构随意进行定义
* 而我们在项目中，更多的喜欢用action创建函数(就是创建action的地方)
* 只是描述了有事情要发生，并没有描述如何去更新state

```
//action
{
	type: '字符串常量',
	info: {...},
	isLoading: true
	...
}
```

```
//action创建函数
function addAction(params){
	//返回一个action对象
	return {
		type: 'add',
		...params
	}
}
```

### Reducer

Reducer本质就是一个函数，它用来响应发送过来的actions，然后经过处理，把state发送给Store的

注意:在Reducer函数中，需要return返回值，这样Store才能接收到数据. 函数会接收两个参数，第一个参数是初始化state，第二个参数是action

```
const initState = {...};
rootReducer=  (state = initState, action) => {... return {...}};
```

![截屏2023-06-11 上午1.39.35](https://raw.githubusercontent.com/clairyitinggu/images/main/img202306110139826.png)

### Store

Store就是把action与reducer联系到一起的对象 主要职责:

* 维持应用的 state
* 提供 getState()方法获取state
* 提供 dispatch()方法发送action
* 通过 subscribe()来注册监听
* 通过 subscribe()返回值来注销监听

```
import { ceateStore } from "redux";
const store = createStore(传递reducer);
```

### 总结

State状态

* DomainState:服务器返回的State
* UI State:关于当前组件的State
* APP State:全局的State

Action 事件

* 本质就是一个JS对象
* 必须要包含type属性
* 只是描述了有事情要发生，并没有描述如何去更新state

Reducer

* 本质就是函数
* 响应发送过来的 action
* 函数接收两个参数，第一个是初始化state，第二个是发送过来的action
* 必须要有 return返回值

Store

* 用来把action和reducer关联到一起的
* 通过createStore来构建store
* 通过subscribe来注册监听
* 通过dispatch来发送action

## Redux练习

bilibili：[链接](https://www.bilibili.com/video/BV12K4y1R7Ut/?spm_id_from=333.337.search-card.all.click\&vd_source=c93e00647ae8081b67b2f5a6293e8a7e)

找的前端小夏老师的讲解，用的是function components。

看P2：redux的基本操作，以下是笔记

## 目标：

redux的基本操作流程要烂熟于心。比如：如何获取状态？如何更新状态？什么是action？如何创建store。

#### 什么是Store？

store是存放数据的仓库

```
const store = createStore(reducer);
```

#### 什么是State？

仓库中存储的数据。如何获取state的快照？

```
store.getState()
```

#### 什么是Action？

action就是一个对象

```
const action = {
    type: ‘ADD_ONE’,
    num: 1
}
```

#### 什么是dispatch？

唯一能够更改当前state的方法

```
store.dispatch(action)
```

#### 什么是reducer？

reducer是一个函数，用来返回一个新的state。

```
const reducer = (state = 10, action)=>{
    switch(action.type){
        case ‘ADD_ONE’:
            return state + action.num
    }
}
```
