React – مدیریت درخواست PUT
شناسه پست: 3604
بازدید: 104

در قسمتهای قبلی، خیلی از ویژگیهای React را پوشش دادیم. شیوه ایجاد کنترلهای input از آبجکت configuration و اعتبارسنجی این کنترلها، تعدادی از ویژگیهایی هستند که ما در مورد آنها صحبت کرده ایم. این ویژگیها، در این قسمت از این سری آموزشی که قرار است ما درخواست PUT را به منظور آپدیت آبجکت entity خود به سمت سرور بفرستیم مفید خواهند بود.

پس بی صبرانه بریم تا کار خود را شروع کنیم.

اگر میخواهید تمام دستورالعملهای پایه و راهنمای کامل برای آموزش سریالی NET Core. را ببینید، این لینک را بررسی کنید: دستورالعملهای کار با NET Core.

این مقاله، قسمتی از مجموعه آموزشی زیر میباشد:

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

جهت دانلود سورس بر روی این لینک کلیک کنید: سری آموزشی React – قسمت 8

این پست به قسمتهای زیر تقسیم میشود:

آماده سازی کامپوننت Update Owner و تنظیمات مسیریابی

داخل پوشه containers، میتوانیم پوشه Owner را پیدا کنیم. داخل این پوشه، قصد داریم یک پوشه جدید ایجاد کرده و نام آن را UpdateOwner بگذاریم. حالا داخل این پوشه، فایل UpdateOwner.js را ایجاد میکنیم:

درخواست Put در ساختار UpdateOwner در React

در این فایل، ما قصد داریم یک business logic را با reuse کردن feature هایی که قبلا در کامپوننت CreateOwner استفاده کرده بودیم را برای آپدیت owner entity به کار ببریم. بنابراین درک این  business logic نباید خیلی سخت باشد، چرا که ما تمام دانش لازم (از قسمتهای قبل) در مورد فیلدهای input، اعتبارسنجی و آبجکت state را در اختیار داریم.

پس بیایید basic logic را به فایل UpdateOwner.js اضافه کنیم:

بنابراین، ما این class component را به همراه local state خودش ایجاد کردیم. این state همان ویژگیهای کامپوننت CreateOwner را دارد: ownerForm و isFormValid. برای کامپوننت UpdateOwner، باید ویژگی isFormValid را با true مقداردهی کنیم. زیرا تمام فیلدهای روی این form قرار است به محض mount شدن component پر شود. بنابراین فیلدهای ما در زمان mount شدن form همانطور که در کامپوننت CreateOwner بوده اند، نامعتبر نخواهند بود.

در compnentWillMount lifecycle hook، ما تمام تنظیمات input را واکشی کرده و state را update میکنیم.

برای فعالسازی navigation به این component، باید فایل App.js را تغییر دهیم:

حالا ما میتوانیم به این کامپوننت navigate کنیم.

افزودن عناصر Input، اعتبارسنجی و Binding دوطرفه

ما قصد داریم این خط کد زیر را درست زیر تابع render و بالای بلاک return برای تبدیل آبجکت ownerForm به آرایه ای از آبجکتها اضافه کنیم:

همچنین اضافه کردن import برای formUtilityActions و کامپوننت Input را نیز نباید فراموش کنیم:

سپس داخل تگ Well، میخواهیم این کد را برای نمایش عناصر input و دکمه ها اضافه کنیم:

این کدی است که ما در یکی از پستهای قبلی استفاده کرده بودیم. حالا تابع handleChangeEvent (زیر componentWillMount lifecycle hook) را برای فعالسازی اعتبارسنجی و binding دوطرفه اضافه میکنیم:

باز هم این قسمتی است که می توانیم از این کد برای اعتبارسنجی و binding دو طرفه استفاده مجدد کنیم.

در این لحظه که روی دکمه Update در کامپوننت OwnerList کلیک می کنیم، کامپوننت UpdateOwner را مشاهده می کنیم:

UpdateOwner initial view Put Request در React

این خوب است، اما ما می‌خواهیم همه فیلدها را با داده‌های صحیح owner پر کنیم.

پس اجازه دهید دقیقا همین کار را انجام دهیم.

اتصال Reducer با Component

اجازه دهید import های ضروری را در فایل UpdateOwner.js اضافه کنیم:

سپس میخواهیم تابع mapStateToProps را زیر component اضافه کنیم:

درست زیر تابع mapStateToProps، باید تابع mapDispatchToProps را اضافه کنیم:

در آخر، عبارت export را اصلاح میکنیم:

