React中使用redux toolkit状态库

简介：前言react项目中经常会用到全局状态库，目前个人常用的是 Redux Toolkit。下面具体来看怎么使用 Redux Toolkit。正文安装pnpm install @reduxjs/toolk…

前言

react项目中经常会用到全局状态库，目前个人常用的是 Redux Toolkit。下面具体来看怎么使用 Redux Toolkit。

正文

安装

pnpm install @reduxjs/toolkit react-redux

创建slice

//src/store/appSlice.js

const { createSlice } = require("@reduxjs/toolkit");

export const SimulationExecStatus = {
  None: 0,
  Start: 1,
  Executing: 2,
  Stop: 3,
  Pause: 4,
  Pending: 5,
  Error: 100,
};

const appSlice = createSlice({
  name: "app",
  initialState: {
    simulationExecStatus: SimulationExecStatus.Error,
  },
  reducers: {
    getSimulationExecStatus(state, action) {
      return state.simulationExecStatus;
    },
    setSimulationExecStatus(state, action) {
      state.simulationExecStatus = action.payload;
    },
  },
});

export const { getSimulationExecStatus, setSimulationExecStatus } =
  appSlice.actions;
export default appSlice.reducer;

创建store

//src/store/index.js

import { configureStore } from "@reduxjs/toolkit";

import appReducer from "./appSlice";

export const store = configureStore({
  reducer: {
    app: appReducer,
  },
});

引用store

import { createRoot } from "react-dom/client";
import { RouterProvider } from "react-router";
import { routes } from "@/routes";

import "@/assets/css/global.less";
import { Provider } from "react-redux";
import { store } from "./store";

createRoot(document.getElementById("root")).render(
  <Provider store={store}>
    <RouterProvider router={routes} />
  </Provider>
);

使用

设置值

const dispatch = useDispatch();
dispatch(setSimulationExecStatus(SimulationExecStatus.Pending));

获取值

 const { simulationExecStatus } = useSelector((state) => state.app);

最后

个人平时比较常用的就是当作一个全局变量。