## 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 下