Flux - 13 - Triggering Changes From a Store

Author: StephenGrider

imgur-client/src/components/topic-list.jsx

@@ -1,21 +1,18 @@
 var React = require('react');
+var Reflux = require('reflux');
 var TopicStore = require('../stores/topic-store');
 
 module.exports = React.createClass({
+  mixins: [
+    Reflux.listenTo(TopicStore, 'onChange')
+  ],
   getInitialState: function() {
     return {
       topics: []
     }
   },
   componentWillMount: function() {
-    TopicStore.getTopics()
-      .then(function(){
-        // We have successfully fetched topics
-        // topics are available on TopicStore.topics
-        this.setState({
-          topics: TopicStore.topics
-        });
-      }.bind(this));
+    TopicStore.getTopics();
   },
   render: function() {
     return <div className="list-group">
@@ -29,5 +26,8 @@ module.exports = React.createClass({
         {topic}
       </li>
     });
+  },
+  onChange: function(event, topics) {
+    this.setState({topics: topics});
   }
 });

imgur-client/src/stores/topic-store.jsx

@@ -6,6 +6,10 @@ module.exports = Reflux.createStore({
     return Api.get('topics/defaults')
       .then(function(json){
         this.topics = json.data;
+        this.triggerChange();
       }.bind(this));
+  },
+  triggerChange: function() {
+    this.trigger('change', this.topics);
   }
 });