为什么我的 redux 状态在页面刷新后重置

Question

使用创建了一个状态redux-toolkit，但在我刷新页面或转到另一个页面后，状态立即重置。我已经头疼了四个小时了，再也受不了了。github gists上有代码

也在这里：

index.ts文件：redux 存储的配置

import { configureStore } from "@reduxjs/toolkit";
import authStateSlice from "redux/authStateSlice";
import deviceTypeReducer from "redux/deviceTypeSlice";
import userDataSlice from "redux/userDataSlice";

const store = configureStore({
  reducer: {
    isMobile: deviceTypeReducer,
    isLogin: authStateSlice,
    userData: userDataSlice,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default store;

signin.tsx：我从服务器获取数据并将其放入我的 redux 状态：

import React, { useEffect, useState } from "react";
import { useAppSelector } from "lib";
import { useAppDispatch } from "../../lib/useAppDispatch";
import { userActionState } from "redux/userDataSlice";

export const SignIn: React.FC = () => {
  const { isUser } = useAppSelector((state) => state.userData);
  console.log("IS USER: ", isUser);
  const dispatch = useAppDispatch();

  const loginHandler = async () => {
    try {
      const response = await fetch(
        "...link to api",
        {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ email, password }),
        }
      );
      if (!response.ok) {
        const err = await response.json();
        throw new Error(err)
      }
      const data = await response.json();

      dispatch(userActionState({ isUser: true }));
    } catch (error) {
        throw new Error(err)
    }
  };

  return (
    <div>
      ...
    </div>
  );
};

userDataSlice.tsx：我的用户的数据切片：

import { createSlice } from "@reduxjs/toolkit";
import { ResponseLoginDataType } from "@types";

const initialState: {
  isUser: boolean | undefined;
} = {
  isUser: undefined,
};

const userDataSlice = createSlice({
  name: "isUser",
  initialState,
  reducers: {
    userActionState(
      state,
      action: {
        payload: {
          isUser: boolean | undefined;
        };
      }
    ) {
      state.isUser = action.payload.isUser;
    },
  },
});

export default userDataSlice.reducer;
export const { userActionState } = userDataSlice.actions;

userInfo.tsx：我试图获得该状态，但它给出了我的默认状态：

import React, { useEffect, useState } from "react";
import { useAppSelector } from "lib";

export const UserInfo: React.FC<UserInfo> = ({
  name,
  nickname,
  picture,
  activity,
  active,
}) => {
  const { isUser } = useAppSelector((state) => state.userData);
  console.log("USER:: ", isUser);

  return (
    <>
     .....
    </>
  );
};

Answer 1

您的 Redux 状态不会持久保存到任何非易失性存储中，例如本地存储或 cookie。redux-persist可能是您保持应用程序状态的一个选项。

这篇博文可能会有所帮助： https: //blog.logrocket.com/persist-state-redux-persist-redux-toolkit-react/