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

Question

例如，用户需要创建一个资源。单击 "create" 按钮将调用将数据发送到 API 的操作。如果资源创建成功，派发一个 "Success" 动作。否则，调度一个 "Failure" 动作。

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

更具体地说，假设我想路由到 "Success" 上创建的资源。如果我想在 "Failure" 上打开一个特定的对话框？我如何从组件中做到这一点？

我只是想找出最佳做法。

谢谢！

Answer 1

具体如何执行此操作取决于您使用的 Flux 实现。不过处理方法大同小异：

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

例如，如果您想在 API 呼叫中响应 success/failure，您将在您的商店中执行以下操作：

{
    ...
    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 商店的更改将始终归结为相同的基本构建块：将道具挂接到商店并处理生命周期方法中道具的更改。

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

How can I detect and respond to success and failure from a component in Flux?

reactjs

react-router

flux