vite+react+ts如何集成redux状态管理工具，实现持久化缓存

1.安装插件

这里的redux-persist--进行数据的持久化缓存，确保页面刷新数据不会丢失

yarn add react-redux@^9.2.0 redux-persist@^6.0.0 @reduxjs/toolkit@^2.5.1

2.创建仓库文件夹

在项目的src文件夹下创建名为store的文件夹，里面的具体文件如下

features文件夹对应文件如下

features文件夹中存放对应的需要进行状态管理的数据

couterSlice.ts

这里是一个简单的计数器的加减,赋值,清零的一个测试仓库

createSlice中包含的字段

initialState存储的字段

reducers对应useDispatch的分发行为

name仓库的唯一标识

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import type { RootState } from "../store";

// 为 slice state 定义一个类型
interface CounterState {
  value: number;
}

// 使用该类型定义初始 state
const initialState: CounterState = {
  value: 0,
};

export const counterSlice = createSlice({
  name: "counter",
  // `createSlice` 将从 `initialState` 参数推断 state 类型
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    // 使用 PayloadAction 类型声明 `action.payload` 的内容，用于登录，注册等传入具体的参数
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
    //清零
    emptyCount: (state, action: PayloadAction<number>) => {
      state.value = action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount, emptyCount } =
  counterSlice.actions;
// 选择器等其他代码可以使用导入的 `RootState` 类型
export const selectCount = (state: RootState) => state.counter.value;

export default counterSlice.reducer;

user.ts

存储用户信息以及模拟登录token的reducer

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import type { RootState } from "../store";
import {
  getToken,
  setToken,
  getLocal,
  setLocal,
  removeToken,
  removeLocal,
} from "@/utils/token";
import { Local } from "@/enums/Local";

interface UserState {
  token: string | undefined | null;
  username: string | undefined | null;
}

const initialState: UserState = {
  token: getToken() || undefined,
  username: getLocal(Local.USER_INFO)?.username || undefined,
};

export const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    setInfo: (state, action: PayloadAction<UserState>) => {
      state.token = action.payload.token;
      state.username = action.payload.username;

      setToken(action.payload.token);
      setLocal(Local.USER_INFO, { username: action.payload.username });
    },
    remove: (state) => {
      state.token = undefined;
      state.username = undefined;
      removeToken();
      removeLocal(Local.USER_INFO);
    },
  },
});

export const { setInfo, remove } = userSlice.actions;
// 选择器等其他代码可以使用导入的 `RootState` 类型
export const selectUser = (state: RootState) => state.user;

export default userSlice.reducer;

user.ts文件夹下使用了一些方法，补充如下

utils文件夹下的token.ts文件 以及enums文件夹下的Loacl文件如下

import { Local } from "@/enums/Local";
/**
 * @Description: 生成一个随机token
 * @Date: 2024-11-20 17:14:19
 */
export function generateToken(length: number) {
  const characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  let token = "";
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * characters.length);
    token += characters[randomIndex];
  }
  return token;
}

/**
 * @Description: 将token存储到localStorage中
 * @Date: 2024-11-20 17:15:12
 */
export function setToken(token: string) {
  const expireTime = new Date().getTime() + 24 * 60 * 60 * 1000; // 设置当前时间加上24小时为过期时间
  const data = {
    token: token,
    expire: expireTime,
  };
  localStorage.setItem("token", JSON.stringify(data));
}

/**
 * @Description: 从localStorage中获取token
 * @Date: 2024-11-20 17:15:42
 */
export function getToken() {
  const dataString = localStorage.getItem("token");
  if (dataString) {
    const data = JSON.parse(dataString);
    const currentTime = new Date().getTime();

    if (currentTime > data.expire) {
      // 如果过期，则删除token
      removeToken();
      return null; // token已过期，返回null
    }

    return data.token; // 返回有效的token
  }
  return null; // 如果没有token，返回null
}

/**
 * @Description: 将localStorage中的token删除
 * @Date: 2024-11-20 17:16:02
 */
export function removeToken() {
  localStorage.removeItem("token"); // 删除token
}

/**
 * @Description: 设置本地存储
 * @Date: 2024-12-05 14:16:45
 */
export function setLocal(key: Local, value: any) {
  localStorage.setItem(key, JSON.stringify(value));
}

