Problem with (Redux Toolkit, NRW, Redux Persist) setup

[MuttakinHasib]

trafficstars

Is there any issue with my store setup?

https://gist.github.com/MuttakinHasib/c3ad30fdfcc085cf5e4a447f409f17cc

store.ts

import {
  Action,
  AnyAction,
  CombinedState,
  configureStore,
  ThunkAction,
} from "@reduxjs/toolkit";
import { createWrapper, HYDRATE } from "next-redux-wrapper";

import rootReducers from "./reducers";
import { storage } from "./storage";

export const reducers = (
  state: ReturnType<typeof rootReducers>,
  action: AnyAction
) => {
  if (action.type === HYDRATE) {
    const nextState = {
      ...state, // use previous state
      ...action.payload, // apply delta from hydration
    };

    if (state.user) {
      nextState.user = action.payload.user;
    }

    console.log(action.payload);
    if (state["onboard/couple"]) {
      nextState["onboard/couple"] = action.payload["onboard/couple"];
    }

    if (state["onboard/venue"]) {
      nextState["onboard/venue"] = action.payload["onboard/venue"];
    }

    return nextState;
  } else {
    return rootReducers(state, action);
  }
};

const makeConfiguredStore = (reducer: CombinedState<typeof rootReducers>) =>
  configureStore({
    reducer,
    devTools: true,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
  });

const makeStore = () => {
  const isServer = typeof window === "undefined";

  if (isServer) {
    return makeConfiguredStore(reducers as CombinedState<typeof rootReducers>);
  } else {
    // we need it only on client side
    const { persistStore, persistReducer } = require("redux-persist");

    const persistConfig = {
      key: "beweddy",
      whitelist: ["onboard/couple", "onboard/venue", "user"], // make sure it does not clash with server keys
      storage,
    };

    const persistedReducer = persistReducer(persistConfig, reducers);
    const store = makeConfiguredStore(persistedReducer);
    // @ts-ignore
    store.__persistor = persistStore(store); // Nasty hack

    return store;
  }
};

export type AppStore = ReturnType<typeof makeStore>;
export type AppState = ReturnType<AppStore["getState"]>;
export type AppDispatch = AppStore["dispatch"];
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  AppState,
  unknown,
  Action<string>
>;

export const wrapper = createWrapper<AppStore>(makeStore);

_app.tsx

  const PersistWrapper = ({ children }: { children: ReactNode }) => {
    return typeof window !== undefined ? (
      // @ts-ignore
      <PersistGate persistor={store.__persistor} loading={null}>
        {children}
      </PersistGate>
    ) : (
      <PersistGate persistor={store} loading={null}>
        {children}
      </PersistGate>
    );
  };

example-page.tsx route -> /onboard/couple?question=name&ref=1

when i dispatch in serverside props and go to another route like ( /onboard/couple?question=phone&ref=1) then my redux state become reset... how can i fix this ?

export const getServerSideProps: GetServerSideProps =
  wrapper.getServerSideProps((store) => async ({ query }) => {
    try {
      const venues = await getVenues();
      let venue = null;

      if (query.reference) {
        venue = await getVenue(query.reference as string);
        await store.dispatch(setVenueReference(venue._id));
      }

      return {
        props: {
          venues,
          venue,
        },
      };
    } catch (err) {
      return {
        props: {
          venues: [],
          venue: null,
        },
      };
    }
  });

[MuttakinHasib]

@kirill-konshin

[vizardkill]

were you able to resolve the error?

[ittroller]

same problem