CODEWITHSUNDEEP
reactjsreactjs-fluxflux
shashi
shashi

Reputation: 4696

How to update a child component state after an ajax call

To learn react + flux, I am building a simple compose box where the paragraph is broken down into multiple tweets and then by clicking a button you can tweet the series of tweets. The high level app has the following components: 

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

Once you are done composing the text, you click on the TweetButton. The TweetButton has 4 UI states:

  1. Ready (Show the Tweet Button)
  2. Tweeting (in which case I show a loading gif as well as change the text from "Tweet" to "Tweeting..")
  3. Tweeted Succesfully (In which case I want to revert text of the button to "Tweet", hide the ajax laoder gif and show a message "Tweets sent successfully!" for a duration of 7 seconds.)
  4. Error (In which case I want to revert text of the button to "Tweet", hide the ajax loader gif and show an error message)

These states are unique to the tweet button and are different from the application state which I am storing in the store.

The onclick of the TweetButton component is as follows:

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

On changing the state here, the UI changes for this state happen, as that is how the component has been written. However, I am a bit stumped after this.

The flow of data being unidirectional, the action upon completion dispatches an event to the store which updates its state and thus the state of the ComposeBox component. But how and where do I set the state of the TweetButton component? Should I write a different store for this? Or is there a better way of achieving this?

Upvotes: 1

Views: 264

Answers (1)

Fran&#231;ois Richard
Fran&#231;ois Richard

Reputation: 7045

I use the same store for the status/state of the call.

Lets say the result of your call will be stored in _Tweets = {}; inside the TweetStore object.

I register the results uniquely (not mandatory I guess) inside the store like this 

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

TweetStore is listening for 2 events : case : "Loading" and case : "ReceiveResults/answer/wtv"

When the user initiate the call you'll dispatch "loading" at the same time than your call. Then when it receive the answer you dispatch "answer".

Your view is listening for any change of your store, when a change occurs the callback will check the status and rerender accordingly (lording,error or result).

I hope it helps

Upvotes: 1

Related Questions