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.