redux 持久化本地存储数据因重新加载而消失答案

【问题标题】：redux persist localstorage data is vanished by reloadredux 持久化本地存储数据因重新加载而消失
【发布时间】：2023-01-04 17:04:20
【问题描述】：

我正在使用 redux persist 将我的 redux 状态存储在本地存储中。 redux persist 正在努力将数据存储在本地存储中，但是当我重新加载页面时，数据从本地存储和状态中消失了。这是我正在处理的项目的回购链接 https://github.com/bakarfreelancer/jccs-frontend。下面是我的减速器和存储索引文件。

//Reducer/Index.js

import { configureStore } from "@reduxjs/toolkit";
import { combineReducers, compose } from "redux";
import storage from "redux-persist/lib/storage";
import {
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";
import thunk from "redux-thunk";
import usersReducer from "./usersReducer";
const persistConfig = {
  key: "persistroot",
  version: 1,
  storage,
};
const rootReducer = combineReducers({ users: usersReducer });
const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

export default store;

//
//
//
//Index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.css";


import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";
import store from "./reducers";

let persistor = persistStore(store);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </PersistGate>
    </Provider>
  </React.StrictMode>
);
reportWebVitals();

我想将 redux 状态（在用户登录后更新）存储在 localstorage 或其他一些存储（如 cookie）中。我检查了官方文档，我认为我的代码是一样的。

【问题讨论】：

对于它的价值，我在这里没有看到任何看起来不对的地方。您已正确关注the docs。
是的，没错，现在通过使用 redux 工具包文档创建我的减速器解决了这个问题。我使用了 createSlice 方法，它现在可以工作了。

标签： redux react-redux redux-toolkit redux-persist

【解决方案1】：

使用redux toolkit documentation解决了问题。因此，通过实施 createSlice 方法来创建我的减速器，它可以完美地工作。

【讨论】：