0

I am using redux toolkit for state management in next.js 13 project. I am using following 2 functions for fetching and updating data from store like this.

import { useSelector, useDispatch } from "react-redux";
export default function Posts() {
  const posts = useSelector((state: any) => state.posts);
  // more code...
}

I have client components and server components in my project. Since these hooks useSelector is not working in server components. I have to write use client at top of all components where ever I want to fetch redux store data using useSelector hook.

I even had to wrape my provider as client component as show below:

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

function Providers({children}: {children: React.ReactNode}) {
    return <Provider store={store}>{children}</Provider>;
}

export default Providers;

store.ts file

import { configureStore } from "@reduxjs/toolkit";
import postsSlice from "./slices/postsSlice";

export const store = configureStore({
    reducer: {
        posts: postsSlice
    }
})

Any suggestion or guideline how I can share data between client and server components here? I don't want to write 'use client' at top of each file.

Umair Jameel
  • 1,573
  • 3
  • 29
  • 54
  • What do you mean by charing? Like fetching data in a server component and using it in client component with your Redux store? – Youssouf Oumar Aug 24 '23 at 19:46
  • This answer in this [thread](https://stackoverflow.com/questions/74965849/youre-importing-a-component-that-needs-usestate-it-only-works-in-a-client-comp) covers the topic of sharing data between client and server components. – Youssouf Oumar Aug 24 '23 at 19:48

0 Answers0