Reactjs 如何使我的redux操作在刷新浏览器时永久保存？

我目前是react js和redux的新手，我首先开始学习登录表单。现在，当我按下“登录”按钮时，我遇到了问题。当我刷新浏览器时，redux操作将被删除，这意味着当浏览器刷新时，所有状态将自动删除。因此，我在这里的问题是，即使我刷新浏览器，它也不会删除，如何将redux操作永久保存

我在stackoverflow中读到一些帖子，他们建议使用redux持久化，这个库对我来说是新的。我真的不明白我应该把持久化库放在哪里

我将分享我已经完成的样本工作：

Store.js

import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/userSlice';


export default configureStore({
    reducer: {
        user: userReducer,
    }
});

UserSlice.js

import { createSlice } from '@reduxjs/toolkit';

export const userSlice = createSlice({

    name:"user",

    initialState: {
        user: null,
    },
    
    reducers: {
       
       login: (state, action) => {
          state.user = action.payload
       },
       
       logout: (state) => {
         state.user = null
       },

    }
})

export const { login, logout } = userSlice.actions;

export const selectUser = (state) => state.user.user;

export default userSlice.reducer;

Root Index.js

import store  from './app/store';


ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
  document.getElementById('root')
);

从“/app/store”导入存储；
ReactDOM.render(

刷新浏览器时的输出：


错误：


希望有帮助。
可能的持久化选项有
localStorage
、文件系统或任何数据库。
redux persist
据我所知，在后台使用
localStorage
。
在store.js文件中

import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/userSlice';
import {persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const userDataPersistConfig = {
  key: 'user',
  storage: storage,
};



export default configureStore({
    reducer: {
        user: persistReducer(userDataPersistConfig, userReducer),
    }
}, 

 // need to switch of this serializable check as false . Else we will 
 // have the error "a non serializable value was detected in the state"
 // refer this - https://stackoverflow.com/questions/61704805/getting-an-error-a-non-serializable-value-was-detected-in-the-state-when-using

 getDefaultMiddleware({
   serializableCheck: false
 })
);

在你的根文件中，你有你的顶级组件（App.js）。你需要这样做

import {PersistGate} from 'redux-persist/integration/react'; 
import {persistStore} from 'redux-persist';
import store from './store';

const persistor = persistStore(store);

<Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
</Provider>

从'redux persist/integration/react'导入{PersistGate}；
从“redux persist”导入{persistStore}；
从“./store”导入存储；
常量persistor=persistStore（存储）；

注意

您构建代码的方式可能会有所不同，例如，您可能没有单独的文件来配置存储。但是上面的位置是您将涉及到的
redux persist
。这应该给出一个公平的想法。
对于身份验证，我们通常手动使用本地存储（不带redux persist）要保存我们从API获得的令牌，可以使用
redux persist
（从开始）或者您可以使用localStorage实现自己的状态持久性。谢谢您的公平想法，我可以再问一件事吗。根据我的结构。我如何创建createStore文件并将其连接到我的userSlice.js和store.js？在您的代码库中，您有这个
const store=createStore（）
？您可以在问题中添加该文件吗？对不起，我没有任何使用该createStore的文件，我只有store.js和userSlice.js。编辑我的答案以与您的代码结构保持一致。您只需进行上述更改。persistStore未定义。