Modern React From The Beginning EP12: добавление действия удаления

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Ссылка на видео:

Эпизоды

В последнем выпуске мы представили ловушку useReducer для управления состоянием курсов в компоненте App. Пока что мы реализовали только один тип действия в нашей функции-редукторе: SET_COURSES. В этом эпизоде мы собираемся улучшить функцию редуктора, представив еще один тип действия для удаления одного курса. Кроме того, мы вносим необходимые изменения, чтобы добавить кнопку «Удалить» и соответствующую функцию обработчика событий клика, которая используется для отправки нового типа действия.

Адаптация функции редуктора

Давайте адаптируем функцию courseReducer, как показано в следующем листинге кода:

const coursesReducer = (state, action) => {
  switch(action.type) {
    case 'SET_COURSES':
      return action.payload;
    case 'REMOVE_COURSE':
      return state.filter(
        course => action.payload.id !== course.id
      );
    default: 
      throw new Error();
  }
};

Здесь мы добавили еще один кейс, который обрабатывает тип действия REMOVE_COURSE. Этот тип действия используется для удаления отдельного элемента курса из списка курсов, который хранится в состоянии. Чтобы удалить элемент, мы можем получить доступ к текущему значению состояния через state, применим фильтр, вызвав метод filter, а затем удалив элемент из массива. .

Реализация обработчика курса удаления

Теперь, когда мы улучшили функцию редуктора, нам нужно добавить код, необходимый для отправки и вызова действия REMOVE_COURSE. Мы сделаем это, добавив кнопку к выходным данным каждого элемента курса и добавив функцию обработчика события клика, которая затем будет вызывать соответствующее действие удаления. Функция handleRemoveCourse реализована в App.js и выглядит следующим образом:

const handleRemoveCourse = course => {
    dispatchCourses({
      type: 'REMOVE_COURSE',
      payload: course
    });
  }

Внутри функции обработчика событий мы используем функцию dispatchCourses для отправки действия REMOVE_COURSE. Текущий элемент курса, который необходимо удалить, назначается свойству payload объекта, который передается в dispatchCourses.

Поскольку мы реализовали функцию handleRemoveCourse в App.js, нам также необходимо сделать ее доступной внутри компонента CoursesList (потому что в компоненте CoursesList мы добавим кнопку «Удалить»). Это можно сделать, добавив еще одно свойство компонента:

<CoursesList courses={filteredCourses} handleRemoveCourse={handleRemoveCourse} />

Добавление кнопки удаления в компонент CoursesList

Наконец, мы готовы добавить дополнительную кнопку в JSX-код компонента CoursesList:

import React from 'react';
const CoursesList = ({courses, handleRemoveCourse}) => {
    return courses.map(course => {
      return (
        <div key={course.id}>
          <span>
            <a href={course.url}><h4>{course.title}</h4></a>
          </span>
          <span>by <strong>{course.author}</strong></span>
          <span>| Video Hours: {course.hours_video}</span>
          <span>| Number of Lectures: {course.number_of_lectures}</span>
          <span>| Rating: {course.rating}</span>
          <span>
            <button type="button" onClick={() => handleRemoveCourse(course)}>
              Remove
            </button>
          </span>
          <br/><br/>
        </div>
      );
    });
  }
  export default CoursesList;

Компонент принимает свойство handleRemoveCourse и вызывает эту функцию обработчика событий внутри обработчика событий для события click кнопки. Текущий объект course передается в вызов этой функции.

Modern React From The Beginning EP12: добавление действия удаления