/**
 * @Description: 获取本地存储
 * @Date: 2024-12-05 14:19:02
 */
export function getLocal(key: Local) {
  const dataString = localStorage.getItem(key);
  if (dataString) {
    console.log(JSON.parse(dataString));
    
    return JSON.parse(dataString);
  } else {
    return null;
  }
}

/**
 * @Description: 清除本地存储
 * @Date: 2024-12-05 14:19:48
 */
export function removeLocal(key: Local) {
  localStorage.removeItem(key);
}

export enum Local {
  USER_INFO = "USER_INFO",
  REDIRECT_PATH = "redirectPath",
}

hook.d.ts

定义这个声明文件，允许将它们导入到任何需要使用的 hooks 的组件文件中，并避免潜在的循环导入的依赖问题。

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'

// 在整个应用程序中使用，而不是简单的 `useDispatch` 和 `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

store.ts仓库入口文件如下

使用persistConfig进行持久化配置,root为存储到本地的名称，没有特别的要求,whiteList白名单，存放的是需要持久化存储的仓库blackList则相反

import { configureStore } from "@reduxjs/toolkit";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage"; // 默认使用 localStorage
import counterReducer from "./features/couterSlice";
import userReducer from "./features/user";
// ...

// 持久化配置
const persistConfig = {
  key: "root", // 存储的键名
  storage, // 存储方式
  whitelist: ["user"], // 需要持久化的reducer
  blacklist: ["counter"], // 不需要持久化的reducer
};

const persistedReducer = persistReducer(persistConfig, userReducer);

const store = configureStore({
  reducer: {
    counter: counterReducer,
    user: persistedReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // 忽略 redux-persist 的持久化 action
        ignoredActions: ["persist/PERSIST", "persist/REHYDRATE"],
      },
    }),
});

const persistor = persistStore(store);

// 从 store 本身推断出 `RootState` 和 `AppDispatch` 类型
export type RootState = ReturnType<typeof store.getState>;
// 推断出类型: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

export { store, persistor };

在入口文件main.tsx引入store.ts并配置

采取provider上下文的方式实现 数据的传输 使用PersistGate组件对白名单中的reducer进行持久化存储

import { createRoot } from "react-dom/client";
import "./index.css";
import { HashRouter } from "react-router-dom";
import App from "./App.tsx";
import { store, persistor } from "./store/store.ts";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";

createRoot(document.getElementById("root")!).render(
  <HashRouter>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </HashRouter>
);

3.使用仓库

通过useSelector从redux的state中读取对应的值

useSelector((state: any) => state?.'仓库名称'.value)

useDispatch ，用于在组件中分发操作（action），从而更新 Redux store 中的数据。

从对应的reducer中引入对应的分发操作,因为reduxjs/toolkit的特性，再进行传参赋值的时候，不必要再像老版本一样{...旧值,新值}

传参赋值参考emptyCount这一函数等

使用conuterSlice仓库

import { useSelector, useDispatch } from "react-redux";
import {
  decrement,
  increment,
  incrementByAmount,
  emptyCount,
} from "@/store/features/couterSlice";
import { setInfo, remove } from "@/store/features/user";
import { Button } from "antd";

function DefaultPage() {
  const count = useSelector((state: any) => state?.counter.value);
  const userInfo = useSelector((state: any) => state?.user);
  const dispatch = useDispatch();

  return (
    <>
      <div>
        <div>
          <Button
            className="mr-4"
            onClick={() => dispatch(emptyCount(0))}
            type="primary"
          >
            清零
          </Button>
          <Button type="primary" onClick={() => dispatch(increment())}>
            increment增加
          </Button>
          <div className="mt-2 mb-2">{count}</div>
          <Button
            type="primary"
            className="mr-4"
            onClick={() => dispatch(decrement())}
          >
            Decrement减少
          </Button>
          <Button
            type="primary"
            onClick={() => dispatch(incrementByAmount(count > 0 ? count : 1))}
          >
            增加指定值
          </Button>
         
        </div>
      </div>
    </>
  );
}

export default DefaultPage;

补充：结合user.ts这一reducer实现鉴权登录。

这里需要封装一个鉴权组件判断是否登录,给需要鉴权登录的组件嵌套上即可

import React from "react";
import { Local } from "@/enums/Local";
import { setLocal } from "@/utils/token";
import { Navigate, useLocation, useNavigate } from "react-router-dom";
import { useSelector } from "react-redux"; // 假设你使用 Redux

