Question

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

<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以及更改＆＃34; Tweet＆＃34;到＆＃34;推特......＆＃34;）
Tweeted Succesfully（在这种情况下，我想将按钮的文本恢复为＆＃34; Tweet＆＃34;，隐藏ajax laoder gif并显示消息＆＃34;推文发送成功！＆＃34; for a持续时间为7秒。）
错误（在这种情况下，我想将按钮的文本恢复为＆＃34;推文＆＃34;，隐藏ajax加载程序gif并显示错误消息）

这些状态对于推文按钮是唯一的，并且与我在商店中存储的应用程序状态不同。

TweetButton组件的onclick如下：

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

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

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

Answer 1

我使用同一商店作为通话的状态/状态。

让我们说你的通话结果将存储在_Tweets = {};在TweetStore对象中。

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

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

TweetStore正在收听2个事件：案例：＆＃34;正在加载＆＃34;和案例：＆＃34; ReceiveResults / answer / wtv＆＃34;

当用户发起呼叫时，您将发送＆＃34; loading＆＃34;与你的通话同时进行。然后，当它收到答案时，你发送＆＃34;回答＆＃34;。

您的视图正在侦听您的商店的任何更改，当发生更改时，回调将检查状态并相应地重新呈现（lording，error或result）。

我希望它有所帮助

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

1 个答案: