Redux-persist not persisting state in React Native app properly

Question

I have a react native app (v68.1) using redux and redux-persist.

I am tring to persist only the auth reducer. But can only get it to persist the whole entities reducer. So I tried to blacklist projects and todoItems but it is not working.

Any ideas why plz? Thanks in advance.

Entities.js 

import { combineReducers } from "redux";
import projectsReducer from "./projects";
import uiReducer from "./ui";
import todoItemsReducer from "./todoItems";
import authReducer from "./auth";

export default combineReducers({
  projects: projectsReducer,
  ui: uiReducer,
  todoItems: todoItemsReducer,
  auth: authReducer,
});

reducer.js

import { combineReducers } from "redux";
import entitiesReducer from "./entities";

export default combineReducers({
  entities: entitiesReducer,
});


ConfigureStore.js

import {
  persistStore,
  persistReducer,
} from "redux-persist";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import reducer from "./reducer";
import logger from "./middleware/logger";
import api from "./middleware/api";

const persistConfig = {
  key: ‘root’,
  storage: AsyncStorage,
  blacklist: ["projects", "todoItems"],
};

export default function () {
  const persistedReducer = persistReducer(persistConfig, reducer);

  return configureStore({
    reducer: persistedReducer,
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: { ignoreActions: ["persist/PERSIST"] },
      })
        .concat(logger)
        .concat(api),
  });
}

Answer 1

I solved this in the end by taking the auth reducer out of the entities reducer and then just persisting the auth reducer by using combineReducers function.

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

export default function () {
  const rootReducer = combineReducers({
    auth: persistReducer(authPersistConfig, authReducer),
    entities: entitiesReducer,
  });

  return configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: { ignoreActions: ["persist/PERSIST"] },
      })
        .concat(logger)
        .concat(api)
        .concat(toast),
  });
}