// 这是一个路由守卫组件，用于检查用户是否登录
const RequireAuth = ({ children }: { children: React.ReactNode }) => {

  const location = useLocation();
  const userInfo = useSelector((state: any) => state?.user);
  // 如果用户未登录，则保存当前路径并重定向到登录页面
  if (!userInfo?.token) {
    setLocal(Local.REDIRECT_PATH, location.pathname);
    return <Navigate to="/login" />;
  }

  return children;
};

export default RequireAuth;

登录页面

这里在用户名密码都正确后 采用useDispatch调用reducer中的serInfo方法 将用户名和token存储到storage 和 仓库中去，登录成功后重定向到第一次访问的默认页

import { Button, Checkbox, Form, Input, message } from "antd";
import { Local } from "@/enums/Local";
import { generateToken, getLocal, removeLocal } from "@/utils/token";
import { setInfo } from "@/store/features/user";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import type { FormProps } from "antd";
import "./index.less";

function Login() {
  const [messageApi, contextHolder] = message.useMessage();
  const myCleft = "c_left";
  const myCright = "c_right";
    
  const userList = [
  {
    userName: "admin",
    password: "123456",
  },
  {
    userName: "student",
    password: "123456",
  },
];


  type FieldType = {
    username?: string;
    password?: string;
  };

  const dispatch = useDispatch();
  const navigate = useNavigate();

  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    console.log("Success:", values);
    checkInfo(values);
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };

  //判断用户名密码是否正确
  const checkInfo = (value: FieldType) => {
    //用户名
    const userIndex = userList.findIndex(
      (item) => item.userName == value.username
    );
    if (userIndex == -1) {
      messageApi.open({
        type: "error",
        content: "用户名错误",
        duration: 1,
      });
      return;
    } else {
      const passwordIndex = userList.findIndex(
        (item) => item.password == value.password
      );
      if (passwordIndex == -1) {
        messageApi.open({
          type: "error",
          content: "密码错误",
          duration: 1,
        });
      } else {
        messageApi
          .open({
            type: "loading",
            content: "登录中",
            duration: 1.5,
          })
          .then(() => {
            messageApi
              .open({
                type: "success",
                content: "登录成功",
                duration: 1,
              })
              .then(() => {
                handleLogin(value);
              });
          });
      }
    }
  };

  //登录
  const handleLogin = (value: FieldType) => {
    const token = generateToken(16);
    dispatch(setInfo({ token, username: value.username }));
    // 登录成功后
    const redirectPath = getLocal(Local.REDIRECT_PATH) || "/";
    removeLocal(Local.REDIRECT_PATH); // 清除路径
    navigate(redirectPath, { replace: true }); // 重定向
  };

  return (
    <>
      {contextHolder}
      <div className="w-full h-full " style={{ background: "lightgray" }}>
        <div className="w-full h-full flex justify-center items-center">
          <div className="l_container">
            <div className="c_left">
              <div className={`${myCleft}-title`}>欢迎您的到来！</div>
              <div className={`${myCleft}-title`}>WELCOME !</div>
              <div className={`${myCleft}-desc`}>
                请在右侧输入账号密码，登录您的账号
              </div>
            </div>
            <div className="c_right">
              <div className={`${myCright}-title`}>请输入信息！</div>
              <div className={`${myCright}-form`}>
                <Form
                  name="basic"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 16 }}
                  style={{ maxWidth: 600 }}
                  initialValues={{ remember: true }}
                  onFinish={onFinish}
                  onFinishFailed={onFinishFailed}
                  autoComplete="off"
                >
                  <Form.Item<FieldType>
                    label="用户名："
                    name="username"
                    rules={[
                      {
                        required: true,
                        message: "请输入用户名称!",
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item<FieldType>
                    label="密码："
                    name="password"
                    rules={[
                      {
                        required: true,
                        message: "请输入密码!",
                      },
                    ]}
                  >
                    <Input.Password />
                  </Form.Item>

                  <Form.Item label={null}>
                    <Button
                      className="sub_btn"
                      type="primary"
                      size="large"
                      htmlType="submit"
                    >
                      登录
                    </Button>
                  </Form.Item>
                </Form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default Login;

参考git地址如下:

myReactRouterOnlyRead: 仅供参考