# Redux不完全指南

> [官方文档](https://www.reduxjs.cn/introduction/getting-started/)

Redux是基于React的一个统一状态管理库。可以更容易实现组件间的状态共享问题，同时可以通过React DevTools工具记录并调试。

## 1. 安装

```shell
npm i redux @reduxjs/toolkit;
```

## 2. 基础使用

1. 安装必要的库
2. 在`src`文件夹创建名为`store`文件夹，并在里边新增一个`index`模块。
3. 在`index`模块中定义store实例，并默认导出
4. 在项目的入口模块中，将store实例注入到整个应用程序中。需要从`react-redux`中引入`Provider`组件，通过该组件将store注入进去

### 2.1 核心概念

1. State：与Vuex一样，用来统一存储所有的状态
2. Action：是一个对象，里边会包含两个属性：
   - type: 必需的。通过type决定如何修改状态。
   - payload: 可选的。用于传递额外参数。
3. Reducer：可以是一个函数，定义修改状态的方法以及返回新状态；也可以是一个对象，里边包含多个reducer函数，通过`combineReducers`函数合并成一个大的reducer函数。每一个reducer函数接收两个参数
   - state：定义初始状态
   - action：action对象。

### 2.2 组件引入状态

> 现在React已经进入Hook时代，因此 可以通过 `useSelector hook`来从整个状态对象选出您所需的状态。

`let selected = useSelector(selector)`

- selector：是一个选择状态的函数。接收一个参数，为store中的整个状态对象，并返回您要 的状态值即可。
- useSelector返回值 就是 selector函数的返回值



### 2.3 状态修改

> Redux中修改状态的唯一方式：dipatch一个action对象。reducer函数在执行时根据不同的action.type完成状态修改 并 返回新状态。

通过 react-redux库中的`useDispath hook`来获取 到 dispath 函数。在调用时传入一个action对象即可完成状态修改.

```jsx
const dispatch = useDispatch()
dispatch({type: '', payload: 10})
```

## 3. slice的使用

在 RTK 包中引入`createSlice`函数来创建一个slice对象。

`const slice = createSlice(options)`	其中options对象包含以下常用属性

- name：给action对象的type属性指定命名空间

- initialState：指定状态的初始值

- reducers：在该对象中定义各种修改状态的reducer函数

  - reducer函数都可以接收两个参数：state整个slice下的状态对象 以及 action对象
  - slice中reducer函数都可以直接通过state修改状态，无需在返回新状态