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

例如，用户需要创建资源。点击“创建”按钮将调用一个动作来发送数据到API。如果资源成功创建，请发送“成功”操作。否则，请发送“失败”操作。如何从Flux中的组件检测并响应成功和失败？

组件如何响应Flux中的成功或失败？我应该在组件读取的商店中设置成功/失败标志吗？我是否应该从商店中发布单独的事件，让他们自己的听众在组件上成功/失败？

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

我只是想弄清楚最佳实践。

谢谢！

2017-05-04 Kevin Lee

你究竟做了什么取决于你使用哪种Flux实现。但是，处理它的方式差不多：

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

举例来说，如果你想在一个API调用一个成功/失败作出回应，你会做什么会在你的存储以下内容：

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

然后，您可以使用您的任何助焊剂库用于使您的组件调用实际的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) 
    } 
}

当然，这是不是这样做的唯一途径，但处理变为通量店总会归结到同一个基本组成部分：挂钩道具到商店并处理生命周期方法中道具的变化。

来源

2017-05-05 01:36:57

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

回答

相关问题