React Redux-Persist 问题“无法读取未定义的属性（读取‘订阅’）

Question

所以我正在做一个项目，我第一次使用 redux。当我刷新浏览器时，我最终遇到了状态变得未定义的问题。为了解决这个问题，我尝试实施 redux-persist。但我的控制台出现错误，我不知道应该如何解决。我只使用 redux 进行单个 thunk-api 调用，因此我将所有商店代码都保存在我的 index.js 文件中。我见过所有与我有类似问题的线程，但没有解决它。

这是我的index.js 文件：

import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App';
import {configureStore} from '@reduxjs/toolkit'
import { Provider } from 'react-redux';
import blobReducer from './services/BlobRetriever'
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { PersistGate } from 'redux-persist/es/integration/react'

const persistConfig = {
  key:'persist-key',
  storage,
}

const persistedReducer = persistReducer(persistConfig, blobReducer)

const store = configureStore({
  reducer: { 
      blobs: persistedReducer, 
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
})

const persistorStore = persistStore(store)

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistorStore={persistorStore}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>,
);

这是我收到的错误消息：https://puu.sh/IX9Y2/e441359b38.png

我做错了什么吗？

Answer 1

使用 persistor 而不是 persistorStore

<PersistGate loading={null} persistor={persistorStore}>
     <App />
</PersistGate>