redux-persist is not saving my redux state when I refresh or close my react-native app

Question

My react-native app is not saving my data using redux toolkit, redux-persist and asyncstorage

import AsyncStorage from '@react-native-async-storage/async-storage';
import { configureStore } from '@reduxjs/toolkit';
import { applyMiddleware, combineReducers, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import {
  FLUSH,
  PAUSE,
  PERSIST,
  persistReducer,
  persistStore,
  PURGE,
  REGISTER,
  REHYDRATE,
  persistCombineReducers,
} from 'redux-persist';

import thunk from 'redux-thunk';
import authSlice from './authSlice';

const rootReducer = combineReducers({
  authReducer: authSlice,
});

const persistConfig = {
  key: 'root',
  version: 1,
  storage: AsyncStorage,
  whiteList: ['authReducer'],
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export default () => {
  let store = createStore(
    persistedReducer,
    composeWithDevTools(applyMiddleware(thunk)),
  );
  let persistor = persistStore(store);
  return { store, persistor };
};

Above is the config I made, I tried several config and in general redux works normally but redux-persist is not saving the data. When I refresh or close the app I lose the info that its supposed to be saved

Answer 1

Since this question is a few months old, you may have already found your solution, but I just ran into this issue so I figured I'd post what worked for me. I think it may be a similar problem as to what I just went through.

What worked for me when combining multiple reducers was to create a specific config object for the reducer itself. Adding the reducer's name to the whitelist for config to handle the entire state did not work for me. Instead, I needed a specific config object for the reducer. In my case there were specific properties of that object I wanted to save, so I added those to the whitelist. So, here's what I would recommend trying:

import AsyncStorage from '@react-native-async-storage/async-storage';
import { applyMiddleware, combineReducers, createStore } from 'redux';
import { persistReducer, persistStore } from 'redux-persist';
import thunk from 'redux-thunk';
import authSlice from './authSlice';

// insert your actual authSlice properties into the whitelist
const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  whiteList: ['id', 'token'],
};

const rootReducer = combineReducers({
  authReducer: persistReducer(persistConfig, authSlice)
});

export const store = createStore(rootReducer, applyMiddleware(thunk));
export const persistor = persistStore(store);

If you have multiple reducers, but only want to persist the authSlice reducer, your rootReducer would look something like this:

import authSlice from './authSlice';
import otherReducer from './otherReducer';
import oneMoreReducer from './oneMoreReducer';

const persistConfig = {...}

const rootReducer = combineReducers({
  authReducer: persistReducer(persistConfig, authSlice),
  otherReducer,
  oneMoreReducer,
});

If you ended up wanting to persist data in those other reducers, I would imagine you would just create another config for those specific reducers and probably need to change the key as well.

I'm new to react and redux, but I tried following lots of other examples online and reading through the docs and this was what finally worked for me. If there's an option in the API to specify the level of the object properties to save, or saving the entire reducer, it either didn't work for me or I didn't find it.