尝试在我的 store.js 文件中设置此 redux-persist 但用户不再存储

Trying to set up this redux-persist in my store.js file but user not storing anymore

我已经在我的应用程序中实现了 redux-persist 以存储用户状态 post 刷新。现在的问题是用户根本没有存储。我怀疑这与我如何导出 'store' 或我如何定义减速器有关。无论哪种方式,我确定我没有正确实现 redux-persist。

这是我的 store.js 代码:

import { combineReducers, createStore } from "@reduxjs/toolkit";
import persistReducer from "redux-persist/es/persistReducer";
import persistStore from "redux-persist/es/persistStore";
import storage from "redux-persist/lib/storage";
import userReducer from "../Features/userSlice";
import questionReducer from "../Features/questionSlice";

const reducers = combineReducers({
  user: userReducer,
  question: questionReducer,
});

const persistConfig = {
  key: "root",
  storage,
};

const persistedReducer = persistReducer(persistConfig, reducers);

let store = createStore(persistedReducer);
let persistor = persistStore(store);
export { store, persistor };

这是我的 index.js 代码:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { store, persistor } from "./app/store";
import { Provider } from "react-redux";
import firebase from "firebase/app";
import { firebaseConfig } from "./firebase";
import { PersistGate } from "redux-persist/lib/integration/react";

if (firebase.apps.length === 0) {
  firebase.initializeApp(firebaseConfig);
}

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

所以,实际上设置或多或少是正确的。问题是我无法在 devtools 中获取状态变化,这让我很困惑。我对 store.js 文件进行了以下更改并且有效:

import { combineReducers, createStore, configureStore } from "@reduxjs/toolkit";
import persistReducer from "redux-persist/es/persistReducer";
import persistStore from "redux-persist/es/persistStore";
import storage from "redux-persist/lib/storage";
import userReducer from "../Features/userSlice";
import questionReducer from "../Features/questionSlice";

const reducers = combineReducers({
  user: userReducer,
  question: questionReducer,
});

const persistConfig = {
  key: "root",
  storage,
};

const persistedReducer = persistReducer(persistConfig, reducers);

export default () => {
  let store = createStore(
    persistedReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
  let persistor = persistStore(store);
  return { store, persistor };
};