You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
export const persistor = persistStore(store);
export type RootState = ReturnType;
export type AppDispatch = typeof store.dispatch;
`
This is my layout.tsx in new nextJS version (13) :
`import { Metadata } from "next";
import Provider from "@/redux/provider";
import { persistor } from "@/redux/store";
import { FC } from "react";
import { poppins } from "@/constants/globals";
import { PersistGate } from "redux-persist/integration/react";
import "./globals.css";
type RootLayoutProps = {
children: React.ReactNode;
};
@ottosamatori in nextjs 13 everything inside the app folder is by default considered server component and anything related to redux is a client side functionality so you cannot directly use state management related code in files in app directory.
you need to move your provider code from root layout to outside of app folder to a new file say "StateProvider.ts" that will accept children as prop and then use this custom provider to wrap around layout file.
Note: StateProvider.ts and your store.ts should have "use client" as the very first line.
Refer the below modified example
StateProvider.ts:
"use client";
import { Provider } from "react-redux";
import store from ".";
import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";
export function StateProvider ({ children }:{children:React.ReactNode}) => {
let persistor = persistStore(store);
return (
{children}
);
};
layout.tsx
`import { Metadata } from "next";
import { FC } from "react";
import { poppins } from "@/constants/globals";
import StateProvider from "@/store/provider";
import "./globals.css";
type RootLayoutProps = {
children: React.ReactNode;
};
This is my configuation in store.ts :
`import { combineReducers, configureStore } from "@reduxjs/toolkit";
import storage from "redux-persist/lib/storage";
import { persistReducer, persistStore } from "redux-persist";
import thunk from "redux-thunk";
import userSlice from "./slices/userSlice";
const persistConfig = {
key: "root",
storage,
};
const rootReducer = combineReducers({ profile: userSlice });
const persistedReducer = persistReducer(persistConfig, rootReducer);
export const store = configureStore({
reducer: persistedReducer,
devTools: process.env.NODE_ENV !== "production",
middleware: [thunk],
});
export const persistor = persistStore(store);
export type RootState = ReturnType;
export type AppDispatch = typeof store.dispatch;
`
This is my layout.tsx in new nextJS version (13) :
`import { Metadata } from "next";
import Provider from "@/redux/provider";
import { persistor } from "@/redux/store";
import { FC } from "react";
import { poppins } from "@/constants/globals";
import { PersistGate } from "redux-persist/integration/react";
import "./globals.css";
type RootLayoutProps = {
children: React.ReactNode;
};
export const metadata: Metadata = {
title: "Mitrandi",
description: "Application de gestion locative",
};
const RootLayout: FC = ({ children }) => {
return (
Provider>
PersistGate loading={null} persistor={persistor}>
html lang='fr'>
body className={poppins.className}>
{children}
/body>
/html>
/PersistGate>
/Provider>
);
};
export default RootLayout;`
The text was updated successfully, but these errors were encountered: