نوشتن ردیوسر Reducer برای مدیریت حالت شمارنده

درک عملکرد ردیوسر Reducer با مثالی ساده

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

به کد بالا دقت کنید و سپس برای درک این کد به توضیحات زیر توجه فرمایید:

• این تابع counterReducer نام دارد و دو پارامتر state و action دریافت می‌کند.
• پارامتر state حالت فعلی شمارنده را ذخیره می‌کند.
• پارامتر action اطلاعات مربوط به اکشن فعلی را ذخیره می‌کند.

سوئیچ کیس switch case :

• از switch برای بررسی نوع اکشن استفاده می‌شود.
• اگر نوع اکشن INCREMENT باشد، مقدار count با 1 افزایش می‌یابد.
• اگر نوع اکشن DECREMENT باشد، مقدار count با 1 کاهش می‌یابد.
• در غیر این صورت، حالت فعلی بدون تغییر بازگردانده می‌شود.

نکات:

• این تابع یک تابع خالص است. به این معنی که خروجی تابع فقط به ورودی‌های آن (state و action) بستگی دارد.
• این تابع از اسپرید spread اپراتور (...) برای کپی کردن خواص state به ابجکت جدید استفاده می‌کند.

مثال:

فرض کنید state برابر با { count: 0 } است.

• اگر action با نوع INCREMENT ارسال شود، تابع counterReducer مقدار count را به 1 افزایش می‌دهد و { count: 1 } را باز می‌گرداند.
• اگر action با نوع DECREMENT ارسال شود، تابع counterReducer مقدار count را به -1 کاهش می‌دهد و { count: -1 } را باز می‌گرداند.

استفاده از ردیوسر:

• می‌توانید از این ردیوسر در configureStore برای ایجاد یک Redux store استفاده کنید.
• سپس می‌توانید از store برای دسترسی به مقدار فعلی count و dispatch اکشن‌ها برای افزایش یا کاهش count استفاده کنید.

آیا ردیوسر در ریداکس با یوزردیوسر در ری اکت شباهت و ارتباطی دارد؟

بله، ردیوسر در Redux و یوزردیوسر در React شباهت‌ و ارتباط دارند.

شباهت‌های ردیوسر در ریداکس با یوزردیوسر در ری اکت:

• هر دو تابع هستند: ردیوسر در Redux یک تابع است که حالت برنامه را بر اساس اکشن‌ها به روز می‌کند.
  یوزردیوسر در ری‌اکت یک تابع است که state یک کامپوننت را بر اساس props و state قبلی آن به روز می‌کند.
• هر دو از یک الگوی مشابه برای به روز رسانی حالت استفاده می‌کنند: هر دو تابع از یک سوئیچ کیس برای بررسی نوع ورودی (اکشن در ریداکس و props در ری‌اکت) و به روز رسانی state بر اساس آن استفاده می‌کنند.
• هر دو برای مدیریت state در برنامه‌های JavaScript استفاده می‌شوند: ردیوسر برای مدیریت state در سطح برنامه در ریداکس استفاده می‌شود.
  یوزردیوسر برای مدیریت state در سطح کامپوننت در ری‌اکت استفاده می‌شود.
  

تفاوت‌های ردیوسر در ریداکس با یوزردیوسر در ری اکت:

• محدوده: ردیوسر برای مدیریت state در سطح برنامه استفاده می‌شود.
  یوزردیوسر برای مدیریت state در سطح کامپوننت استفاده می‌شود.
• نوع ورودی: ردیوسر اکشن‌ها را به عنوان ورودی دریافت می‌کند.
  یوزردیوسر props و state قبلی را به عنوان ورودی دریافت می‌کند.
• نوع خروجی: ردیوسر state جدید برنامه را به عنوان خروجی باز می‌گرداند.
  یوزردیوسر یک ابجکت با دو خاصیت state و dispatch به عنوان خروجی باز می‌گرداند.
  

ارتباط:

• ریداکس Redux و ری‌اکت React می‌توانند با هم استفاده شوند:می‌توانید از ریداکس برای مدیریت state در سطح برنامه و از ری‌اکت برای ساخت رابط کاربری استفاده کنید.
  
• یوزردیوسر می‌تواند با Redux ادغام شود:می‌توانید از یوزردیوسر برای مدیریت state در سطح کامپوننت در یک برنامه Redux استفاده کنید.
  

جمع‌بندی:

ردیوسر و یوزردیوسر هر دو برای مدیریت state در برنامه‌های JavaScript استفاده می‌شوند.

• ردیوسر برای مدیریت state در سطح برنامه در Redux استفاده می‌شود.
• یوزردیوسر برای مدیریت state در سطح کامپوننت در React استفاده می‌شود.

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