React: Building Modern Web Applications

Refactoring the StreamTweet component

StreamTweet renders a tweet image that a user can click on to add it to a collection of tweets. You might have already guessed that we're going to create and dispatch a new action when a user clicks on that tweet image.

First, we import the CollectionActionCreators module to the StreamTweet component:

var CollectionActionCreators = require('../actions/CollectionActionCreators');

Then, we add a new addTweetToCollection() method to it:

addTweetToCollection: function (tweet) {
  CollectionActionCreators.addTweetToCollection(tweet);
},

The addTweetToCollection() is a callback function that should be invoked when a user clicks on a tweet image. Let's take a look at this line in the render() method:

<Tweet tweet={tweet} ...