状态管理redux-toolkit

react 状态管理

状态管理库： redux redux-toolkit mobx dva zustand

跨页面的通信 公共数据 进行管理，将数据放到了 window下 window.store = {xxx:value,xxx1:value}

解决状态管理的数据丢失问题： 数据持久化（将window.store ）所有数据放到 本地存储里面

场景： 只要有 跨层级的组件进行通信 （不能使用父子组件通信 props ）

本地存储缺点： 存储空间有限 5M 变化不可监测, 刷新页面数据不会丢失

1.安装 redux-toolkit

yarn add @reduxjs/toolkit react-redux
或 
npm i @reduxjs/toolkit react-redux
​

2.定义状态管理库 主模块文件 src/store/index.jsx

//通过redux tookit 内置的方法创建一个 实例对象 并暴露出去
​
​
import { configureStore } from "@reduxjs/toolkit";
import userSlice from './userSlice'
​
//当前我使用了哪些子模块
const store = configureStore({
    // 合并多个Slice
  reducer: {
    userSlice: userSlice,
  },
});
// 暴露实例对象
export default store;

3.创建 子模块文件 实现 状态的定义 和修改状态方法的定义

src/store/userSlice.jsx

根据项目大小需要进行创建 ，比如说 所有的用户模块相关的数据 都放到 一个jsx文件中进行管理 userSlice.jsx

比如说 所有的 商品模块相关的数据 都放到一个 jsx中进行管理 goodsSlice.jsx

1.定义所有的 状态数据 的初始值

2.创建好 所有的 修改这个状态数据的 方法

import {createSlice} from '@reduxjs/toolkit'
//定义了 数据和初始值 以及修改的方法
const userSlice = createSlice({
    // 模块名
    name:'user',
    // 数据定义
    initialState:{
        users:[{name:'张三',age:40}],
        userPwd:""
    },
​
    // 操作数据方法
    reducers:{
        //获取数据并解构使用 payload
        add(state,{payload}){
            state.users.push(payload)
        },
        setUserPwd(state,{payload}){
            state.userPwd = payload
        }
    }
​
})
​
​
//将装有数据和 修改方法的实力对象（子模块对象）暴露给 自己的主模块进行使用
export default userSlice.reducer;
​
//将方法暴露给页面进行使用
// 暴露操作数据的方法
export const {add,setUserPwd} = userSlice.actions;
​
​

4.在整个项目根组件 导入 全局注入 整个状态管理库main.jsx`

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import './index.scss'
import zhCN from 'antd/locale/zh_CN';
import {ConfigProvider } from 'antd'
import 'dayjs/locale/zh-cn';
​
// 全局注入store  redux toolkit
import {Provider} from 'react-redux'
import store from './store/index'
​
ReactDOM.createRoot(document.getElementById("root")).render(
    
    <ConfigProvider locale={zhCN}>
        <Provider store={store}>
        <App />
        </Provider>
  </ConfigProvider>
);
​

5.在需要更新状态的地方 调用修改状态方法

accountEdit

//导入 状态管理库的修改方法
import {setUserPwd} from '../store/userSlice'
import {useDispatch} from 'react-redux'   
//修改数据
const dispatch = useDispatch()
​
//派发 提交修改
dispatch(setUserPwd('新密码'))

6.在需要显示 状态的 地方 获取最新的状态并渲染

import {useSelector} from 'react-redux'   
//获取数据
const {userPwd} = useSelector(store=>store.userSlice)