Если вы наберете в своей любимой поисковой системе что-то вроде «Реакция модального окна / диалогового окна подтверждения», вы найдете множество статей об этой теме, использующих только Redux. Но что делать, если в вашем проекте есть популярная и классная библиотека: Redux-saga. Этот рассказ об этом.

Если вы уже используете Redux для подтверждения действий пользователя или просто рассматриваете все возможные варианты его реализации, прочтите мотивацию использования Redux-saga только поверх Redux: в большинстве случаев вы уже написали действия с пользовательскими событиями в вашем приложении, если вы используете Redux, вам нужно переписать отправку этих действий при отправке действий, которые открывают диалоговое окно подтверждения. Если вы используете Redux-saga, вы просто добавляете выполнение саги подтверждения в сагу, отвечающую за действия пользователя. Реализация Redux-saga поддерживает принцип «открыто-закрыто». В Redux-saga вы храните всю логику подтверждения в одном месте, чтобы у вас было более надежное представление вашего кода.

Изображение, которое нам нужно, добавим в наш диалог подтверждения удаления элемента в списке. Логика удаления уже существует, и мы просто отправляем действие, которое вызывает сагу, внутри которой мы отправляем запрос на сервер.

Это наша сага об удалении:

Прежде всего, мы начнем с описания логики, которую мы будем реализовывать в будущем:

  1. Нажав на кнопку удаления, мы отправим действие удаления.
  2. Это действие перехватывает сага, при запуске которой мы вызываем сагу подтверждения и ждем ее ответа. Внутри саги о подтверждении мы устанавливаем тип модального диалога, генерируем гонку между двумя действиями: ModalConfirm и ModalCancel, ждем результата этой гонки, закрываем наш модальный диалог, задав модальный тип of undefined, вернуть результат нашей гонки из саги. Внутри саги подтверждения мы открываем модальный диалог, ожидая решения пользователя, закрываем модальный диалог и возвращаем решение пользователя из саги.
  3. Если пользователь подтверждает действие, мы вызываем это действие, в противном случае мы ничего не делаем.

Начните с реализации саги о подтверждении.

  1. Установите тип модального диалога. Это просто действие, которое записывает в наше хранилище Redux указанный нами тип. В будущем мы будем читать этот тип и показывать модальный диалог в зависимости от него.
yield put(setConfirmModalType(modalType));

2. Сгенерируйте гонку между двумя действиями: ModalConfirm и ModalCancel, используя эффекты гонки из redux-saga , дождитесь результата этой гонки.

const { yes } = yield race({
  yes: take(TYPES.MODAL_CONFIRM),
  no: take(TYPES.MODAL_CANCEL)
});

3. Закройте наш модальный диалог, установив модальный тип undefined и верните результат нашей гонки из саги.

yield put(setConfirmModalType(null));
return Boolean(yes);

Все вместе выглядит так:

После этого мы переписываем нашу сагу об удалении:

Теперь нам нужно только создать наш модальный диалог.

Я предпочитаю генерировать общий компонент модального диалога, который получает параметры в зависимости от модального типа через реквизиты. На этом базовом компоненте генерируются определенные компоненты модальных диалогов, например, с определенным текстом или определенным набором кнопок. И сгенерируйте корневой компонент, который будет отвечать за то, какой конкретный модальный диалог показывать. Фрагменты кода ниже.

Стандартный компонент модального диалога:

Конкретный компонент модального диалога:

Корневой компонент:

Спасибо, что были со мной