2

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

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

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

我使用 React 和 Redux 实现这一点的方式是拥有一个负责显示确认横幅的组件。postStatus这个组件监听我的 Redux 存储中调用的状态的变化。当用户单击按钮时，可能会分派 3 个带有 statusesPENDING和的SUCCESSRedux操作。ERROR在它们被调度之后 - 它们被相应地改变postStatus状态的减速器捕获。然后，此状态会映射到我的组件属性，并重新渲染以显示相关横幅。

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

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

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

  1. 创建一个实际上不渲染任何东西的反应组件——它只是监听postState和一些额外的状态，代表用户在哪个屏幕上。实现componentWillReceivePropsreact 生命周期方法，如果postStateis SUCCESSorERROR并且其他状态表示用户不在屏幕 A 上 - 然后调用UIKit.notify()以显示通知。
  2. 如果用户不在屏幕 A 上，则UIKit.notify()在调度SUCCESSor操作时调用。ERROR
  3. 如果用户不在屏幕 A 上，则在调度或操作UIKit.notify()后减少状态时调用。SUCCESSERROR

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

4

1 回答 1

1

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

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

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

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

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

优点：它可读且有效。

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

于 2018-08-17T16:28:51.697 回答