Flux - 12 - Working with Stores

Author: StephenGrider

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

@@ -1,5 +1,5 @@
 var React = require('react');
-var Api = require('../utils/api');
+var TopicStore = require('../stores/topic-store');
 
 module.exports = React.createClass({
   getInitialState: function() {
@@ -8,11 +8,13 @@ module.exports = React.createClass({
     }
   },
   componentWillMount: function() {
-    Api.get('topics/defaults')
-      .then(function(data){
+    TopicStore.getTopics()
+      .then(function(){
+        // We have successfully fetched topics
+        // topics are available on TopicStore.topics
         this.setState({
-          topics: data.data
-        })
+          topics: TopicStore.topics
+        });
       }.bind(this));
   },
   render: function() {

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

@@ -0,0 +1,11 @@
+var Api = require('../utils/api');
+var Reflux = require('reflux');
+
+module.exports = Reflux.createStore({
+  getTopics: function() {
+    return Api.get('topics/defaults')
+      .then(function(json){
+        this.topics = json.data;
+      }.bind(this));
+  }
+});