با تغییراتی که در nextjs نسخه 13 بوجود آمده است، نحوه استفاده از redux هم کمی متفاوت شده است.
برای شروع کار ابتدا redux را نصب میکنیم:
npm install @reduxjs/toolkit react-redux
سپس sliceها و store خود را ایجاد میکنیم. (شروع کار با redux toolkit)
فایل store.js :
import { configureStore } from "@reduxjs/toolkit" import counter from "./counterSlice" import { createSlice } from "@reduxjs/toolkit" iconst initialState:CounterState = { value:0, } const counterSlice = createSlice({ name: "counter", initialState, reducers:{ increment: (state,action) => { state.value += action.payload }, decrement: (state) => { state.value -= 1 }, } }); export const {increment , decrement} = counterSlice.actions; export default counterSlice.reducer; const store = configureStore({ reducer:{ counter, } }) ; export default store;
همان طور که میدانید برای استفاده از کتابخانه react-redux باید کامپوننتهای خود را درون کامپوننت Provider قرار دهیم. همچنین همان طور که میدانید در نسخه 13 فریمورک next.js علاوه بر تغییر در ساختار فایلها پوشه app جایگزین پوشه pages شده است. درون نسخه 13 به سراغ فایل app/layout.js میرویم :
export default function RootLayout({ children }) { return (<html lang="en"> <body > <Provider store={store}> {children} </Provider> </body> </html>); }
دقت کنید به دلیل اینکه layout درون سرور رندر میشود، ما نمیتوانیم مانند کد بالا مستقیما از Provider درون فایل layout.js استفاده کنیم، پس یک کامپوننت سمت کلاینت ایجاد میکنم.
فایل ClientProvider را مانند نمونه ایجاد میکنیم :
"use client" import store from "./store" import {Provider} from "react-redux" export default ClientProvider({children}){ return(<Provider store={store}> {children} </Provider> }
اکنون ClientProvider را درون فایل layout.js را جایگزین Provider میکنیم:
import ClientProvider from "./ClientProvider" export default function RootLayout({ children }) { return (<html lang="en"> <body > <Provider> {children} </Provider> </body> </html>); }
اکنون میتوانیم از redux درون کامپوننتهای سمت client استفاده کنیم.
ما نمیتوانیم از هوکهای redux درون کامپوننتهای پردازش شده سرور استفاده کنیم.