Question

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

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

如果用户仍然在屏幕A上，直到服务器返回响应，他们将收到有关请求是否成功的确认。

我使用React和Redux实现此功能的方法是使用一个负责显示确认横幅的组件。此组件侦听对Redux存储中名为postStatus的状态的更改。当用户点击该按钮时，可能会调度状态为PENDING，SUCCESS和ERROR的3个Redux操作。在它们被派遣之后 - 它们被减速器捕获，相应地改变postStatus状态。然后，此状态将映射到我的组件属性，并重新呈现以显示相关的横幅。

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

我的问题是，实施这种行为最明智的方法是什么？

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

创建一个实际上不呈现任何内容的react组件 - 它只是监听postState以及表示用户所在屏幕的一些额外状态。实施componentWillReceiveProps反应生命周期方法，如果postState为SUCCESS或ERROR，而另一个状态显示用户不在屏幕A上，则调用{{1显示通知。
如果用户不在屏幕A上，则在调度UIKit.notify()或UIKit.notify()操作时致电SUCCESS。
如果用户不在屏幕A上，则在调度ERROR或UIKit.notify()操作后缩小状态时调用SUCCESS。

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

Answer 1

我知道我来不及回答，但是我自己偶然发现了这个，所以这就是我所做的。

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

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

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

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

PROS ：可读且有效。

缺点：我看到的唯一缺点是，您让sagas知道了自己的UI库。但是您可以将其包装在单独的函数/文件/模块中，以从中提取故事。

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

1 个答案: