چگونه از redux به همراه 13 nextjs استفاده کنیم

با تغییراتی که در nextjs نسخه 13 بوجود آمده است، نحوه استفاده از redux هم کمی متفاوت شده است.

برای شروع کار ابتدا redux را نصب می‌کنیم: 

npm install @reduxjs/toolkit react-redux

سپس sliceها و store خود را ایجاد میکنیم. (شروع کار با redux toolkit)

فایل store.js :

import { configureStore } from &quot@reduxjs/toolkit&quot
import counter from &quot./counterSlice&quot  

import { createSlice } from &quot@reduxjs/toolkit&quot  

iconst initialState:CounterState = {
    value:0, 
}  

const counterSlice = createSlice({
    name: &quotcounter&quot,
    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=&quoten&quot>
         <body >
            <Provider store={store}>
              {children}
            </Provider>
        </body>
   </html>);
}

دقت کنید به دلیل اینکه layout درون سرور رندر می‌شود، ما نمی‌توانیم مانند کد بالا مستقیما از Provider درون فایل layout.js استفاده کنیم، پس یک کامپوننت سمت کلاینت ایجاد میکنم.

فایل ClientProvider را مانند نمونه ایجاد می‌کنیم :

&quotuse client&quot
import store from &quot./store&quot
import {Provider} from &quotreact-redux&quot

export default ClientProvider({children}){
   return(<Provider store={store}>
      {children}
   </Provider>
}

اکنون ClientProvider را درون فایل layout.js را جایگزین Provider می‌کنیم:

import ClientProvider from &quot./ClientProvider&quot

export default function RootLayout({ children }) {
    return (<html lang=&quoten&quot>
          <body >
             <Provider>
               {children}
             </Provider>
         </body>
    </html>); 
}

اکنون می‌توانیم از redux درون کامپوننتهای سمت client استفاده کنیم.

ما نمیتوانیم از هوکهای redux درون کامپوننتهای پردازش شده سرور استفاده کنیم.