How to migrate from RR library to RR framework preserving Redux state management?

[skorphil]

Hi, i'm trying to create:
/ - SSG for landing
/app/* - classic CSR SPA

My app used <Provider store={store}> for Redux state management. In RR framework i get errors when try to access my app:

Error: Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>
    at onShellError (MYAPP/src/entry.server.tsx:57:18)

What is the correct way to make Redux work in /app??

---

I disable SSR (IDK why my /app still renders on server invoking error, regarding to entry.server.tsx)

export default {
  appDirectory: "src",
  ssr: false,
  async prerender() {
    return ["/"];
  },
} satisfies Config;

My providers are in entry.cient.tsx:

hydrateRoot(
  document,
  <StrictMode>
    <ThemeProvider> // ShadCn 
      <Auth0Provider> // need `window`
        <AuthProvider> // my Auth0 wrapper
          <Provider store={store}> // Redux provider, need indexedDb
              <HydratedRouter />
          </Provider>
        </AuthProvider>
      </Auth0Provider>
    </ThemeProvider>
  </StrictMode>

my routes:

export default [
  route("/", "./features/landing-page/components/LandingPage.tsx"),
  route("/app", "./pages/App.tsx", [
    route(
      "/app/book",
      "./layouts/BookContainerLayout/BookContainerLayout.tsx",
      [
        route(
          "/app/book/page/:uuid",
          "./layouts/MainContainerLayout/MainContainerLayout.tsx"
        ),
      ]
    ),
  ]),

[skorphil]

I noticed that error is present, when i enable preloading of /

export default {
  appDirectory: "src",
  ssr: false,
  // async prerender() { if i remove this, my app seems to work as usual SPA without redux errors
  //  return ["/"];
  // },
} satisfies Config;

So i guess, that pre-rendering / also causing attempt to pre-render /app, but why? It's separate route and i do not specified it as children route of /

Any way i can make /app and /app/* act as CSR, while / act as SSG ?

[2395000206]

你这样还是会用到服务端渲染，服务端渲染storage.getItem is not a function

[skorphil]

I solved this. Needed to add reduxProvider in app.tsx https://philrich.dev/react-router-migration/#moving-providers