Question 236903 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to access redux state in Server Component in Next13?

I have a Server Component:

import { getData } from "./api"
import { Form } from "./components/Form"
import styles from "./style.module.css"
import { Suspense } from "react"

export const BuildingInfoForm = async () => {

  // get routing params from redux
  const data = await getData()// pass them to getData
  return (
    <div className={styles["container"]}>
      <Suspense fallback={<p>LOADING..</p>}>
        <Form data={data} />
      </Suspense>
    </div>
  )
}

Our API params ( not exposed in the URL ) are stored in the redux state. Is there a way to access them though Server Component?

Tags:

2

Answers


  1. 0

    Redux manages the state on the client side, so it is not possible to access the state on the server side, the same goes with createContext.
    If you’re using app directory in nextjs13, you can create a component and put "use client" on top of the page, and then import that client side component to your server page.tsx, that will render your page on the server side, butt the "use client" page will be lazy loaded with next/dynamic to your page.tsx.

    This is a workaround, but as per your question, The client side state cannot be accessed on the serverside.

    Hope it helps

    Login or Signup to reply.
  2. 0

    To access the Redux state within a server component, you can import your Redux store and directly utilize store.getState().

    import { store } from "@/redux/store";

   export default async function SomeServerComponent() {
      const state = store.getState();
      // ...
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search