Higher-order component form of connectToStores

connectToStores.js

import React from 'react'

/**
 * Higher-order component form of connectToStores
 *
 * @param {ReactElement} Component
 * @param {Store[]} stores
 * @param {Object} getStateFromStores
 * @returns {ReactElement} StoreConnection
 */
export default function connectToStores (Component, stores, getStateFromStores) {
  return class StoreConnection extends React.Component {
    state = getStateFromStores(this.props)

    onChange = () => {
      this.setState(getStateFromStores(this.props))
    }

    componentDidMount () {
      stores.forEach((store) => store.addChangeListener(this.onChange))
    }

    componentWillUnmount () {
      stores.forEach((store) => store.removeChangeListener(this.onChange))
    }

    render () {
      return <Component {...this.props} {...this.state} />
    }
  }
}

Store.js

import { EventEmitter } from 'events'
import Dispatcher from '../Dispatcher'

const CHANGE_EVENT = 'change'

/**
 * Extend certain stores from a this `Store` class
 */
export default class Store extends EventEmitter {
  emitChange () {
    this.emit(CHANGE_EVENT)
  }

  addChangeListener (listener) {
    this.addListener(CHANGE_EVENT, listener)
  }

  removeChangeListener (listener) {
    this.removeListener(CHANGE_EVENT, listener)
  }
}