Redux Persist makes redux state undefined

Question

I installed redux-persist now all of my Redux states return undefined.

All the other Redux state used to work before, however once I changed to redux-persist, they do not work anymore and return undefined. I have 2 redux slices, one UserSlice.js and another ModalSlice.js, I only want to have persist on the UserSlice.js

Here is an example of how I use it:

export default function LoginModal() {
  // Modal
  const isLoginOpen = useSelector((state) => state.modal.loginModalOpen);
  const isSignupOpen = useSelector((state) => state.modal.signupModalOpen);
  const isPasswordOpen = useSelector((state) => state.modal.passwordModalOpen);


<button
  onClick={() => dispatch(openLoginModal())}
  className="btn home__cta--btn"
>

Here is my store.js

import { configureStore } from "@reduxjs/toolkit";
import userSlice from "./userSlice";
import storage from "redux-persist/lib/storage";
import { persistReducer, persistStore } from "redux-persist";
import thunk from "redux-thunk";

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

const persistedReducer = persistReducer(persistConfig, userSlice);

export const store = configureStore({
  reducer: persistedReducer,
  devTools: process.env.NODE_ENV !== "production",
  middleware: [thunk],
});

export const persistor = persistStore(store);

Userslice.js:

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  email: null,
  uid: null,
  premium: false,
  type: "Basic",
  currentUser: null,
};

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    setCurrentUser: (state, action) => {
      state.currentUser = action.payload;
    },
    signOutUser: (state) => {
      state.email = null;
      state.uid = null;
      state.premium = false;
    },
    typeOfSubIsYearly: (state) => {
      state.type = "Premium Plus";
    },
    typeOfSubIsMonthly: (state) => {
      state.type = "Premium";
    },
    setPremiumStatus: (state, action) => {
      state.premium = action.payload;
    },
  },
});

export const {
  setCurrentUser,
  signOutUser,
  upgradeUser,
  typeOfSubIsYearly,
  typeOfSubIsMonthly,
  setPremiumStatus,
} = userSlice.actions;

export default userSlice.reducer;`

And here is my app.js:

import "@/styles/globals.css";
import { library } from "@fortawesome/fontawesome-svg-core";
import {
  faCrown,
  faStar,
  faStarHalf,
  faUser,
  faX,
} from "@fortawesome/free-solid-svg-icons";
import { Provider } from "react-redux";
import { persistor, store } from "@/redux/store";
import { PersistGate } from "redux-persist/integration/react";

library.add(faCrown, faStar, faStarHalf, faUser, faX);

export default function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Component {...pageProps} />
      </PersistGate>
    </Provider>
  );
}

Answer 1

The code isn't including the ModalSlice reducer in the Redux state, so state.modal is undefined. If you would like to persist only the user state then you can configure the persistence a couple of ways.

1. Use a whitelist/blacklist to exclude/include specific parts of state.

   import { configureStore } from "@reduxjs/toolkit";
   import userReducer from "./userSlice";
   import modalReducer from "./modalSlice";
   import storage from "redux-persist/lib/storage";
   import { persistReducer, persistStore } from "redux-persist";
   import thunk from "redux-thunk";
   
   const persistConfig = {
     key: "root",
     storage,
     whitelist: ["user"], // only modal will be persisted
   };
   
   const rootReducer = {
     user: userReducer,
     modal: modalReducer,
   };
   
   const persistedReducer = persistReducer(persistConfig, rootReducer);
   
   export const store = configureStore({
     reducer: persistedReducer,
   });
   
   export const persistor = persistStore(store);
   

2. Persist only the user slice.

   import { configureStore } from "@reduxjs/toolkit";
   import userReducer from "./userSlice";
   import modalReducer from "./modalSlice";
   import storage from "redux-persist/lib/storage";
   import { persistReducer, persistStore } from "redux-persist";
   import thunk from "redux-thunk";
   
   const persistConfig = {
     key: "user",
     storage,
   };
   
   const persistedUserReducer = persistReducer(persistConfig, userReducer);
   
   const rootReducer = {
     user: persistedUserReducer,
     modal: modalReducer,
   };
   
   export const store = configureStore({
     reducer: rootReducer,
   });
   
   export const persistor = persistStore(store);