Flux - 20 - Implementing Image Store

Author: StephenGrider

imgur-client/src/actions.jsx

@@ -1,5 +1,6 @@
 var Reflux = require('reflux');
 
 module.exports = Reflux.createActions([
-  'getTopics'
+  'getTopics',
+  'getImages'
 ]);

imgur-client/src/components/topic.jsx

@@ -1,9 +1,26 @@
 var React = require('react');
+var Actions = require('../actions');
+var ImageStore = require('../stores/image-store');
+var Reflux = require('reflux');
 
 module.exports = React.createClass({
+  mixins: [
+    Reflux.listenTo(ImageStore, 'onChange')
+  ],
+  getInitialState: function() {
+    return {
+      images: []
+    }
+  },
+  componentWillMount: function() {
+    Actions.getImages(this.props.params.id);
+  },
   render: function() {
     return <div>
-      I am a topic!
+
     </div>
+  },
+  onChange: function(event, images) {
+    this.setState({images: images})
   }
-})
+});

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

@@ -0,0 +1,17 @@
+var Reflux = require('reflux');
+var Api = require('../utils/api');
+var Actions = require('../actions');
+
+module.exports = Reflux.createStore({
+  listenables: [Actions],
+  getImages: function(topicId){
+    Api.get('topics/' + topicId)
+      .then(function(json){
+        this.images = json.data;
+        this.triggerChange();
+      }.bind(this));
+  },
+  triggerChange: function() {
+    this.trigger('change', this.images);
+  }
+});