small flux demo

small-flux-demo.js

const EventEmitter = require('events');

const random = () => ('' + Math.random()).substr(2)

class Dispatcher extends EventEmitter {
  constructor () {
    super()
    this.token = `dispatch_${random()}`
    this.dispatch = this.dispatch.bind(this)
  }

  dispatch (payload) {
    this.emit(this.token, payload)
  }
}

class Store extends EventEmitter {
  constructor (dispatcher) {
    super()
    this._listeners = {}
    this._dispatcher = dispatcher
    this.emit = this.emit.bind(this)
    this.__dispatch = this.__dispatch.bind(this)
    dispatcher.on(dispatcher.token, this.__dispatch)
  }

  getDispatcher () {
    return this._dispatcher
  }

  addListener (fn) {
    let token
    do {
      token = random()
    } while (this._listeners[token])
    super.addListener('CHANGE', fn)
    this._listeners[token] = fn
    return token
  }

  remove (token) {
    const fn = this._listeners[token] || {}
    if (fn) {
      this.removeListener('CHANGE', fn)
    }
  }

  emit () {
    super.emit('CHANGE')
  }

  __dispatch (payload) {
    throw new Error('needs implementation')
  }
}

// ---- implementation ----

class MyStore extends Store {
  constructor (dispatcher) {
    super(dispatcher)
    this.store = {}
  }

  __dispatch (payload) {
    console.log('__dispatch', payload)
    this.store = payload
    this.emit()
  }
}

class Component {
  constructor (store) {
    this._store = store
    this.onChange = this.onChange.bind(this)
    this.tokens = []
    this.componentDidMount()
  }

  componentDidMount () {
    this.tokens.push(this._store.addListener(this.onChange))
  }

  componentWillUnmount () {
    this.tokens.forEach((token) => this._store.remove(token))
  }

  onChange () {
    console.log('onChange', this._store.store, this.tokens)
    this.tokens.forEach((token) => this._store.remove(token))
  }
}

;(function test () {
  const dispatcher = new Dispatcher()
  const store = new MyStore(dispatcher)
  const comp = new Component(store)
  dispatcher.dispatch({type: 'TEST', hello: 'world'})
})()