React – مدیریت درخواست Delete
شناسه پست: 3618
بازدید: 111

در این مطلب، ما میخواهیم یک business logic برای کامپوننت DeleteOwner جهت حذف یک entity از server بنویسیم. بعد از پیاد سازی این component، ما این سری از آموزش React را تکمیل کرده و تمامی عملیات CRUD را در اختیار خواهیم داشت.

بدون هیچگونه مقدمه ای، بریم تا کار خود را شروع کنیم.

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

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

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

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

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

آماده سازی کامپوننت Delete Owner و Delete Route

داخل پوشه Owner، یک پوشه جدید ساخته و نام آن را DeleteOwner میگذاریم.

درخواست Delete در ساختار پوشه React

حالا فایل DeleteOwner.js را با کد اولیه زیر اصلاح میکنیم:

برای فعال کردن navigation به این component، باید فایل App.js را اصلاح کنیم:

حالا اگر روی دکمه Delete در کامپوننت OwnerList کلیک کنیم، به صفحه DeleteOwner هدایت خواهیم شد (حتی اگرچه در حال حاضر هیچ محتوایی داخل آن وجود ندارد).

اتصال Component با Reducer

اول از همه باید import ها را اضافه کنیم:

مورد بعدی که باید اضافه کنیم، افزودن تابع mapStateToProps زیر class میباشد:

و سپس تابع mapDispatchToProps را اضافه میکنیم:

تمام این کدهای بالا کاملا آشنا هستند (اگر قسمتهای قبلی را مطالعه کرده باشید).

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

پیاده سازی JSX در کامپوننت DeleteOwner

جهت ایجاد view برای این component، باید اول import ها را اضافه کنیم:

درست بین بلوکهای render و return، باید این کد را اضافه کنیم:

داخل تگ Aux، محتوایی که قصد داریم روی صفحه نمایش دهیم را اضافه میکنیم:

زیر تگ Row، باید دکمه ها را روی صفحه نمایش دهیم:

در آخر، import ها را برای کامپوننتهای modal اضافه میکنیم:

حالا بعد از این کار، درست زیر تگ Row و بالای تگ Aux، این کد را برای نمایش کامپوننتهای modal خود اضافه میکنیم:

حالا میتوانیم نتیجه را بررسی کنیم:

فرم DeleteOwner در React

همانطور که در تصویر بالا می بینیم، ما تمام داده ها را در صفحه نداریم، اما به زودی این مشکل را برطرف خواهیم کرد.

پیاده سازی Business Logic برای Delete Action

برای گرفتن آبجکت owner از server، میخواهیم تابع componentDidMount را درست بالای تابع render اضافه کنیم:

حالا اگر به کامپوننت OwnerDelete برویم، این صفحه مورد نظر را با داده های صحیح میبینیم:

فرم DeleteOwner به همراه داده ها

جهت کارکرد دکمه Cancel، تابع زیر را اضافه میکنیم:

در مرحله آخر، delete action را اضافه میکنیم:

بسیار عالی.

میتوانیم نتیجه را بررسی کنیم:

Delete action در React

اینجا اگر روی دکمه OK کلیک کنیم، به کامپوننت OwnerList هدایت خواهیم شد.

نتیجه گیری

سرانجام، ما رسالت خود را برای این پروژه React به پایان رساندیم. امیدواریم شما هم مثل ما لذت برده باشید.

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

نویسنده

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