این هم از این.

اکنون ما ارتباط بین reducer ها و component خود را داریم و می توانیم component های modal خود را برای نشان دادن پیام های success یا error اضافه کنیم.

ابتدا، بیایید عبارات import را اضافه کنیم:

سپس باید component ها را زیر تگ Form داخل تگ Well اضافه کنیم:

واکشی داده ها از سرور

زیر compnentWillMount lifecycle hook، ما hook دیگری را برای واکشی داده ها از سرور اضافه میکنیم:

در این function، ما id آن owner که میخواهیم update کنیم را میگیریم و سپس این owner را از server واکشی میکنیم. پس از آن باید local state خود را به روز کنیم (به طور دقیق تر آبجکت ownerForm در داخل آن state) تا داده های آبجکت owner را در فیلدهای input نمایش دهیم.

hook های componentWillMount و componentDidMounthook از نوع hook های creation lifecycle هستند. اما hook ،React های update lifecycle هم دارند که به محض ورود یک ویژگی جدید در component یا آپدیت کردن state فعال میشوند.

بنابراین، اگر به نموداری که در آن جریان Redux را توضیح دادیم نگاهی بیندازیم، می بینیم که پس از به روز رسانی state توسط reducer، قرار است central store آن state را به عنوان props در داخل کامپوننت منتشر کند. ما میتوانیم این تغییر را آن لحظه دریافت کرده و با استفاده از update lifecycle hook، آبجکت ownerForm خود را داخل  local state خود update کنیم.

نمایش داده ها بر روی صفحه

بنابراین بیایید یک update lifecycle hook جدید را زیر تابع componentDidMount اضافه کنیم:

componentWillReceiveProps hook فقط زمانیکه یک component، یک آبجکت props جدید را دریافت میکند و نه زمانیکه ما state را update میکنیم فراخوانی میشود.

چرا این مهم است؟

خوب، برخی از update lifecycle hook ها زمانی که props جدید وارد می‌شود و زمانی که state را نیز به‌روزرسانی می‌کنیم، trigger می‌شوند، بنابراین اگر state را در داخل آن hook به‌روزرسانی کنیم و شرایط خروج را ارائه نکنیم (یک نوع عبارت if) با یک حلقه بی نهایت روبه رو میشویم. اما در مورد componentWillReceiveProps hook اینطور نیست.

در داخل componentWillReceiveProps hook، از دستور this.props استفاده نمی کنیم، بلکه از پارامتر nextProps استفاده می کنیم زیرا حاوی شی props جدید ما است. بنابراین، تمام اقدامات در این تابع به استخراج غیرقابل تغییر ownerForm از state و قرار دادن آن در updatedOwnerform اختصاص دارد. سپس از updatedOwnerForm، می‌توانیم تمام object های دیگر را نیز به‌طور تغییرناپذیر استخراج کنیم (name, address و dateOfBirth). بعد از این اقدام، می‌توانیم مقادیر ویژگی‌های درون این آبجکتها را تغییر داده و این آبجکتها را درون updatedOwnerForm برگردانیم. در آخر میتوانیم state را با آبجکت جدید updatedOwnerForm به روزرسانی کنیم.

حالا وقتی به form خود می رویم این form ظاهر متفاوتی پیدا می کند:

فرم پر شده ی Update Owner

اجرای Update Action

در پایان، اجازه دهید تا دو function را برای redirect شدن به کامپوننت OwnerList در صورت کلیک بر روی دکمه Cancel و به روز رسانی entity در صورت کلیک بر روی دکمه update اضافه کنیم:

خب این هم از این. اکنون می توانیم عملکرد به روز رسانی را آزمایش کنیم.

ما می‌توانیم کد روی سرور Web API را برای آزمایش کامپوننتهای modal خود جهت واکنش به response های موفقیت آمیز و خطا، تغییر دهیم. علاوه بر این، می‌توانیم اعتبارسنجی form را با خالی کردن فیلدهای ورودی یا تایپ بیش از 60 کاراکتر در قسمت ورودی آدرس آزمایش کنیم.

نتیجه گیری

با خواندن این پست، شما یاد گرفتید که:

  • چطور از hook های lifecycle مختلف برای واکشی داده ها از سرور و آپدیت یک local state استفاده کنید
  • نحوه handle کردن درخواست PUT در پروژه خود

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

در قسمت بعدی این سری از آموزش، که ما آموزش React را به پایان میرسانیم، قصد داریم نحوه handle کردن درخواست Delete در application را یاد بگیریم.

نویسنده

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