Closed
Description
openedon Jun 9, 2023
What is the current behavior?
right now when i try to provide redux in my application i get an error like below.
// in my nextjs layout.tsx file
import { Provider } from "react-redux";
import { PropsWithChildren } from "react";
import store from "~/store/store";
export default function Root({children} : PropsWithChildren) {
return (<html>
<body>
<Provider store={store}>
{children}
</Provider>
</body>
</html>
)
}the error:
Steps to Reproduce
You can recreate it as I mentioned above.
What is the expected behavior?
Redux should provide a special provider for Nextjs or client/server components
How did i fix it?
I created a provider under the store and used the phrase "use client" here
// ~/store/provider.tsx
"use client";
import { Provider } from "react-redux";
import { PropsWithChildren } from "react";
import store from "./store";
export default function ReduxProvider({ children }: PropsWithChildren) {
return <Provider store={store}>{children}</Provider>;
}in my layout
// layout.tsx
import { PropsWithChildren } from "react";
import ReduxProvider from "~/store/provider";
export default function Root({children} : PropsWithChildren) {
return (<html>
<body>
<ReduxProvider>
{children}
</ReduxProvider>
</body>
</html>
)
}Environment Details
My dependencies on package.json file
{
"react": "18.2.0",
"next": "canary",
"react-redux": "^8.0.7",
"redux": "^4.2.1",
"@reduxjs/toolkit": "^1.9.5",
}Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Metadata
Assignees
Labels
No labels