Define state machines for redux async thunks

[acelaya]

Currently there are some reducers containing async thunks which models look similar to this:

interface SomeStateModel {
    foo?: SomeResult;
    loading: boolean;
    error: boolean;
    errorData?: ProblemDetailsError;
}

This interfaces combines the three possible async thunk states:

Pending:

interface SomeStateModelPending {
    loading: true;
    error: false;
}

Rejected:

interface SomeStateModelRejected {
    loading: false;
    error: true;
    errorData: ProblemDetailsError;
}

Fulfilled:

interface SomeStateModelFulfilled {
    foo: SomeResult;
    loading: false;
    error: false;
}

It would be ideal to try to define the state as a union of the three above, and ensure proper type narrowing on every reducer case.

In the best case scenario, it should also be possible to narrow the types when consuming the state inside a component.

---

There also another use case, for actions which do not "happen" right away (like loading data), but have a "waiting" initial state, until the user actively performs an action (like saving on a form).

interface SomeActionStateModel {
    foo?: SomeResult;
    saving: boolean;
    saved: boolean;
    error: boolean;
    errorData?: ProblemDetailsError;
}

Waiting:

interface SomeActionStateModelWaiting {
    saving: false;
    saved: false;
    error: false;
}

Pending:

interface SomeActionStateModelPending {
    saving: true;
    saved: false;
    error: false;
}

Rejected:

interface SomeActionStateModelRejected {
    saving: false;
    saved: false;
    error: true;
    errorData: ProblemDetailsError;
}

Fulfilled:

interface SomeActionStateModelFulfilled {
    foo: SomeResult;
    saving: false;
    saved: true;
    error: false;
}