[Section] Modelling async data with ADT

type State = {
  readonly isFetching: boolean,
  readonly error: string | null,
  readonly users: Array<User>,
};

// we will use a generic union type, that can be designed specifically for our application needs
// it will set common conventions in reducers but also the way of handling different states of the components
// when fetching remote data
type RemoteData<E, D> =
  | { status: 'INITIAL' }
  | { status: 'LOADING' }
  | { status: 'ERROR', error: E }
  | { status: 'SUCCESS', data: D };

// declare your state as simple as that
type State = RemoteData<Error, Array<User>>

type Props = {
  usersModel: RemoteData<Error, Array<User>>,
};

const ViewComponent: React.SFC<Props> = ({ usersModel }) => {
  if (usersModel.status === 'INITIAL') {
    return null;
  } else if (usersModel.status === 'LOADING') {
    return <div>Loading...</div>;
  } else if (usersModel.status === 'ERROR') {
    return <div>An error has occurred { usersModel.error }</div>;
  }

  return (
    <>
      { usersModel.data.map(user => { ... }) }
    </>
  );
}

connect((state: State) => {
  usersModel: usersModelSelector(state),
})(ViewComponent);