I am trying to warp my dynamic route with Redux provider but it's telling me that my component should be warp with Redux provider which I already did. I am using Next.js 13.5
My layout.tsx for dynamic route:
blog->
[slug]->
page.js
layout.tsx
export default function DynamicLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<Providers>
<>
{children}
</>
</Providers>
)
}
You should wrap your root level layout.tsx file, not your page component
For this, add a file called redux-provider.tsx under your app folder
"use client";
import { PropsWithChildren } from "react";
import { Provider } from "react-redux";
import { store } from "../store/store"; // your store definitions
export default function ReduxProvider({ children }: PropsWithChildren<any>) {
return (
<Provider store={store}>
{children}
</Provider>
);
}
Add a file called provider.tsx under your app folder
"use client";
import { PropsWithChildren } from "react";
import ReduxProvider from "./redux-provider";
export default function Providers({ children }: PropsWithChildren<any>) {
return (
<ReduxProvider>
{children}
</ReduxProvider>
);
}
In your root level layout.tsx file, wrap children param with Providers
import React from "react";
import Providers from './provider';
export default function RootLayout({
// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<Providers>
{children}
</Providers>
</body>
</html>
);
}
