Reactjs 如何检测和响应通量中组件的成功和失败?

Reactjs 如何检测和响应通量中组件的成功和失败?,reactjs,react-router,flux,Reactjs,React Router,Flux,例如,用户需要创建一个资源。单击“创建”按钮将调用向API发送数据的操作。如果资源创建成功,则发送“成功”操作。否则,发送“失败”操作 组件如何应对流量中的成功或失败?我是否应该在组件读取的存储中设置成功/失败标志?我是否应该使用组件上自己的侦听器从存储中发出单独的事件以获得成功/失败 更具体地说,假设我想在“Success”上找到创建的资源。如果我想打开关于“失败”的特定对话框?我将如何从组件中执行该操作 我只是想找出最佳实践 谢谢 具体如何实现这一点取决于所使用的Flux实现。但是,处理的方

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

组件如何应对流量中的成功或失败?我是否应该在组件读取的存储中设置成功/失败标志?我是否应该使用组件上自己的侦听器从存储中发出单独的事件以获得成功/失败

更具体地说,假设我想在“Success”上找到创建的资源。如果我想打开关于“失败”的特定对话框?我将如何从组件中执行该操作

我只是想找出最佳实践


谢谢

具体如何实现这一点取决于所使用的Flux实现。但是,处理的方法大致相同:

通常,在任何Flux实现中,您都可以将存储连接到组件道具,这样每当更新存储时,连接到存储的任何组件都将获得更新的存储值。因此,如果您想处理对存储的任何类型的更改,您要做的是将组件连接到存储并使用,以便让组件检测对存储的更改

例如,如果您希望响应API调用中的成功/失败,您将在应用商店中执行以下操作:

{
...
runningapirect://布尔值
apiRequestResult://无论API返回什么
...
}
然后,您将使用您正在使用的任何通量库,使调用实际API请求操作的组件作为道具接收
apirequestsuccessed
apiRequestResult
。然后,您可以在组件中实现以下功能:

componentDidUpdate(prevProps,prevState){
if(!prevProps.runningapirection&&this.props.runningapirection){
//请求已启动
此.showLoadingIndicator()
}
if(prevProps.runningApiRequest&!this.props.runningApiRequest){
//请求完成,处理成功或失败
this.handleRequestResult(this.props.apiRequestResult)
}
}
当然,这不是实现这一点的唯一方法,但处理对Flux存储的更改始终可以归结为相同的基本构建块:将道具挂接到存储,并在生命周期方法中处理对道具的更改