How to connect my react component to reflux store?
<p>I am kinda new to React and Reflux and modern JavaScript development. Trying to learn. So, I am making a component that is basically a sort of a chat window. A list with lines and an input box. When you type something into the input box and hit enter it adds the line to the list. I made it work with pure React using setState() and now I want to make it use a Reflux store. My component code goes like this</p>

<pre><code>import React from 'react';
import Reflux from 'reflux';

import ConsoleActions from '../actions';
import ConsoleStore from '../stores';

export default React.createClass({
  mixins: [Reflux.connect(ConsoleStore, "lines")],
  render() {
    var lines = this.state.lines.map(function(line) {
      return(&lt;li&gt;{line}&lt;/li&gt;)
    });
    return (
       &lt;ul&gt;{lines}&lt;/ul&gt;
       &lt;input onKeyUp={this.enter}/&gt;
    )
  },
  enter(e) {
    if (e.keyCode == 13) {
      ConsoleActions.addConsoleLines([e.target.value]);
      e.target.value = null
    }
  }
});
</code></pre>

<p>
my actions are</p>

<pre><code>import Reflux from 'reflux';

export default Reflux.createActions(["addConsoleLines","clearConsoleLog",]);
</code></pre>

<p>and my store is 
    import Reflux from 'reflux';</p>

<pre><code>import Actions from './actions';

export default Reflux.createStore({
  lines: [],
  listenables: Actions,

  getInitialState: function() {
    return [];
  },

  addConsoleLines(lines) {
    lines.forEach(line =&gt; {
      this.lines.append(line);
    });
  },

  clearConsoleLog() {
    this.lines = []
  }
});
</code></pre>

<p>Not sure what I am missing, Reflux.connect() should connect my store to state, but I get "TypeError: this.state.lines is undefined" error.</p>