Counter = ({ loading, count, failed, onClick, name }) => {
  const failureMessage = failed ?
    <div>Failed to complete increment for {name}</div> :
    null;

  return (
    <div style={{
        opacity: loading ? 0.5 : 1,
        padding: 10
      }}>
      <div>
        <button
          disabled={loading}
          onClick={onClick}>
          {loading ? 'Loading...' : `Add 1 to ${name} counter`}
        </button>
      </div>
      <div>
        {name} counter: {count}
      </div>
      {failureMessage}
    </div>
  );
}
Here we set up a simple, reusable "dumb" component in the redux nomenclature
which we can reuse to render each counter since they have a repeatable
structure.