如何检测 Flux 中组件的成功和失败并做出响应？

Question

例如，用户需要创建资源。单击“创建”按钮将调用操作以将数据发送到 API。如果资源创建成功，则发送“成功”操作。否则，发送一个“失败”动作。

组件如何响应 Flux 中的成功或失败？我应该在组件读取的商店中设置成功/失败标志吗？我是否应该在组件上使用自己的侦听器从商店发出单独的事件以判断成功/失败？

更具体地说，假设我想路由到“成功”上创建的资源。如果我想打开一个关于“失败”的特定对话框？我将如何从组件中做到这一点？

我只是想找出最佳做法。

谢谢！

Answer 1

具体如何执行取决于您使用的 Flux 实现。不过处理的方式还是差不多的：

一般来说，在任何 Flux 实现中，您都可以将 store 连接到组件 props，这样每当您的 store 更新时，连接到 store 的任何组件都将获得更新后的 store 值。因此，如果您想处理对商店的任何更改，您要做的就是将您的组件连接到商店并使用component update methods 以便让您的组件检测对商店的更改。

例如，如果您想在 API 调用中响应成功/失败，您会在商店中执行以下操作：

{
    ...
    runningApiRequest: //boolean value
    apiRequestResult: //whatever your API returns
    ...
}

然后，您将使用您正在使用的任何 Flux 库来使调用实际 API 请求操作的组件接收 apiRequestSucceeded 和 apiRequestResult 作为道具。在您的组件中，您可以实现以下内容：

componentDidUpdate(prevProps, prevState) {
    if (!prevProps.runningApiRequest && this.props.runningApiRequest) {
      // request started
      this.showLoadingIndicator()
    }
    if (prevProps.runningApiRequest && !this.props.runningApiRequest) {
      // request finished, handle success or failure
      this.handleRequestResult(this.props.apiRequestResult)
    }
}

当然，这不是唯一的方法，但处理对 Flux 存储的更改将始终归结为相同的基本构建块：将道具挂钩到存储并在生命周期方法中处理道具更改。