آموزش React مقدماتی قسمت دوازدهم: افزودن Delete Action

قسمت ها

در قسمت قبلی، useReducer hook را برای مدیریت دوره های آموزشی در کامپوننت App معرفی کردیم. تاکنون، ما فقط یک نوع action را در تابع reducer خود پیاده سازی کرده ایم: SET_COURSES. در این قسمت قصد داریم تابع reducer را با معرفی یک نوع action دیگر برای حذف یک دوره واحد افزایش دهیم. بعلاوه ما در حال انجام تغییرات لازم برای افزودن دکمه Delete و یک تابع event handler هستیم که با کلیک کردن برای ارسال نوع action جدید استفاده می شود.

تطبیق تابع Reducer

بیایید تابع courseReducer را مطابق آنچه در کد زیر مشاهده می کنید تطبیق دهیم:

در اینجا ما مورد دیگری را اضافه کرده ایم که action نوع REMOVE_COURSE  را مدیریت می کند. این نوع action برای حذف یک واحد درسی از لیست دروس ذخیره شده در state استفاده می شود. برای حذف آیتم، ما می توانیم از طریق state به مقدار state فعلی دسترسی پیدا کرده، با فراخوانی متود filter و سپس حذف آیتم از آرایه، فیلتر را اعمال کنیم.

پیاده سازی حذف Course

اکنون که تابع reducer را بهبود بخشیده ایم، باید کدی را که برای dispatch و فراخوانی action نوع REMOVE_COURSE لازم است، اضافه کنیم. ما این کار را با اضافه کردن یک دکمه به خروجی هر دوره و اضافه کردن یک تابع event handler کلیک که در نهایت آیتم مربوطه را حذف می کند، انجام خواهیم داد. تابع handleRemoveCourse در App.js پیاده سازی شده است که در زیر می توانید آن را مشاهده کنید:

در داخل تابع event handler، ما از تابع dispatchCourses برای ارسال action نوع REMOVE_COURSE استفاده می کنیم. آیتم فعلی دوره ای که باید حذف شود به ویژگی payload شی که باید به dispatchCourses پاس داده شود، اختصاص می یابد.

همانطور که ما تابع handleRemoveCourse را در App.js پیاده سازی کرده ایم، باید آن را در داخل کامپوننت CoursesList نیز در دسترس قرار دهیم (زیرا در کامپوننت CoursesList قصد داریم دکمه Delete را اضافه کنیم). این کار را می توان با افزودن ویژگی دیگری از کامپوننت انجام داد:

افزودن دکمه حذف در کامپوننت CursesList

نهایتا ما دکمه مربوط به delete را به کد JSX کامپوننت CoursesList اضافه می کنیم:

کامپوننت، prop handleRemoveCourse را پذیرفته و این تابع event handler را در event handler کلیک button فراخوانی می کند و شی course فعلی هم به آن تابع منتقل می شود.

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

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

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