Why is Redux-Persist not persisting the store

Question

Hi there everyone I was messing around with react(redux to be precise) and came across a problem. When I refresh the page redux store does as well everything returns to its initial value, I googled the problem and found out that I have to use redux-persist. However even that is not working, I think the problem is with how I configured redux-persist but I could be wrong. The code below is how I went about the redux-persist configuration.

// configureStore.js

import { createStore, applyMiddleware } from "redux";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import rootReducer from "../reducers/index";

import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";

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

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(
  persistedReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

export const persistedStore = persistStore(store);

The code below shows how I went about making the rootReducer.

// index.js
import { combineReducers } from "redux";
import { reducer as formReducer } from "redux-form";

import authReducer from "./auth";
import messageReducer from "./message";
import chatroomReducer from "./chatroom";

import { LOGOUT_SUCCESS } from "../actions/authTypes";

const apiReducer = combineReducers({
  authReducer,
  messageReducer,
  chatroomReducer,
  form: formReducer,
});

const rootReducer = (state, action) => {
  if (action.type === LOGOUT_SUCCESS) {
    state = undefined;
  }
  return apiReducer(state, action);
};

export default rootReducer;

And the code below is the index.js that comes when creating the react app.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

import { PersistGate } from "redux-persist/integration/react";
import { Provider } from "react-redux";

import { store, persistedStore } from "./Redux/configureStore";

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

reportWebVitals();

Can anyone tell me what is wrong with my code? If you need additional info please let me know.

I am having the exact same issue. Were you able to fix this? If i remove the `action.type === LOGOUT_SUCCESS` logic then it starts working. But I don't understand why that is causing the issue. — mikasa, Jul 18 '22 at 18:46

score 0 · Answer 1 · answered Mar 30 '21 at 18:47

0

Try configuring the whitelist, where you must indicate which reducers to store. Remember to import the reducers before adding them to the list

import navigation from "./reducers/navigation";

// WHITELIST
const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['navigation'] // only navigation will be persisted
};

answered Mar 30 '21 at 18:47

nexun

171
1
7

Thank you for the suggestion but I'm afraid even this is not working – Shend Tytynxhiu Apr 01 '21 at 17:43

score 0 · Answer 2 · answered Mar 30 '21 at 18:58

0

First, you need to import storage from Async

import AsyncStorage from '@react-native-community/async-storage';

Use WhiteList like this

const persistConfig = {
   key: 'root',
   storage: AsyncStorage,
    whitelist: [
       'user'
    ],
  };

"user" is the specific root reducer you want to store

answered Mar 30 '21 at 18:58

Awais Ibrar

585
3
14

Thank you for the suggestion but I'm afraid even this is not working. – Shend Tytynxhiu Apr 01 '21 at 17:43

mikasa · Answer 3 · 2022-08-04T20:55:01.613

As per this answer, you also need to clear out the redux-persist storage when you catch the LOGOUT_SUCCESS action.

First, you need to import the appropriate storage engine and then clear it out completely.

const rootReducer = (state, action) => {
    if (action.type === SIGNOUT_REQUEST) {
        // for all keys defined in your persistConfig(s)
        storage.removeItem('persist:root')
        // storage.removeItem('persist:otherKey')

        return appReducer(undefined, action);
    }
    return appReducer(state, action);
};

Why is Redux-Persist not persisting the store

3 Answers3