Flux - 32 - Listening to Many Changes in a Component

Author: StephenGrider

imgur-client/src/components/comment-box.jsx

@@ -0,0 +1,10 @@
+var React = require('react');
+
+module.exports = React.createClass({
+  render: function(){
+    return <div>
+      I am a comment box.
+      {this.props.comments}
+    </div>
+  }
+});

imgur-client/src/components/image-detail.jsx

@@ -1,15 +1,19 @@
 var React = require('react');
 var Reflux = require('reflux');
 var ImageStore = require('../stores/image-store');
+var CommentStore = require('../stores/comment-store');
 var Actions = require('../actions');
+var CommentBox = require('./comment-box');
 
 module.exports = React.createClass({
   mixins: [
-    Reflux.listenTo(ImageStore, 'onChange')
+    Reflux.listenTo(ImageStore, 'onChange'),
+    Reflux.listenTo(CommentStore, 'onChange')
   ],
   getInitialState: function() {
     return {
-      image: null
+      image: null,
+      comment: null
     }
   },
   componentWillMount: function() {
@@ -33,8 +37,17 @@ module.exports = React.createClass({
           <h5>{this.state.image.description}</h5>
         </div>
       </div>
+      <h3>Comments</h3>
+      {this.renderComments()}
     </div>
   },
+  renderComments: function() {
+    if(!this.state.comments){
+      return null
+    }
+
+    return <CommentBox comments={this.state.comments} />
+  },
   renderImage: function() {
     if(this.state.image.animated) {
       return <video preload="auto" autoPlay="autoplay" loop="loop" webkit-playsinline>
@@ -46,7 +59,8 @@ module.exports = React.createClass({
   },
   onChange: function() {
     this.setState({
-      image: ImageStore.find(this.props.params.id)
+      image: ImageStore.find(this.props.params.id),
+      comments: CommentStore.comment
     });
   }
 });