lovecoding/VIP32 @ 114cc24e0037145e85caad158251d106f659641c

1.官网：https://www.reduxjs.cn/introduction/getting-started

2.Redux:是一个基于 React 的状态管理库，实现跨组件传参

3.安装 Redux:npm install @reduxjs/toolkit react-redux redux

4.Redux 在框架中使用

a.需要在根文件中引入 store 实例 b.在 react-redux 库中引入私有组件 c.使用组件包裹根页面并在组件中绑定 store 实例

5.核心概念

1.State: 与 Vuex 相似，统一存储状态值 2.Action:是一个对象，译为：行为；包含两个字段 a.type 类型，事件相关类型，必传 b.payload 可传参数值选传 3.Reducer:是一个函数，绑定了所定义的修改函数的状态，也可以是一个对象，里面包含多个定义的修改状态，进而合成一个大的 reducer

6.组件引入状态

为了便携开发，采用 hook 方式 useSelector():返回 state 中的状态值 let xxx = useSelector((state) => {return state...})

7.修改方法

采用 dispath 触发 action 行为使用 useDispath():触发 action 所定义的类型方法 let dispath = useDispath() dispatch(方法名())

8.状态管理库 Store

1.从 RTK 中引入创建 store 的方法 configureStore 2.创建 store const store = configureStore({ reducer: { 定义的修改函数状态，... } }) 3.定义修改函数状态方法 4.抛出 store 5.如需使用定义的函数方法需在讲方法单独抛出

9.slice 切片

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

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

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

initialState：指定状态的初始值

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

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

10.异步

Redux原生不支持异步处理机制，需要我们通过一些中间件去完成。好在，Redux Toolkit中内置了Thunk中间件可以完成异步任务处理。因此在UI组件中调用dispatch时，不仅可以传入一个Action对象，还可以传入一个thunk函数，由其处理异步任务有结果后，在dispatch一个action去修改状态。

什么是thunk？

安装命令：npm install thunk 1.可以是普通函数也可以异步函数 2.函数会接收两个参数：

dispatch:触发异步中所调用的函数
getState：读取状态库store中所有的初始值

在store部分：
    export function asyncXXX(dispatch,getState) {
        let state = getState();
        dispatch(同步方法())
    }
在页面部分：
import {asyncXXX} from '路径'

dispatch(asyncXXX);

11.模块化样式

创建： xxx.module.css 使用：import 名字 from '路径' 在标签部分：

< className={名字.xxx}></>

创建 react 项目： 1.npx create-react-app 项目名 2.npm install create-react-app create-react-app 项目名

3.起项目：在当前文件的根目录起项目命令在 package.json 文件夹中 scripts 下

Redux.md 3.1 KB История Директен файл