title: General State Questions with ReactJS & Reflux
body: <p>I'm pretty new to React and am trying to wrap my mind around Reflux.</p>
  
  <p>Here's my scenario:</p>
  
  <p>I currently have a very simple app that is calling some song data from a rest api, once retrieved, it is being stored in state.songs (this is happening within an Init function in the song store):</p>
  
  <pre><code>var SongStore = Reflux.createStore({
    listenables: [SongActions],
  
    getInitialState: function() {
      return []
    },
  
    init: function() {
      request('http://127.0.0.1:1337/api/songs', function(error, response, body) {
        if (!error &amp;&amp; response.statusCode == 200) {
          var content = JSON.parse(body);
          this.trigger(content);
        }
      }.bind(this));
    },
  
    onHandleClick: function(album_link) {
    // this.state.songs is undefined here??
    }
  
   });
  </code></pre>
  
  <p>Here's the component that's rendering the song data:</p>
  
  <pre><code>var Home = React.createClass({
  
  mixins: [Reflux.connect(SongStore, 'songs')],
  
  render: function() {
    return (
      &lt;div className={'react-app-home'}&gt;
        &lt;div className="float-left"&gt;
          &lt;div className="song-data"&gt;
            {this.state.songs.map(function(song) {
              return &lt;div&gt;&lt;p&gt;{song.lyrics}&lt;/p&gt;&lt;/div&gt;
            })}
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div className="float-right"&gt;
          &lt;AlbumList /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
   }
  });
  </code></pre>
  
  <p>This is all working as intended.</p>
  
  <p>I also have a list of albums, which is rendered in it's own component (and has it's own store), and i'm trying to hook up a click function on an album item, so once an album title is clicked, this.state.songs is filtered and the songs component is re-rendered.</p>
  
  <p>The issue i'm having is when I try to access this.state.songs from the song store, it's undefined (see onHandleClick func in song store above).</p>
  
  <p>Album list component:</p>
  
  <pre><code>var AlbumList = React.createClass({
    mixins: [Reflux.connect(AlbumStore, 'albums'),        
    Reflux.connect(SongStore, 'songs')],
    render: function() {
      return (
        &lt;div className="album-list"&gt;
          {this.state.albums.map(function(album) {
          return &lt;p onClick={SongStore.onHandleClick.bind(null, album.album_link)}&gt;{album.album_name}&lt;/p&gt;
          })}
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p>Album list store:</p>
  
  <pre><code>var AlbumStore = Reflux.createStore({
    listenables: [AlbumActions],
    getInitialState: function() {
      return [];
    },
  
    onReload: function() {
      request('http://0.0.0.0:1337/api/albums', function(error, response, body) {
        if (!error &amp;&amp; response.statusCode == 200) {
          var content = JSON.parse(body);
          this.trigger(content);
        }
      }.bind(this));
    },
  
    init: function() {
      this.onReload();
    }
  });
  </code></pre>
  
  <p>Can anyone help me out? An answer with some explaining would be awesome so I can understand what the problem is.</p>
  
  <p>Thanks!</p>