ReducerComponent.tsx

import * as React from 'react';

class ReducerComponent<Props, State> extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
  }

  reducer = (state: State, action: string) => {
    // this should be
    return state;
  };

  reduce = (action: string) => {
    this.setState((prevState, prevProps) => this.reducer(prevState, action));
  };
}

interface CounterState {
  count: number;
}

export class Counter extends ReducerComponent<{}, CounterState> {
  state = {
    count: 0,
  };

  reducer = (state: CounterState, action: string) => {
    switch (action) {
      case 'increment':
        return { ...state, count: state.count++ };
      case 'decrement':
        return { ...state, count: state.count-- };
      case 'reset':
        return { ...state, count: 0 };
      default:
        return state;
    }
  };

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