مدیریت حالت با روتر برنامه Next.js

جدول محتوا

معرفی App Router نشان‌دهنده تحول در نحوه ساخت برنامه‌های Next.js است.

با تمرکز بر ویژگی‌های همزمان React، هنگام واکشی داده‌ها، رندرینگ و به‌ویژه مدیریت حالت، باید ملاحظاتی را در نظر گرفت.

برای سال‌ها، Redux مترادف با “مدیریت حالت” برای برنامه‌های React بوده است. شما فقط داده‌های خود را در Redux store قرار می‌دهید و می‌توان از آن‌ها در هر مؤلفه‌ای صرف نظر از اینکه روی سرور یا کلاینت بود استفاده کرد.

اما با روتر برنامه Next.js 13، تمایز واضحی بین کامپوننتهای سروری (سمت سرور) React Server Components (RSCs) و کامپوننتهای کلاینتی Client Components ایجاد شده است. این تمایز سه قانون جدید را برای مدیریت استیت یا حالت معرفی می کند.

سه قانون برای مدیریت state در Next.js

قانون شماره ۱: No Global Stores ذخیره گاه جهانی وجود ندارد

دوران تعریف store به عنوان یک متغیر سراسری global variable گذشته است. شما باید بر اساس آن برنامه ریزی کنید.

قانون شماره ۲: RSC ها نباید داده های ذخیره گاه : store را نشان دهند

داده های store نباید توسط کامپوننتهای سمت سرور ری اکت React Server Components نمایش داده شود. اگر از قانون اول در مورد نداشتن ذخیره‌گاه جهانی global store پیروی کنید، اجرای آن آسان می شود.

قانون شماره ۳: کامپوننت‌های سرور برای داده های تغییرناپذیر، کامپوننت‌های کلاینت برای داده های قابل تغییر

نوع داده ای که برای کاربر ارائه می کنید، نوع کلاینتی را که باید انتخاب کنید تعیین می کند.

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

 الگوهای “مدیریت وضعیت پایدار”

در آموزش مدیریت State with Next.js App Router ، هنگام کار با داده‌های قابل تغییر mutable  و تغییرناپذیر immutable  در یک برنامه تجارت الکترونیک دنیای واقعی که دارای داده‌های محصول، سبد خرید و بررسی است، به طور عملی با چندین سیستم مدیریت دولتی تمرین خواهید کرد.

الگوی مدیریت استیت با React Context

یاد بگیرید که چگونه استفاده از React Context با معرفی کامپوننتهای سمت سرور ری اکت React Server Components تغییر کرده است.

الگوی مدیریت استیت در Redux با Redux Toolkit

با ترکیب داده‌های سرور با بررسی‌ها و رتبه‌بندی‌های تولیدشده توسط مشتری، یک ذخیره گاه جهانی ریداکس global Redux store داشته باشید.

Zustand

یک رویکرد چند فروشگاهی و هوک-محور برای مدیریت حالت با کتابخانه Zustand اتخاذ کنید.

Jotai

استفاده از مدل اتمی Jotai برای مدیریت حالت state در سبد خرید و بررسی داده ها.

در پایان این آموزش، با پیاده‌سازی چند الگوی مدیریت وضعیت قابل اعتماد برای مدیریت وضعیت جهش‌پذیر در سمت کاربر، تجربه عملی کسب خواهید کرد.

مدیریت حالت با روتر برنامه Next.js

معرفی App Router نشان‌دهنده تحول در نحوه ساخت برنامه‌های Next.js است. با تمرکز بر ویژگی‌های همزمان React، هنگام واکشی داده‌ها، رندرینگ و به‌ویژه مدیریت حالت، ...
ادامه مطالعه