Using RTK Query along with Redux Persistor

Question

After spending large amount of time trying to fix this issue alone, I thought asking help from you guys. I have read so many issues regarding this but couldn't find anything helpful. I am trying to configure my store using both persistor and RTK Query. this is my index.js file where I am trying to configure the store

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

const persistReducers = persistReducer(persistConfig, authReducer);

const store = configureStore({
  reducer: {
    [customApi.reducerPath]: customApi.reducer,
     persistReducers,
  },

  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat(customApi.middleware),
});
setupListeners(store.dispatch);

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

This is my RTK Query

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { REHYDRATE } from "redux-persist";

export const customApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: process.env.REACT_BASE_URL }),
  reducerPath: "customApi",
  tagTypes: ["RuralProjects"],
  endpoints: (build) => ({
    getRuralProjects: build.query({
      query: () => "projects/ruralProjects",
      providesTags: ["RuralProjects"],
    }),
  }),
});

export const { useGetRuralProjectsQuery } = customApi;

This is my authReducer

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

const initialState = {
  user: null,
  token: null,
};

export const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    setLogin: (state, action) => {
      state.user = action.payload.user;
      state.token = action.payload.token;
    },
    setLogout: (state) => {
      state.user = null;
      state.token = null;
    },
  },
});

export const { setLogin, setLogout } = authSlice.actions;
export default authSlice.reducer;

The thing is without configuring the RTK Query in store my app is working. My question is how to use both persistor and RTK Query at the same time? Any help would be appreciated a lot!

How can I configure the store when I am using both the redux persistor and RTK Query

Answer 1

As far as I can tell of the code it already is using both RTKQ and redux-persist... so I'm guessing you are really trying to ask a different question. If I am correct it seems you wanting to merge and also persist the customApi slice along with the authSlice state.

import { Provider } from "react-redux";
import { configureStore, combineReducers } from "@reduxjs/toolkit";
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";
import storage from "redux-persist/lib/storage";
import authReducer from "../authSlice";
import { customApi } from "../customApi";

// Combine all slice reducers into a single root reducer
const rootReducer = combineReducers({
  [customApi.reducerPath]: customApi.reducer,
  auth: authReducer,
});

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

const reduxPersistActions = [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER];

// Persist the root reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [...reduxPersistActions],
      },
    }).concat(customApi.middleware),
});

setupListeners(store.dispatch);

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