Ако въведете в любимата си система за търсене нещо като „Реакция на модален прозорец/диалог за потвърждение“, ще намерите много статии за тази тема, използвайки само Redux. Но какво ще стане, ако имате във вашия проект популярна и страхотна библиотека: Redux-saga. Тази история за това.

Ако вече използвате Redux за потребителски действия за потвърждение или просто обмисляте всички възможни опции за внедряването му, прочетете мотивацията за използване на Redux-saga само върху Redux: в повечето случаи вече сте написали действия при потребителски събития във вашето приложение, ако използвате Redux, трябва да пренапишете изпращането на тези действия при изпращане на действия, които отварят диалогов прозорец за потвърждение. Ако използвате Redux-saga, вие просто добавяте изпълнение на сагата за потвърждение в сагата, отговаряща за действието на потребителя. Реализацията на Redux-saga поддържа отворено-затворен принцип. В Redux-saga съхранявате цялата логика на потвърждение на едно място, така че да имате по-солидно представяне на вашия код.

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

Това е нашата сага за премахване:

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

  1. Като щракнете върху бутона за изтриване, ние ще изпратим действието за изтриване
  2. Това действие е прихванато от сага, при стартирането на което извикваме сагата за потвърждение и чакаме нейния отговор. В сагата за потвърждение ние задаваме тип модален диалог, генерираме надпревара между две действия: ModalConfirm и ModalCancel,изчакваме резултата от това състезание, затваряме нашия модален диалог, като задаваме модалния тип от 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);

Всичко това заедно изглежда така:

След това пренаписваме нашата сага за премахване:

Сега ни трябва само да създадем нашия модален диалогов прозорец.

Предпочитам да генерирам общ модален диалогов компонент, който получава параметри в зависимост от модалния тип чрез реквизитите. На този базов компонент генерирайте специфични компоненти за модални диалози, например със специфичен текст или специфичен набор от бутони. И генерирайте основен компонент, който ще отговаря за това кой конкретен модален диалогов прозорец да се покаже. Кодови фрагменти по-долу.

Общ модален диалогов компонент:

Конкретен модален диалогов компонент:

Основен компонент:

Благодаря ви, че сте с мен