reducerComponent2.js

import React from 'react';

class ReducerComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  reducer = {};

  dispatch = action =>
    this.setState((state, props) => this.reducer[action](state, props));
}



// this can be defined anywhere
const counter = {
  increment: (state, props) => ({ ...state, count: state++ }),
  decrement: (state, props) => ({ ...state, count: state.count-- }),
}

class Counter extends ReducerComponent {
  state = {
    count: 0,
  };

  reducer = {
    ...counter, // nicer than combine reducer amirite?
    reset: (state, props) => ({ ...state, count: 0 }),
  };

  render() {
    return (
      <div>
        Counter: {this.state.count}
        <button onClick={() => this.dispatch('increment')}>-</button>
        <button onClick={() => this.dispatch('decrement')}>+</button>
        <button onClick={() => this.dispatch('reset')}>Reset</button>
      </div>
    );
  }
}