lovecoding/web0715 @ cc4c3849d45dd452a4974731632e4aa8e178966f

1.官网https://cn.redux.js.org/introduction/getting-started/

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

3.安装命令：npm install/yarn add redux react-redux @reduxjs/toolkit（RTK）

4.Redux 在框架中如何使用

a. 创建store文件夹存放redux文件 b. 需要在根文件中引入store实例 c. 在react-redux库中引入私有组件（Provider） d. 使用组件包裹跟页面并在组件中绑定store实例

5.核心概念

1.state:与vuex相似同一存储数据状态 2.Action:是一个对象译为：行为；两个字段 type:事件相关类型必传 payload:参数选传 3.Reducer函数：是一个函数也可看成一个对象绑定了所有定义的修改函数的状态里面包含了一个或多个定义的修改状态所有可以看成一个大的reducer

6.组件引入状态

采用hook方式 useSelector():返回state中的状态值 const xxx = useSelector((state) => {

return state....

})

7.方法的使用

从xxx.actions中抛出需要使用的方法（方法需解构）在需求页面引入方法通过dispatch出发action行为调用useDispatch()钩子进行触发 const dispatch = useDispatch() 触发：dispatch(方法名())

8.状态管理库 store

1.从RTK中引入创建store的方法：configureStore 2.创建store:

    const store = configureStore({
        reducer:{
            定义修改函数的状态...
        }
    })

3.定义修改函数的状态方法 4.抛出store 5.如果需要使用定义函数的状态方法可以再定义时直接抛出

9.slice切片

1.创建切片：在RTK中引入createSlice函数来创建一个slice对象 2.const xxx = createSlice(options) options对象包含以下属性： name:给action对象的type属性指定命名空间 initialState：指定状态初始值 reducers: 函数可以接受两个参数： state 整个切片下的状态对象 action 代表了定义的执行类型和传参

10.异步

Redux原生机制不支持异步处理，需要通过中间件去完成 RTK中提供了一个内置的中间件thunk(think)去处理异步任务 setTimeout/Promise/async await

11.thunk

1.安装 npm install redux-thunk 2.函数会接收两个参数 dispatch:触发异步回调所调用的函数 getState:读取状态库store中所有的初始值

    在store：
        export function asyncXXX(dispatch,getState) {
            let state = getState();
            dispatch(同步方法())
        }
    在页面：
      引入：import {asyncXXX} from 'url'
      调用：dispatch(asyncXXX)

12.模块化样式

创建：xxx.module.css 引入：import name from 'url' 使用： < className='name.xxx'></>

2.归纳.md 2.6 KB Historie Surový