1.安装包

npm install @reduxjs/toolkit react-redux -S

2.看看目录结构

3.store的user代码

import { createSlice } from "@reduxjs/toolkit";// 初始状态
let initialState = {count: 1,users: [{name: "zhangzhang",pass: "123456",},],infor: {infor_num: 20,infor_type: "cosplay",infor_name: "GAT5",},
};// 改变状态的方法
let reducers = {changeCount(state, { payload }) {state.count = payload;},
};// 创建为小仓库
const stateSlice = createSlice({name: "user",initialState,reducers,
});// 导出改变状态的方法
export const { changeCount } = stateSlice.actions;
// 导出当前整体仓库
export default stateSlice.reducer;

4.store的index代码

 

// 导入创建库的钩子
import { configureStore } from "@reduxjs/toolkit";// 引入小仓库
import user from "./user";// 合为一个大仓库
const store = configureStore({// 每个reducer代表一个模块的状态管理器reducer: {user,},
});export default store;

使用

挂到indexjs上

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./store";const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(// BrowserRouter 是history模式<BrowserRouter>{/* // Provider主要配合redux，进行store数据的传递 */}<Provider store={store}><App /></Provider></BrowserRouter>
);reportWebVitals();

在代码里面进行取值使用方法，pages

// 使用方法的话，用从具体的库引用出来
import { changeCount } from "../../store/user"
// useDispatch是进行方法的使用，useSelector是进行取值
import { useDispatch,useSelector } from "react-redux"export default function Home() {const dispatch = useDispatch();let selector = useSelector(store => store.user.count);console.log(selector, '==')// dispatch(changeCount(2))return (<div>hello word</div>)
}