My redux toolkit is not working in my nextjs 13 e-commerce app. I also using the technique to wrap the app with custom 'use-client' provider to provide store. But app is crashing and giving error here is the screen shot is attached Screen shot of error
Here my code currently I am using
Layout.jsx
import { Providers } from "./Providers";
import Navbar from "./components/Navbar";
import "./globals.css";
export const metadata = {
title: "Prime Clothing | Purchase on discounted prices",
description: "Prime Clothing | Purchase on discounted prices",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Providers>
<Navbar />
<main className="container mt-24">{children}</main>
</Providers>
</body>
</html>
);
}
store.js
import { configureStore } from "@reduxjs/toolkit";
import cartSlice from "./cart/cartSlice";
export const store = configureStore({
reducer: {
cart: cartSlice,
},
});
Providers.jsx
"use client";
import { Provider } from "react-redux";
import { store } from "@/app/redux-store/store";
export function Providers({ children }) {
return <Provider store={store}>{children}</Provider>;
}
cartSlice.js
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
cart: [],
};
export const cartSlice = createSlice({
name: "cart",
initialState,
reducers: {
addToCart: (state, action) => {
const item = action.payload;
},
},
});
export const { addToCart } = cartSlice.actions;
export default cartSlice.reducer;
