如何在 ajax 调用后更新子组件状态

Question

为了学习 React + Flux，我正在构建一个简单的撰写框，其中将段落分解为多个推文，然后通过单击一个按钮，您可以发布一系列推文。高级应用程序具有以下组件：

<div>
     <ComposeBox tweetParaText={this.state.tweetParaText} ref='composeBox' />
     <DisplayTweets tweetCollection={this.state.tweetCollection} ref='displayTweets' />
     <TweetButton signedInSignature={this.state.signedInSignature} ref='tweetButton' />
</div>

完成文本撰写后，单击 TweetButton。 TweetButton 有 4 个 UI 状态：

准备就绪（显示推文按钮）
推特（在这种情况下我展示加载 gif 并将文本从 "Tweet" 更改为 "Tweeting..")
推特成功（在这种情况下，我想将按钮的文本恢复为 "Tweet"，隐藏 ajax laoder gif 并显示消息 "Tweets sent successfully!" 持续 7 秒.)
错误（在这种情况下，我想将按钮的文本恢复为 "Tweet"，隐藏 ajax 加载程序 gif 并显示错误消息）

这些状态是 tweet 按钮所独有的，与我存储在商店中的应用程序状态不同。

TweetButton组件的onclick如下：

 _onClick:function(){
    this.setState({buttonState:tweeting});
    ActionCreator.tweet(this.props.tweetCollection,this.props.signedInSignature);
}

在此处更改状态时，会发生此状态的 UI 更改，因为这就是组件的编写方式。但是，在此之后我有点难过。

数据流是单向的，完成后的操作会向商店分派一个事件，更新其状态，从而更新 ComposeBox 组件的状态。但是如何以及在何处设置 TweetButton 组件的状态？我应该为此写一个不同的商店吗？或者有更好的方法来实现这个目标吗？

Answer 1

我使用同一家商店进行通话 status/state。

假设您的通话结果将存储在 _Tweets = {} 中；在 TweetStore 对象中。

我像这样在商店内唯一地注册结果（我猜不是强制性的）

_Tweets["someresultid/tag"] = {
    data: result.data,
    status: result.status
}

TweetStore 正在侦听 2 个事件：案例："Loading" 和案例："ReceiveResults/answer/wtv"

当用户发起呼叫时，您将与您的呼叫同时调度 "loading"。然后当它收到你发送的答案时 "answer".

您的视图正在监听商店的任何变化，当发生变化时，回调将检查状态并相应地重新呈现（领主、错误或结果）。

希望对你有帮助

如何在 ajax 调用后更新子组件状态

How to update a child component state after an ajax call

flux

reactjs

reactjs-flux