OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

React Redux-Persist problem with "cannot read properties of undefined(reading 'subscribe')

  • Thread starter Thread starter Malcolm Liljedahl
  • Start date Start date
M

Malcolm Liljedahl

Guest
so I'm doing a project where I'm using redux for the first time. I ended up having problem with states becoming undefined when I refresh the browser. To solve this I've tried implementing the redux-persist. But I get errors in my console which I don't know how I should solve. I only use redux for a single thunk-api call, therefor I got all my store code in my index.js file. I have seen all with threads where someone has a similar problem as me, but nothing solved it.

So here's my index.js file:

Code:
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>,
);

and here's the error message I got: https://puu.sh/IX9Y2/e441359b38.png

am I doing something wrong?

<p>so I'm doing a project where I'm using redux for the first time. I ended up having problem with states becoming undefined when I refresh the browser. To solve this I've tried implementing the redux-persist. But I get errors in my console which I don't know how I should solve. I only use redux for a single thunk-api call, therefor I got all my store code in my index.js file. I have seen all with threads where someone has a similar problem as me, but nothing solved it.</p>
<p>So here's my index.js file:</p>
<pre><code>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>,
);
</code></pre>
<p>and here's the error message I got: <a href="https://puu.sh/IX9Y2/e441359b38.png" rel="nofollow noreferrer">https://puu.sh/IX9Y2/e441359b38.png</a></p>
<p>am I doing something wrong?</p>
 
Top