راهنمای مدیریت حالت در Next.js با استفاده از Redux Toolkit

استفاده از Redux در برنامه های کوچک Next.js می تواند هزینه ای غیر ضروری باشد. مدیریت حالت را با Redux Toolkit ساده کنید.

مدیریت دولتی در قلب برنامه های کاربردی وب مدرن قرار دارد و نقشی حیاتی در مدیریت داده های کاربران و گرفتن تعاملات آنها ایفا می کند. خواه پر کردن سبد خرید در یک پلت فرم تجارت الکترونیک باشد، یا حفظ یک جلسه کاربر وارد شده پس از احراز هویت، این اقدامات از طریق مدیریت کارآمد دولت امکان پذیر می شود.

اساساً، مدیران ایالتی به برنامه‌ها اجازه می‌دهند به داده‌ها دسترسی پیدا کرده و آن‌ها را پردازش کنند تا نتایج مورد نظر را به دست آورند. Next.js از راه حل های مدیریت چندگانه پشتیبانی می کند. با این حال، در این راهنما، ما بر روی استفاده از Redux Toolkit برای مدیریت دولتی تمرکز خواهیم کرد.

مدیریت حالت در Next.js با استفاده از Redux Toolkit

در برنامه های Next.js، مدیریت حالت معمولاً شامل دو نوع حالت است: حالت جهانی و حالت جزء. حالت جهانی حاوی اطلاعاتی است که توسط همه اجزای برنامه مانند وضعیت احراز هویت یک کاربر به اشتراک گذاشته شده است، در حالی که حالت جزء داده های خاص برای اجزای جداگانه را ذخیره می کند.

هر دو حالت جهانی و جزء نقش های حیاتی در مدیریت وضعیت کلی برنامه دارند و مدیریت کارآمد داده ها را تسهیل می کنند.

Redux به طور گسترده ای به عنوان یک راه حل مدیریت وضعیت در چارچوب های مختلف جاوا اسکریپت پذیرفته شده است. با این حال، می تواند پیچیدگی هایی را ایجاد کند، به خصوص برای پروژه های کوچکتر.

یکی از اشکالات رایج نیاز به نوشتن کدهای مکرر دیگ بخار برای تعریف انواع کنش، خالقان کنش و کاهش دهنده است. این می تواند منجر به افزایش افزونگی کد شود.

برای غلبه بر این چالش ها، Redux Toolkit (RTK) به کمک می آید. هدف اصلی آن ساده‌سازی تجربه توسعه هنگام کار با کتابخانه مدیریت دولتی Redux است. مجموعه ای از ابزارها و ابزارهای کمکی را فراهم می کند که وظایف رایج Redux را ساده می کند و نیاز به کد بیش از حد دیگ بخار را از بین می برد.

شروع به کار با Redux Toolkit در Next.js Applications

اکنون، بیایید به استفاده از Redux Toolkit برای مدیریت وضعیت در برنامه‌های Next.js بپردازیم. برای شروع، یک پروژه Next.js ایجاد کنید و با دنبال کردن مراحل زیر، وابستگی های مورد نیاز را نصب کنید.

1. با اجرای دستور زیر در ترمینال خود، یک پروژه Next.js جدید به صورت محلی ایجاد کنید: npx create-next-app@latest next-redux-toolkit
2. پس از ایجاد پروژه، با اجرای: cd next-redux-toolkit به دایرکتوری پروژه بروید
3. در نهایت، وابستگی های لازم را در پروژه خود با استفاده از npm، مدیر بسته Node نصب کنید. npm @reduxjs/toolkit react-redux را نصب کنید

npx create-next-app@latest next-redux-toolkit

cd next-redux-toolkit

npm install @reduxjs/toolkit react-redux

هنگامی که یک پروژه اصلی Next.js را راه اندازی کردید، اکنون آماده ساختن یک برنامه آزمایشی Next.js هستید که از Redux Toolkit برای مدیریت حالت استفاده می کند.

می توانید کد این پروژه را در این مخزن GitHub پیدا کنید.

فروشگاه Redux را پیکربندی کنید

فروشگاه Redux یک محفظه مرکزی است که کل وضعیت برنامه را در خود نگه می دارد. این به عنوان منبع واحد داده های برنامه عمل می کند و حالت ها را برای هر جزء ارائه می کند. فروشگاه مسئول مدیریت و به‌روزرسانی وضعیت از طریق اقدامات و کاهش‌دهنده‌ها است – تسهیل مدیریت دولت در سراسر برنامه.

برای ایجاد یک فروشگاه Redux، یک پوشه redux جدید در فهرست اصلی پروژه Next.js خود ایجاد کنید. در داخل این پوشه، یک فایل store.js جدید ایجاد کنید و کد زیر را اضافه کنید:

import {configureStore} from '@reduxjs/toolkit';
import profileReducer from './reducers/profileSlice';
export default configureStore({
    reducer:{
        profile: profileReducer
    }
})

کد بالا از تابع configureStore برای ایجاد و پیکربندی فروشگاه Redux استفاده می کند. پیکربندی فروشگاه شامل تعیین کاهنده ها با استفاده از شی کاهنده است.

کاهش دهنده ها، در این مورد، نحوه تغییر وضعیت برنامه را در پاسخ به اقدامات خاص یا رویدادهای مشخص مشخص می کنند. در این مثال، کاهنده پروفایل مسئول مدیریت اقدامات مربوط به وضعیت پروفایل است.

با راه اندازی فروشگاه Redux، کد ساختار اصلی را برای مدیریت وضعیت برنامه با استفاده از Redux Toolkit ایجاد می کند.

Slices حالت را تعریف کنید

برش‌های حالت Redux مؤلفه‌هایی هستند که منطق مدیریت وضعیت آیتم‌های داده خاص را در ذخیره‌سازی redux پیکربندی شده در خود محصور می‌کنند. این برش‌ها با استفاده از تابع createSlice ایجاد می‌شوند، که به طور خودکار کاهش‌دهنده، اکشن‌سازها و انواع اکشن را برای برش تولید می‌کند.

در پوشه redux، یک پوشه جدید ایجاد کنید و نام آن را کاهش دهندگان بگذارید. در داخل این پوشه فایل profileSlice.js را ایجاد کرده و کد زیر را اضافه کنید.

import {createSlice} from '@reduxjs/toolkit';
const profileSlice = createSlice({
    name: 'profile',
    initialState: {
        name: 'none'
    },
    reducers: {
        SET_NAME: (state, action) => {
            state.name = action.payload
        }
}})

export const {SET_NAME} = profileSlice.actions;
export default profileSlice.reducer;

در کد ارائه شده، تابع createSlice یک برش حالت برای وضعیت پروفایل کاربر ایجاد می کند. شی profileSlice شامل نام برش و حالت اولیه آن است که حاوی مقادیر پیش‌فرض ویژگی‌های حالت است.

علاوه بر این، شی slice یک خاصیت کاهش دهنده را نیز می گیرد که کنترل کننده های عمل را برای این برش تعریف می کند. در این مورد، یک تابع کاهنده به نام SET_NAME. اساساً، هنگامی که این تابع را فراخوانی می کنید، ویژگی نام ایالت را با داده های ارائه شده به روز می کند.

تابع createSlice به طور خودکار بر اساس کاهش دهنده های تعریف شده، سازنده های کنش و انواع کنش ها را تولید می کند. ایجادکننده اقدام SET_NAME و profileSlice.reducer صادر شده، ایجادکننده کنش تولید شده و تابع کاهش دهنده برای برش نمایه را نشان می دهد.

با ایجاد این برش وضعیت، مؤلفه‌های داخل برنامه می‌توانند از عملکرد SET_NAME استفاده کنند و بار مورد نظر را برای به‌روزرسانی نام نمایه در وضعیت ارسال کنند.

یک مؤلفه برای آزمایش عملکرد مدیریت دولتی RTK ایجاد کنید

