Separating Client and Server State in Next redux wrapper

[PranavDhamanage]

I want to seperate client and server state for nextjs application and not able to understand how to do it for redux toolkit. I have done an implementation as given below. Is it the correct way or is there some other(more better) way to do it. Pl share your thoughts.
@kirill-konshin pl can you let me know your thoughts about this
It would be really helpful to have some guidance.

import { AppDisptach, AppRootState } from "./store";
import { apiCallBegan } from "./api";
import { HYDRATE } from "next-redux-wrapper";

interface CitiesState {
  server: {
    currentCity: string;
    citiesList: Array<any>;
    localities: Array<any>;
  };
  client: {
    currentCity: string;
    citiesList: Array<any>;
    localities: Array<any>;
  };
}

const initialState: CitiesState = {
  server: { currentCity: "", citiesList: [], localities: [] },
  client: {
    currentCity: "",
    citiesList: [],
    localities: [],
  },
};

export const serverAction = createAction("SERVER_ACTION");
export const clientAction = createAction("CLIENT_ACTION");

const citiesSlice = createSlice({
  name: "cities",
  initialState,
  reducers: {
    citiesRequested: (cities, action) => {},
    citiesReceived: (cities, action: PayloadAction<{ data: Array<any> }>) => {
      const { data } = action.payload;
      cities.server.citiesList = data;
    },
    currentCityChanged: (
      cities,
      action: PayloadAction<{ currentCity: string }>
    ) => {
      const { currentCity } = action.payload;
      cities.server.currentCity = currentCity;
    },
    citiesRequestFailed: (cities, action) => {},
    localitiesRequested: (cities, action) => {},
    localitiesReceived: (
      cities,
      action: PayloadAction<{ data: Array<any> }>
    ) => {
      const { data } = action.payload;
      cities.server.localities = data;
    },
    localitiesRequestFailed: (cities, action) => {},
  },
  extraReducers: {
    [HYDRATE]: (state, action) => {
      console.log("action hydrate", action);
      return {
        ...state,
        server: {
          ...state.server,
          ...action.payload.entities.cities.server,
        },
      };
    },
    [serverAction.type]: (state, action) => {
      console.log("action server", action);
      return {
        ...state,
        server: {
          ...state.server,
          citiesList: action.payload,
        },
      };
    },
    [clientAction.type]: (state, action) => {
      console.log("action client", action);
      return {
        ...state,
        client: {
          ...state.client,
          citiesList: action.payload.data,
        },
      };
    },
  },
});

export default citiesSlice.reducer;

const {
  currentCityChanged,
  citiesRequested,
  citiesRequestFailed,
  citiesReceived,
} = citiesSlice.actions;

export const changeCurrentCity =
  (city: string) => (dispatch: AppDisptach, getState: AppRootState) =>
    dispatch({
      type: currentCityChanged.type,
      payload: { currentCity: city },
    });

export const loadCities = () =>
  apiCallBegan({
    url: "/city/list",
    method: "get",
    onStart: citiesRequested.type,
    onSuccess: citiesReceived.type,
    onError: citiesRequestFailed.type,
  });

export const loadLocalities = () =>
  apiCallBegan({
    url: "/locality/list",
    method: "get",
    onStart: citiesRequested.type,
    onSuccess: citiesReceived.type,
    onError: citiesRequestFailed.type,
  });

export const getServerSideProps = wrapper.getServerSideProps(
  (store) =>
    async ({ req, res, ...etc }) => {
      console.log(
        "2. Page.getServerSideProps uses the store to dispatch things"
      );
      await store.dispatch(loadCities())
      // store.dispatch({type:serverAction.type,payload:})
      return {
        props: {
          auth: false,
        },
      };
    }
);

const { cities } = useAppSelector((state) => ({
    cities: state.entities.cities.server.citiesList,
  }));
  const dispatch = useAppDispatch();
  useEffect(() => {
    console.log("inside useffect");
    dispatch({
      type: clientAction.type,
      payload: {
        data: cities,
      },
    });
  }, [cities, dispatch]);