پیاده سازی Redux با Redux Persist در یک برنامه روتر برنامه Next.js

Summarize this content to 400 words in Persian Lang
وقتی صحبت از مدیریت وضعیت برنامه در صفحات مختلف هنگام کار با Next.js می شود، می تواند بسیار زیاد باشد. Redux در این مورد مفید است که یک راه حل مدیریت ایالت قوی و مؤثر است و زمانی که با Redux Persist پیاده سازی می شود بهتر می شود که باعث می شود حالت حتی پس از به روز رسانی صفحه زنده بماند. هدف این آموزش شروع با Redux و Redux Persist در Next.js، به ویژه با ساختار App Router (/app) است.

پیش نیازها

قبل از شروع، مطمئن شوید که Node.js و npm را نصب کرده اید. اگر نه، آنها را از وب سایت رسمی Node.js دانلود و نصب کنید.

مرحله 1: راه اندازی یک پروژه روتر برنامه Next.js

برای ایجاد یک پروژه Next.js جدید با ساختار App Router، دستور زیر را اجرا کنید:

npx create-next-app@latest my-next-app

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

وقتی از شما خواسته شد، مطمئن شوید که ویژگی آزمایشی App Router را فعال کنید.

مرحله 2: نصب Redux و Redux Persist

در مرحله بعد، بسته های مورد نیاز برای Redux و Redux Persist را نصب کنید:

npm install redux react-redux redux-persist

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این وابستگی‌ها به شما کمک می‌کنند حالت را در برنامه خود مدیریت کنید و آن را در طول جلسات ادامه دهید.

مرحله 3: راه اندازی Redux Store and Persist Configuration

در پروژه خود، یک پوشه redux در پوشه src ایجاد کنید تا فایل های Redux را سازماندهی کنید. در داخل این پوشه، یک فایل store.js برای پیکربندی فروشگاه Redux و Redux Persist ایجاد کنید.

// src/redux/store.js

import { configureStore } from ‘@reduxjs/toolkit’;
import { persistStore, persistReducer } from ‘redux-persist’;
import storage from ‘redux-persist/lib/storage’;
import rootReducer from ‘./reducers’;

const persistConfig = {
key: ‘root’,
storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
reducer: persistedReducer,
});

export const persistor = persistStore(store);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 4: ایجاد Reducer

در همان پوشه redux، یک پوشه کاهش دهنده ایجاد کنید تا کاهنده های خود را تعریف کنید. برای این مثال، یک کاهنده شمارنده ساده ایجاد کنید.

// src/redux/reducers/counterReducer.js

const initialState = {
count: 0,
};

const counterReducer = (state = initialState, action) => {
switch (action.type) {
case ‘INCREMENT’:
return { count: state.count + 1 };
case ‘DECREMENT’:
return { count: state.count – 1 };
default:
return state;
}
};

export default counterReducer;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در مرحله بعد، یک فایل index.js در پوشه کاهش دهنده ایجاد کنید تا کاهنده ها را ترکیب کنید (اگر چندین مورد دارید):

// src/redux/reducers/index.js

import { combineReducers } from ‘redux’;
import counterReducer from ‘./counterReducer’;

export default combineReducers({
counter: counterReducer,
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 5: ایجاد اکشن ها

در پوشه redux، یک پوشه اکشن ایجاد کنید تا اکشن سازان را تعریف کنید. یک فایل counterActions.js برای مدیریت اقدامات counter ایجاد کنید.

// src/redux/actions/counterActions.js

export const increment = () => ({
type: ‘INCREMENT’,
});

export const decrement = () => ({
type: ‘DECREMENT’,
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 6: ادغام Redux و Redux Persist با App Router

برای ادغام Redux و Redux Persist با روتر برنامه Next.js، فایل layout.js را در فهرست برنامه تغییر دهید. این فایل رابط کاربری برنامه شما را می‌پیچد و تضمین می‌کند که Redux و Redux Persist در همه مسیرها قابل دسترسی هستند.

// app/layout.js

import { Provider } from ‘react-redux’;
import { PersistGate } from ‘redux-persist/integration/react’;
import { store, persistor } from ‘../src/redux/store’;
import ‘./globals.css’;

export default function RootLayout({ children }) {
return (

{children}

);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این تنظیمات تضمین می‌کند که Redux و Redux Persist هنگام بارگیری برنامه، مقداردهی اولیه می‌شوند.

مرحله 7: استفاده از Redux در یک کامپوننت

حالا بیایید صفحه ای بسازیم که از حالت Redux استفاده می کند. در داخل فهرست برنامه، یک شمارنده پوشه جدید ایجاد کنید و یک فایل page.js اضافه کنید تا یک جزء شمارنده ساده ایجاد کنید.

// app/counter/page.js

‘use client’; // Enable client-side rendering for this page

import { useDispatch, useSelector } from ‘react-redux’;
import { increment, decrement } from ‘../../src/redux/actions/counterActions’;

export default function CounterPage() {
const count = useSelector((state) => state.counter.count);
const dispatch = useDispatch();

return (

dispatch(increment())}>Increment
dispatch(decrement())}>Decrement

);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

قلاب useSelector حالت شمارنده فعلی را بازیابی می کند و useDispatch اقدامات افزایش و کاهش را ارسال می کند.

مرحله 8: اجرای برنامه

در نهایت، برنامه Next.js خود را با اجرای:

npm run dev

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای مشاهده عملکرد صفحه پیشخوان خود از http://localhost:3000/counter دیدن کنید. به لطف Redux Persist، وضعیت حتی پس از بارگیری مجدد صفحه نیز ادامه خواهد داشت.

نتیجه گیری

شما با موفقیت Redux و Redux Persist را با استفاده از App Router در پروژه Next.js ادغام کردید. این تنظیمات امکان مدیریت یکپارچه حالت را با ماندگاری در طول جلسات فراهم می کند. از اینجا می توانید این رویکرد را برای مدیریت حالت ها و تعاملات پیچیده تر در برنامه خود گسترش دهید. کد نویسی مبارک!

npx create-next-app@latest my-next-app

npm install redux react-redux redux-persist

// src/redux/store.js

import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; 
import rootReducer from './reducers';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
});

export const persistor = persistStore(store);

// src/redux/reducers/counterReducer.js

const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

export default counterReducer;

// src/redux/reducers/index.js

import { combineReducers } from 'redux';
import counterReducer from './counterReducer';

export default combineReducers({
  counter: counterReducer,
});

// src/redux/actions/counterActions.js

export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});

// app/layout.js

import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from '../src/redux/store';
import './globals.css';

export default function RootLayout({ children }) {
  return (
    
      
        
          
            {children}
          
        
      
    
  );
}

// app/counter/page.js

'use client'; // Enable client-side rendering for this page

import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from '../../src/redux/actions/counterActions';

export default function CounterPage() {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  return (
    

      
       dispatch(increment())}>Increment
       dispatch(decrement())}>Decrement
    
  );
}

npm run dev