How to use Redux toolkit in NextJS 13 App router ?
These are all my slices and code related to redux toolkit Is there anything wrong with the code coz I get this error in terminal saying , I think In Nextjs 13 we have to create a seperate provider like I did but I don't know what the error please help me find the error:
apiSlice.js:
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
const baseQuery = fetchBaseQuery({
baseUrl: "http://localhost:8000/",
credentials: "include",
});
export const apiSlice = createApi({
baseQuery,
tagTypes: ["User"],
endpoints: (builder) => ({}),
});
usersApiSlice.js:
import { apiSlice } from "./apiSlice";
const USERS_URL = "http://localhost:8000/api/users";
export const usersApiSlice = apiSlice.injectEndpoints({
endpoints: (builder) => ({
login: builder.mutation({
query: (data) => ({
url: `${USERS_URL}/auth`,
method: "POST",
body: data,
}),
}),
register: builder.mutation({
query: (data) => ({
url: `${USERS_URL}`,
method: "POST",
body: data,
}),
}),
logout: builder.mutation({
query: () => ({
url: `${USERS_URL}/logout`,
method: "POST",
}),
}),
}),
});
export const { useLoginMutation, useLogoutMutation, useRegisterMutation } =
usersApiSlice;
authSlice.js :
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
userInfo: null,
};
const authSlice = createSlice({
name: "auth",
initialState,
reducers: {
setCredentials: (state, action) => {
state.userInfo = action.payload;
localStorage.setItem("userInfo", JSON.stringify(action.payload));
},
logout: (state, action) => {
state.userInfo = null;
localStorage.removeItem("userInfo");
},
},
});
export default authSlice.reducer;
export const { setCredentials, logout } = authSlice.actions;
provider.js:
"use client";
import { Provider } from "react-redux";
import { store } from "./store";
export function Providers({ children }) {
return <Provider store={store}>{children}</Provider>;
}
export default Providers;
store.js :
import { configureStore } from "@reduxjs/toolkit";
import authReducer from "./features/auth/authSlice";
import { apiSlice } from "./features/api/apiSlice";
export const store = configureStore({
reducer: {
auth: authReducer,
[apiSlice.reducerPath]: apiSlice.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(apiSlice.middleware),
devTools: true,
});
layout.js:
"use client";
import "./globals.css";
import { Providers } from "./GlobalRedux/provider";
// import { ToastContainer } from "react-toastify";
// import "react-toastify/dist/ReactToastify.css";
import { Inter } from "next/font/google";
import Header from "./components/Header";
import { Provider } from "react-redux";
import { store } from "./GlobalRedux/store";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<Provider store={store}>
<Header />
{children}
</Provider>
</body>
</html>
);
}
login/page.jsx :
"use client";
import { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useLoginMutation } from "@/app/GlobalRedux/features/api/usersApiSlice";
import { setCredentials } from "@/app/GlobalRedux/features/auth/authSlice";
import { useRouter } from "next/navigation";
// import { toast } from "react-toastify";
import styles from "../loginregister.module.css";
const page = () => {
const router = useRouter();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const dispatch = useDispatch();
const [login, { isLoading, error }] = useLoginMutation();
const { userInfo } = useSelector((state) => state.auth);
useEffect(() => {
if (userInfo) {
router.push("/");
}
}, [router, userInfo]);
const submitHandler = async (e) => {
e.preventDefault();
try {
const res = await login({ email, password });
dispatch(setCredentials({ ...res }));
if (res.data.status === 201) {
router.push("/");
}
} catch (err) {
alert(err?.data?.message || err.error);
// toast.error(err?.data?.message || err.error);
}
};
return (
<div className={styles.form}>
<h1>Login</h1>
<form onSubmit={submitHandler}>
<input
value={email}
onChange={(e) => setEmail(e.target.value)}
type="email"
name="email"
placeholder="Email"
/>
<input
value={password}
onChange={(e) => setPassword(e.target.value)}
type="password"
name="password"
placeholder="Password"
/>
{isLoading && <h2>Loading...</h2>}
<button>Login</button>
</form>
</div>
);
};
export default page;