2.归纳.md 1.9 KB

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 代表了定义的执行类型和传参