آموزش React مقدماتی قسمت یازدهم: Reducer Hook برای مدیریت پیشرفته State ها

قسمت ها

ما با استفاده از useState hook در کامپوننت های خود state را ایجاد کردیم. با این حال React روش دیگری برای مدیریت state در کامپوننت functional برای شما فراهم می کند: useReducer hook. به طور کلی استفاده از Reducer هنگامی که منطق state پیچیده ای داشته باشید به استفاده از StateState ترجیح داده می شود. این ممکن است در مواردی باشد که منطق state شامل چندین زیر مقادیر باشد یا اینکه مقدار حالت بعدی به مقدار حالت قبلی بستگی داشته باشد.

در این قسمت ما پیاده سازی موجود خود را تغییر خواهیم داد و از useReducer hook برای ایجاد و مدیریت state مربوط به courses در کامپوننت App استفاده خواهیم کرد.

Import کردن Reducer Hook

ابتدا دستور import را در App.js گسترش می دهیم تا شامل useReducer نیز باشد:

import React, {useState, useEffect, useReducer} from 'react';

پیاده سازی تابع Reducer

در مرحله بعدی، ما باید یک تابع reducer را پیاده سازی کنیم. تابع reducer در App.js خارج از کامپوننت App پیاده سازی شده است و شامل منطقی است که برای محاسبه و بازگرداندن مقادیر جدید برای state مورد نیاز است:

همانطور که می بینید این روش دو پارامتر می گیرد:

  • state: امکان دسترسی به شی state فعلی را به شما می دهد
  • action: به شما امکان دسترسی به شی توصیف کننده action را می دهد

تابع reducer می تواند انواع مختلفی از action ها را کنترل کند. نوع action با استفاده از رشته action.type تعیین می شود. برای مثال بالا، ما فقط نوع action را کنترل می کنیم که "SET_COURSES" است. با استفاده از این action، ما state داده هایی را که در action.payload تحویل داده می شوند تنظیم می کنیم. از آنجا که هیچ منطق پیچیده ای در محاسبه مقدار state جدید وجود ندارد، ما فقط باید آنچه را که در action.payload موجود است بازگردانیم. مقداری که در اینجا برگردانده می شود مقداری است که به state جدید اختصاص می یابد.

بعداً ما از تابع coursesReducer برای مدیریت چندین action مختلف استفاده خواهیم کرد که شامل محاسبه مقدار state جدید بر اساس مقدار قدیمی با استفاده از منطق پیچیده تری در مثال اول است.

در حال حاضر ما با استفاده از نوع SET_COURSES و همچنین حالت default (که در صورت عدم تحقق هیچ شرطی فراخوانی می شود) به مثال اول پایبند خواهیم بود.

تغییر از useState به useReducer

تابع reducer خارج از کامپوننت App آماده شده است. در داخل تابع App اکنون باید هنگام استفاده از state مربوط به courses از useState به useReducer تغییر کنیم:

تابع useReducer دو پارامتر می گیرد:

  • تابع reducer که برای ایجاد و بازگشت state جدید استفاده می شود
  • مقدار state اولیه که در مثال ما فقط یک آرایه خالی است (زیرا ما داده های courses را پس از یک تأخیر ست می کنیم)

در return، آرایه ای را می گیریم که متشکل است از:

  • متغیر state
  • تابع dispatcher که برای ارسال action ها برای تغییر استفاده می شود و سپس توسط تابع reducer انجام می شود

Dispatch کردن Action

اکنون باید پیاده سازی useEffect را که برای شبیه سازی بارگیری غیر همزمان داده ها تغییر می کند، تغییر دهیم:

پس از resolve شدن promise، ما تابع dispatcher مربوط به disptachCourses را فراخوانی می کنیم. برای به روزرسانی state با آرایه courses که در یک شی object متشکل از دو ویژگی پاس می دهیم:

  • type: نوع action که می خواهیم توسط تابع reducer انجام شود.
  • payload: داده هایی که برای محاسبه و تنظیم مقدار state جدید مورد نیاز است.

در اینجا، ما می خواهیم action نوع SET_COURSES را ارسال کنیم، بنابراین باید ویژگی type را به رشته "SET_COURSES" تنظیم کنیم. ویژگی payload آرایه ای از courses خواهد بود که از طریق result.courses در دسترس است.

با امتحان مجدد برنامه در مرورگر، می بینید که همه چیز همچنان کار می کند. در حالی که مدیریت state اکنون با رویکردی مبتنی بر useReducer انجام می شود.

مجدداً، در ادامه می توانید بعد از انجام تمام تغییرات در این قسمت، به source code کامل در App.js نگاهی بیندازید:

سعید نصیری
سعید نصیری

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

× در حال پاسخ به: