Использование Redux для отображения уведомления в ответ на сетевой запрос

Question

Мое веб-приложение использует React, Redux и UIKit. Он состоит из экранов A и B.

Экран A содержит кнопку, которая при нажатии отправит асинхронный сетевой запрос на передачу некоторых данных на сервер.

Если пользователь остается на экране A до тех пор, пока ответ не вернется с сервера, он получит подтверждение о том, был ли запрос успешным.

Я реализовал это, используя React и Redux, с помощью компонента, который отвечает за отображение баннера подтверждения. Этот компонент слушает изменения в состоянии под названием postStatus в моем магазине Redux. Когда пользователь нажимает на кнопку, 3 действия Redux со статусами PENDING, SUCCESS а также ERROR потенциально отправлены. После того, как они отправлены - они пойманы редукторами, которые изменяют postStatus заявить соответственно. Затем это состояние сопоставляется со свойствами моих компонентов и повторно отображается для отображения соответствующего баннера.

Однако, если пользователь не остается на экране A до тех пор, пока ответ не вернется с сервера и не перейдет на экран B, вместо этого - я бы хотел, чтобы появилось уведомление, чтобы пользователь все еще знал о состоянии запроса.

У меня вопрос, что было бы наиболее разумным способом реализовать это поведение?

Вот несколько вещей, о которых я могу думать:

1. Создайте компонент реагирования, который на самом деле ничего не отображает - он просто слушает postState и некоторый дополнительный фрагмент состояния, представляющий, на каком экране находится пользователь. Реализовать componentWillReceiveProps реагировать метод жизненного цикла и, если postState является SUCCESS или же ERROR а другое состояние говорит, что пользователь включен не на экране A - затем позвоните UIKit.notify() показать уведомление.
2. Вызов UIKit.notify() при отправке SUCCESS или же ERROR действие, если пользователь не на экране А.
3. Вызов UIKit.notify() при уменьшении состояния после отправки SUCCESS или же ERROR действие, если пользователь не на экране А.

Скорее всего, есть много других решений, поэтому я хотел бы услышать некоторые из них.

Answer 1

Я знаю, что опаздываю на ответ, но сам наткнулся на это, так что вот что я сделал.

На мой взгляд, временное уведомление является побочным эффектом приложения. В моем проекте я использую redux-сагу, но вы можете добиться этого, используя любую другую библиотеку побочных эффектов.

Код (используя удаление пользователя в качестве примера):

...
function* deleteUserSuccess(action) {
    yield call(message.success, 'Successful deletion!');
}

const watchDeleteUserSuccess = function* () {
    yield takeEvery(types.DELETE_USER_SUCCESS, deleteUserSuccess);
}
...

ПРОФИ: Это читабельно, и это работает.

Минусы: Единственный недостаток, который я вижу, это то, что вы доносите саги о своей библиотеке пользовательского интерфейса. Но вы можете обернуть его в отдельную функцию / файл / модуль, чтобы абстрагироваться от саги.