I’m using React/Nextjs and Redux
(Next 14, React18)
I’m building an app and concentrating on getting ssr with the redux store while avoiding getServerSideProps as this is deprecated.
So, I create a store serverside
serverSideStore.ts
export const initializeStoreForServer = async (categories: string[] = []) => {
store = await initializePersistedStore();
for (const category of categories) {
switch (category) {
case "games":
await store.dispatch(getGames());
store.dispatch(clearGameDetails());
break;
case "music":
await store.dispatch(getMusic());
store.dispatch(clearAlbumDetails());
break;
case "movies":
await store.dispatch(getMovies());
store.dispatch(clearMovieDetails());
break;
case "comics":
await store.dispatch(getComics());
store.dispatch(clearComicDetails());
break;
default:
break;
}
}
return store;
};
This creates a store and dispatches 2 actions, one to get all the items for that category the other to clear the details
(if you click on an item you are taken to a detail page and the relevant field in the store is populated selectedComic, selectedMovie, etc.)
The “initializeStoreForServer” is called in a parent server component, and the data is passed as a prop to the category component, this works well for ssr
comics/page.ts
import React from "react";
import { initializeStoreForServer } from "@/lib/store/serverSideStore";
import ComicsCategory from "./components/ComicsCategory";
const ComicsPage = async () => {
const store = await initializeStoreForServer(["comics"]);
const preloadedState = store?.getState();
return <ComicsCategory preloadedState={preloadedState.comics} />;
};
export default ComicsPage;
I’d like to make sure the “initializeStoreForServer” function is called so that the clearDetails action is dispatched, but the page.ts doesn’t always re-render when navigating back to it from a details component.
I have tried a few different things but nothing seems to be working