VIP20/20_React.js_VIP22/redux入坑.md

Redux不完全指南

官方文档

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

1. 安装

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对象即可完成状态修改.

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修改状态，无需在返回新状态