EZ Store Listening

example.js

// some pieces of this file have been omitted

let React        = require('react')
let notesStore   = require('../../stores/notesStore')
let monitorMixin = require('../../mixins/monitorMixin')

let Notes = React.createClass({
  mixins: [monitorMixin(notesStore)]

  // this gets called whenever `notesStore` emits a change event
  getState() {
    return notesStore.getState().notes
  },

  getInitialState() {
    return this.getState()
  },

  render() {
    return (
      <div>
        <h3> Notes for { this.props.username } </h3>
        <AddNote username={ this.props.username } />
        <NotesList notes={ this.state.notes } />
      </div>
    )
  }
})

module.exports = Notes

monitorMixin.js

// monitorMixin expects the component that mixes it in to implement a `getState()` 
// function which grabs state from the store and returns just what this component cares about

module.exports = (store) => {
  return {
    componentDidMount() {
      store.addChangeListener(this._onChange)
    },

    componentWillUnmount() {
      store.removeChangeListener(this._onChange)
    },

    _onChange() {
      this.setState(this.getState())
    }
  }
}