React.ReducerComponent

ReducerComponent.js

import React from 'react';

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

  reducer = (state, action) => state;

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

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

  reducer = (state, action) => {
    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>
        Counter: {this.state.count}
        <button onClick={() => this.dispatch('increment')}>-</button>
        <button onClick={() => this.dispatch('decrement')}>+</button>
        <button onClick={() => this.dispatch('reset')}>Reset</button>
      </div>
    );
  }
}

// Example 2:
// imagine some reusable reducer factories

const loading = (key) => (state = false, action) => {
  switch (action) {
    case `${KEY}_REQUEST`:
      return true
    case `${KEY}_SUCCESS`:
    case `${KEY}_FAILURE`:
      return false
    default:
      return state
}

const error = (key) => (state = null, action) => {
  switch (action) {
    case `${KEY}_REQUEST`:
      return null
    case `${KEY}_FAILURE`:
      return action.payload
    default:
      return state
}

const data = (key) => (state = null, action) => {
  switch (action) {
    case `${KEY}_REQUEST`:
      return null
    case `${KEY}_SUCCESS`:
      return action.payload
    default:
      return state
}


class User extends ReducerComponent {
  state = {
    users: null,
    loading: false,
    error: null,
  };

  reducer = combineReducers(
    loading('USERS'), 
    error('USERS'), 
    data('USERS')
  );

  handleClick = () => {
    this.dispatch('USERS_REQUEST')
    fetch('api.example.com/users')
      .then(res => res.json())
      .then(
        users => this.dispatch({ type: 'USERS_SUCCESS', payload: users }),
        error => this.dispatch({ type: 'USERS_FAILURE', payload: error })
      );
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Load More</button>
        {this.state.loading && <div>loading...</div>}
        {this.state.users && this.state.users.length > 0 && /* ... etc */}
      </div>
    );
  }
}