Redux-persist not persisting with expo on reload

Question

I am using following tech stack

1. react-native
2. expo
3. redux
4. redux-persist.

I have tried articles, docs as well as questions here also but not help. Its simply not persisting. I am using emulator and running through expo only. As soon i close the app and reload expo client it simply doesn't persist and ask me to login again. I also tried using AsyncStorage but still not working.

Hers's my code:

index.js

import thunk from "redux-thunk";
import AsyncStorage from "@react-native-community/async-storage";
import ExpoFileSystemStorage from "redux-persist-expo-filesystem"
// import storage from 'redux-persist/lib/storage';
import { createStore, applyMiddleware, compose } from "redux";
import { persistStore, persistReducer } from "redux-persist";

import rootReducer from "./reducers/rootReducer";
import logger from "redux-logger";

const persistConfig = {
  key: "root",
  storage: ExpoFileSystemStorage,
  whitelist: ["authReducer"],
};

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(
  persistedReducer,
  composeEnhancers(applyMiddleware(thunk, logger))
);

let persistor = persistStore(store);

export { store, persistor };

app.js

import React from "react";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { AppLoading } from "expo";
import { useFonts } from "@use-expo/font";
import { NavigationContainer } from "@react-navigation/native";
import { ThemeProvider } from "react-native-elements";

import { theme } from "./constants/ThemeConfiguration";
import { store, persistor } from "./store";
import RootNavigator from "./navigators/RootNavigator";


export default (App) => {
  let [fontsLoaded] = useFonts({
    "Lato-Regular": require("./assets/fonts/Lato-Regular.ttf"),
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <ThemeProvider theme={theme}>
            <NavigationContainer>
              <RootNavigator />
            </NavigationContainer>
          </ThemeProvider>
        </PersistGate>
      </Provider>
    );
  }
};

rootReducer.js

import thunk from "redux-thunk";
import AsyncStorage from "@react-native-community/async-storage";
import { createStore, applyMiddleware, compose } from "redux";
import { persistStore, persistReducer } from "redux-persist";

import rootReducer from "./reducers/rootReducer";
import logger from "redux-logger";

const persistConfig = {
  key: "auth",
  storage: AsyncStorage,
};

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(
  persistedReducer,
  composeEnhancers(applyMiddleware(thunk, logger))
);

let persistor = persistStore(store);

export { store, persistor };

Answer 1

I got it fixed. Its not there in any documentation or article. The problem is with the persistConfig. Key which is root here. It should be the name of the reducer which we want to persist. In my case it was auth.

Updated persistConfig will be as follows:

const persistConfig = {
  key: "auth",
  storage: AsyncStorage,
};