Make a dispatcher:

```js
import { Dispatcher } from 'flux';

export default new Dispatcher();
```

Set up the actions:

```js
import AppDispatcher from './AppDispatcher';

export const updateNumberOfPeople = (value) => {
  AppDispatcher.dispatch({
    type: 'UPDATE_NUMBER_OF_PEOPLE',
    value,
  });
}

export const updateSlicesPerPerson = (value) => {
  AppDispatcher.dispatch({
    type: 'UPDATE_SLICES_PER_PERSON',
    value,
  });
}

export const reset = (value) => {
  AppDispatcher.dispatch({
    type: 'RESET',
  });
}
```

Let's start the store:

```js
import EventEmitter from 'events';
import { AppDispatcher } from './AppDispatcher';

export default class PizzaCalculatorStore extends EventEmitter {
  constructor() {
    super();
  }
}
```

Implement the actions:

```js
export default class PizzaCalculatorStore extends EventEmitter {
  constructor() {
    super();

    AppDispatcher.register((action) => {
      if (action.type === 'UPDATE_NUMBER_OF_PEOPLE') {
        calculator.numberOfPeople = action.value;
        this.emit('change');
      }

      if (action.type === 'UPDATE_SLICES_PER_PERSON') {
        calculator.slicesPerPerson = action.value;
        this.emit('change');
      }

      if (action.type === 'RESET') {
        calculator = { ...initialState };
        this.emit('change');
      }
    });
  }
}
```

Export it.

```js
export default new PizzaCalculatorStore();
```

Let's use the container pattern!

```js
class ApplicationContainer extends Component {
  state = pizzaCalculator.getState();

  updateCalculations = () => {
    this.setState(pizzaCalculator.getState());
  }

  componentDidMount() {
    pizzaCalculator.on('change', this.updateCalculations);
  }

  componentWillUnmount() {
    pizzaCalculator.off('change', this.updateCalculations);
  }

  render() {
    return (
      <PizzaCalculator
        {...this.state}
        updateNumberOfPeople={actions.updateNumberOfPeople}
        updateSlicesPerPerson={actions.updateSlicesPerPerson}
        reset={actions.reset}
      />
    );
  }
}
```

Cool, now we can refactor the presenter to receive props. We also want it to handle the dumb stuff with inputs.

```js
class PizzaCalculator extends Component {
  updateNumberOfPeople = (event) => {
    const value = parseInt(event.target.value, 10);
    this.props.updateNumberOfPeople(value);
  }

  updateSlicesPerPerson = (event) => {
    const value = parseInt(event.target.value, 10);
    this.props.updateSlicesPerPerson(value);
  }

  reset = () => {
    this.props.reset();
  }

  render() {
    const {
      numberOfPeople,
      slicesPerPerson,
      reset,
    } = this.props;

    const numberOfPizzas = calculatePizzasNeeded(
      numberOfPeople,
      slicesPerPerson,
    );

    return (
      <div className="Application">
        <Title />
        <Input
          label="Number of Guests"
          type="number"
          min={0}
          value={numberOfPeople}
          onChange={this.updateNumberOfPeople}
        />
        <Input
          label="Slices Per Person"
          type="number"
          min={0}
          value={slicesPerPerson}
          onChange={this.updateSlicesPerPerson}
        />
        <Result amount={numberOfPizzas} />
        <button className="full-width" onClick={reset}>
          Reset
        </button>
      </div>
    );
  }
}
```