Next.js Discord

Discord Forum

The best way to use Redux + Next.js 13

Answered
Karakachan dog posted this in #help-forum
Open in Discord
Karakachan dogOP
The question refers to several segments:

How best to fetch the data.
Where to fetch them.

For this moment, I will cover how I use Redux and outline the most important things that happen.
Answered by European sprat
put it in the redux provider or just make another client component that you import into the layout
View full answer

11 Replies

Karakachan dogOP
ReduxProvider

ReduxProvider is located in the application's main layout.tsx But it also triggers user initializations.
The code:

// layout.tsx
export default function RootLayout({ children }: Props) {
  const getInitializeStatus = store.getState().user.initalizedStatus;

  useEffect(() => {
    if (getInitializeStatus === 'idle') {
      store.dispatch({ type: 'user/initialize' });
    }
    // expose store when run in Cypress
    if (window && window?.Cypress) {
      window.store = store;
    }
  }, [getInitializeStatus]);

  return (
    <html lang="en" className={primaryFont.className}>
      <body>
        <ReduxProvider>
          <LocalizationProvider>
            <SettingsProvider
              defaultSettings={{
                themeMode: 'light', // 'light' | 'dark'
                themeDirection: 'ltr', //  'rtl' | 'ltr'
                themeContrast: 'default', // 'default' | 'bold'
                themeLayout: 'vertical', // 'vertical' | 'horizontal' | 'mini'
                themeColorPresets: 'default', // 'default' | 'cyan' | 'purple' | 'blue' | 'orange' | 'red'
                themeStretch: false,
              }}
            >
              <ThemeProvider>
                <MotionLazy>
                  <SnackbarProvider>
                    <SettingsDrawer />
                    <ProgressBar />
                    {children}
                  </SnackbarProvider>
                </MotionLazy>
              </ThemeProvider>
            </SettingsProvider>
          </LocalizationProvider>
        </ReduxProvider>
      </body>
    </html>
  );
}
Where "user/initialize" just get the AccessToken (localStorage) and checks its valid. And either try to get a new one or puts the user in a non-logged-in state.
Am I doing it the right way ? Is there any better way
Where is best place to fetch data.
For example, i have my account view and i need to fetch my data.
Now i do it in layout.tsx in account folder.
app/
| account/
| layout.tsx
| loading.tsx
| page.tsx
...
export default function Layout({ children }: Props) {
  const dispatch = useDispatch();

  useEffect(() => {
      dispatch(getMyData());
  }, [dispatch,]);

  return <DashboardLayout>{children}</DashboardLayout>;
}

And then in page.tsx i get the data by useSelector.
Am I doing it the right way ? Is there any better way ?
Where is best place to fetch data.
For example, i have my account view and i need to fetch my data.
Now i do it in layout.tsx in account folder.
app/
| account/
| layout.tsx
| loading.tsx
| page.tsx
...

export default function Layout({ children }: Props) {
  const dispatch = useDispatch();

  useEffect(() => {
      dispatch(getMyData());
  }, [dispatch,]);

  return <DashboardLayout>{children}</DashboardLayout>;
}

And then in page.tsx i get the data by useSelector.
Am I doing it the right way ? Is there any better way ?
Where is best place to fetch data.
For example, i have my account view and i need to fetch my data.
Now i do it in layout.tsx in account folder.
app/
  |_ account/
        |_ layout.tsx
        |_ loading.tsx
        |_ page.tsx 
     ...


export default function Layout({ children }: Props) {
  const dispatch = useDispatch();

  useEffect(() => {
      dispatch(getMyData());
  }, [dispatch,]);

  return <DashboardLayout>{children}</DashboardLayout>;
}

And then in page.tsx i get the data by useSelector.
Am I doing it the right way ? Is there any better way ?
Because sometimes there is more data than one user.
And there is data without which I can't load the page. Because I have to check if the user has permissions. But sometimes I want the skeleton to load.
Forgive me if the questions are trivial.
i only skimmed your messages but noticed you're using a useEffect in the root layout (which means it needs to be a client component). don't do that, move that logic to a provider client component
@European sprat i only skimmed your messages but noticed you're using a useEffect in the root layout (which means it needs to be a client component). don't do that, move that logic to a provider client component
Karakachan dogOP
for example loading.tsx ? Or just create new Provider like <UserInitialize></UserInitialize > and inside it?
European sprat
not in loading
European sprat
put it in the redux provider or just make another client component that you import into the layout
Answer