React and Flux example for screencast

app.jsx

import React from 'react'
import {Dispatcher} from 'flux'
import {EventEmitter} from 'events'
import keyMirror from 'fbjs/lib/keyMirror'

import './app.sass'

const actions = keyMirror({
  PLUS_ACTION:  null,
  MINUS_ACTION: null
})

const appDispatcher = new Dispatcher()

const handleClick = (action) => {
  appDispatcher.dispatch(action)
}

let initialState = {count: 0}

const store = Object.assign({}, EventEmitter.prototype, {
  setState: (newState) => {
    initialState = newState
    store.emit('change')
  },
  getState: () => {
    return initialState
  },
  addChangeListener: (callback) => {
    store.on('change', callback)
  },
  removeChangeListener: (callback) => {
    store.removeListener('change', callback)
  }
})

appDispatcher.register(action => {
  const state = store.getState()
  console.log('before state', state)

  switch (action.type) {
    case actions.PLUS_ACTION: {
      const {value} = action
      store.setState({count: state.count + value})
      break
    }
    case actions.MINUS_ACTION: {
      const {value} = action
      store.setState({count: state.count - value})
      break
    }
    default:
      // nothing
  }

  console.log('after state', store.getState())
})


class DashboardButton extends React.Component {
  constructor(props, context) {
    super(props, context)
    this.state = store.getState()
  }

  componentDidMount() {
    store.addChangeListener(this.updateState.bind(this))
  }

  componentWillUnmount() {
    store.removeChangeListener(this.updateState.bind(this))
  }

  updateState() {
    this.setState(store.getState())
  }

  render() {
    const {count} = this.state

    return (
      <div>
        <h2>Counter: {count}</h2>
      </div>
    )
  }
}


class MinusButton extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.onButtonClick.bind(this)}>Minus one</button>
      </div>
    )
  }

  onButtonClick(e) {
    e.preventDefault()
    handleClick({
      type:  actions.MINUS_ACTION,
      value: 1
    })
  }
}

class PlusButton extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.onButtonClick.bind(this)}>Plus one</button>
        <button onClick={this.onButton10Click.bind(this)}>Plus 10</button>
      </div>
    )
  }

  onButtonClick(e) {
    e.preventDefault()
    handleClick({
      type:  actions.PLUS_ACTION,
      value: 1
    })
  }

  onButton10Click(e) {
    e.preventDefault()
    handleClick({
      type:  actions.PLUS_ACTION,
      value: 10
    })
  }
}

export default class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello RWcasts!</h1>
        <DashboardButton />
        <PlusButton />
        <MinusButton />
      </div>
    )
  }
}