使用 Redux 显示响应网络请求的通知

Question

我的网络应用程序使用 React、Redux 和 UIKit。它由屏幕A和B组成。

屏幕 A 包含一个按钮 - 按下 - 将向 post 向服务器发送一些数据的异步网络请求。

如果用户在服务器响应 returns 之前一直停留在屏幕 A 上，他们将收到有关请求是否成功的确认信息。

我使用 React 和 Redux 实现这个的方法是有一个组件负责显示确认横幅。该组件监听我的 Redux 存储中名为 postStatus 的状态的变化。当用户单击按钮时，可能会调度状态为 PENDING、SUCCESS 和 ERROR 的 3 个 Redux 操作。在它们被发送之后——它们被 reducers 捕获，reducers 相应地改变 postStatus 状态。这个状态然后被映射到我的组件属性，它被重新渲染以显示相关的横幅。

但是，如果用户在服务器响应 returns 之前没有停留在屏幕 A 上，而是导航到屏幕 B - 我希望显示 notification 以便用户仍然知道请求的状态。

我的问题是，实现此行为最明智的方法是什么？

以下是我能想到的几件事：

创建一个实际上不呈现任何内容的 React 组件 - 它只是监听 postState 和一些额外的状态，表示用户所在的屏幕。实施 componentWillReceiveProps 反应生命周期方法，如果 postState 是 SUCCESS 或 ERROR 并且其他状态表示用户不在屏幕 A 上 - 然后调用 UIKit.notify() 显示通知。
如果用户不在屏幕 A 上，则在调度 SUCCESS 或 ERROR 操作时调用 UIKit.notify()。
如果用户不在屏幕 A 上，则在调度 SUCCESS 或 ERROR 操作后减少状态时调用 UIKit.notify()。

很可能还有很多其他解决方案，所以我很想听听一些。

Answer 1

我知道我迟到了，但我自己偶然发现了这个，所以这就是我所做的。

我的看法是临时通知是应用程序的副作用。在我的项目中，我使用 redux-saga，但您可以使用任何其他副作用库实现此目的。

代码（以删除用户为例）：

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

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

优点：可读性好，有效。

缺点：我看到的唯一缺点是您让您的 sagas 了解您的 UI 库。但是您可以将它包装在一个单独的 function/file/module 中以从中抽象出传奇。

使用 Redux 显示响应网络请求的通知

Using Redux to display a notification in response to a network request

reactjs

getuikit

redux