فایل index.js را در دایرکتوری pages باز کنید، کد Next.js boilerplate را حذف کنید و کد زیر را اضافه کنید.

import styles from '@/styles/Home.module.css'
import {useRef} from 'react'
import {useSelector, useDispatch} from 'react-redux'
import {SET_NAME} from '../../redux/reducers/profileSlice'

function DisplayName(){
  const {name} = useSelector((state) => state.profile)
  return (
    <h1> I am {name} !!</h1> 
  ) }

export default function Home() {
const inputName = useRef()
const dispatch = useDispatch()
 function submitName() {
   console.log(inputName.current.value)
   dispatch(SET_NAME(inputName.current.value))
  }
  return (
    <>
      <main className={styles.main}> 
        <input placeholder='enter name' ref={inputName} />
        <button onClick={submitName}>Enter name</button>
        <DisplayName />
      </main>
    </>
  )}

کد بالا یک مؤلفه Next.js را ایجاد و رندر می کند که به کاربر اجازه می دهد نامی را وارد کرده و نام ارائه شده را در صفحه مرورگر نمایش دهد. به طور موثر، مدیریت وضعیت برنامه با استفاده از Redux Toolkit.

مؤلفه DisplayName از قلاب useSelector برای دسترسی به ویژگی نام از وضعیت نمایه در فروشگاه Redux استفاده می کند و آن را در صفحه نمایش می دهد.

برای وارد کردن نام، کاربر روی دکمه Enter name کلیک می کند. این تابع submitName را فراخوانی می کند که عمل SET_NAME را با مقدار ورودی به عنوان بار ارسال می کند. این عمل ویژگی نام را در وضعیت نمایه به روز می کند.

فایل _app.js را به روز کنید

در نهایت، برای پیکربندی Redux Toolkit برای استفاده در کل برنامه Next.js، باید برنامه را با ارائه‌دهنده Redux بپیچید – این تضمین می‌کند که فروشگاه Redux و حالت‌های موجود برای همه اجزای برنامه قابل دسترسی هستند.

فایل _app.js را باز کرده و به صورت زیر به روز رسانی کنید:

import {Provider} from 'react-redux'
import store from '../../redux/store'
export default function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
       <Component {...pageProps} />
    </Provider> )
}

اکنون پیش بروید و سرور توسعه را راه اندازی کنید تا تغییراتی که ایجاد کرده اید را منعکس کند و برای آزمایش برنامه به http://localhost:3000 در مرورگر خود بروید.

npm run dev

مدیریت آبرسانی به داده ها در بارگذاری مجدد صفحه

آبرسانی مجدد داده در بارگذاری مجدد صفحه به فرآیند بازیابی و مقداردهی اولیه وضعیت برنامه در هنگام بارگیری مجدد صفحه اشاره دارد. در یک برنامه Next.js رندر شده توسط سرور، حالت اولیه ابتدا بر روی سرور ارائه می شود و سپس برای مشتری ارسال می شود.

در کلاینت، کد جاوا اسکریپت وظیفه بازسازی وضعیت برنامه را با بازیابی و بی‌سریال کردن حالت سریال دریافت شده از سرور بر عهده دارد.

با انجام این کار، برنامه می تواند به طور یکپارچه داده های لازم را بازیابی کند و جلسه کاربر را حفظ کند. این رویکرد از واکشی داده های غیر ضروری جلوگیری می کند و تجربه کاربری بدون وقفه را هنگام پیمایش بین صفحات یا بارگذاری مجدد برنامه تضمین می کند.

کار با Redux Toolkit در برنامه های Next.js

یکی از مزایای استفاده از Redux Toolkit در برنامه های Next.js سادگی و ویژگی های توسعه دهنده آن است. این به طور قابل توجهی کد دیگ بخار مورد نیاز برای تعریف اقدامات، کاهش دهنده ها و پیکربندی ذخیره را کاهش می دهد و کار با Redux را در مدیریت حالت آسان تر و کارآمدتر می کند.

منبع مقاله