CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-persist
renakre
renakre

Reputation: 8291

Redux-persist is not working: Page refresh clears the state

To persist the state when the page is refreshed, I am trying to integrate redux-persist. However, it is not working. Page refresh clears the state. Here is how _persist object int the state looks:

_persist: {
   version: -1,
   rehydrated: true
}

Here is the configureStore.js:

import { createStore, applyMiddleware, compose } from "redux";
import logger from "redux-logger";
import thunk from "redux-thunk";
import rootReducer from "./_reducers/rootReducer";
import storage from "redux-persist/lib/storage";
import { persistStore, persistReducer } from "redux-persist";
const persistConfig = {
    key: "root",
    storage,
    whitelist: []
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const middlewares = [thunk];
// if (__DEV__) react native check dev
middlewares.push(logger);

const store = createStore(
    persistedReducer,
    {},
    compose(
        applyMiddleware(...middlewares),
        window.devToolsExtension ? window.devToolsExtension() : f => f)
);
const persistor = persistStore(store);

export { store, persistor };

And, here is the index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { Provider } from 'react-redux';

import { PersistGate } from "redux-persist/lib/integration/react";
import { store, persistor } from "./configureStore";



const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');

ReactDOM.render(
    <Router basename={baseUrl} history={history}>
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <App />
            </PersistGate>
        </Provider>
    </Router>,
    rootElement);

registerServiceWorker();

I cannot figure out the problem with the code. Any help?

Upvotes: 4

Views: 5478

Answers (2)

Jaydeep purohit
Jaydeep purohit

Reputation: 1566

For React Native Expo. In My case this same issue happen after updating expo version.

Solution:

// import FSStorage from "redux-persist-expo-fs-storage";
import FSStorage from "redux-persist-fs-storage";
/* 
Import change 
*/
const primary = {
  key: "root",
  timeout: 0,
  version: 1,
  keyPrefix: "",
  storage: FSStorage(),
  stateReconciler: autoMergeLevel2, // see "Merge Process" section for details.
};

ADD keyPrefix: "", in config. Hope this solutions work for others.

Upvotes: 0

Salman Mehmood
Salman Mehmood

Reputation: 283

const persistConfig = {
    key: "root",
    storage,
    whitelist: ["pass reducer name which you want to persist in string"] e.g: whitelist: ["userAuth", "widgetAuth"]
};

if you want your whole state persist than remove whitelist key from persistConfig

Upvotes: 7

Related Questions