1

I want to use Redux in NextJS 13 project (app folder structure) . But for use it i need use provider, and provider will be in layout.jsx. But for use provider, i need use "use client"; annotation for make it client-side component. And my all pages using that layout too. So my whole project will be client-side or childrens will be still server-side ? If its makes all children client-side then whats point to use nextjs with redux ?

In other hand if i want to fetch datas from API and put it to redux, how can i do it ? For put it to redux i need "use client" annotation again. So i cant take data in server side. I'm actually so confused. Please help me for that questions. Thanks for help <3

Uğurcan Uçar
  • 11
  • 3

2 Answers2

0

By default if you add the use client directive in a component wrapper, in this case layout.jsx, all the children components will be client components.

However, you can still use React Server Components (servers-side as you say), and use these components at the page.jsx level, and their children could be either server components (default if parent is RSC) or client components if you use the use client directive.

About using redux with the app directory, it's possible. You could use your RSC to fetch data and pass that data to the redux Provider to store the data in your global store. Take a look to this implementation video from Jack Herrington. Just be aware that the redux store won't be available to your server components.

Fer Toasted
  • 1,274
  • 1
  • 11
  • 27
0

"use client";

import { Provider } from "react-redux";
import store from "../store/store";

const MyStoreProvider = ({ children }) => {
  return <Provider store={store}>{children}</Provider>;
};

export default MyStoreProvider;

Use this custom provider with use client directive on top. Now wrap your layout with this custom provider

Abhijit Roy
  • 41
  • 1
  • 5