Dealing with async changes to state in ReasonReact

PromiseState.re

type state = {products: RemoteData.t(array(Product.t), string)};

type action =
  | FetchProducts
  | SetProducts(RemoteData.t(array(Product.t), string));

let component = ReasonReact.reducerComponent(__MODULE__);
let make = _children => {
  ...component,
  initialState: () => {products: NotAsked},

  reducer: (action, state) =>
    switch (action) {
    | FetchProducts =>
      UpdateWithSideEffects(
        {...state, products: Loading},
        (
          ({send}) =>
            Api.getProducts()
            |> Js.Promise.then_(products => {
                 send(SetProducts(Success(products)));
                 Js.Promise.resolve(products);
               })
            |> Js.Promise.catch(err => {
                 send(SetProducts(Failure("Failed to load products")));
                 Js.Promise.reject(err);
               })
            |> ignore
        ),
      )

    | SetProducts(data) => Update({...state, products: data})
    },

  render: ({send, state}) =>
    switch (state.products) {
    | NotAsked =>
      <button onClick=(_ => send(FetchProducts))>
        {ReasonReact.string("Load Products")}
      </button>

    | Loading => <LoadingSpinner />

    | Failure(msg) =>
      <div className="alert alert-error"> {ReasonReact.string(msg)} </div>

    | Success(products) =>
      let children = products |> Array.map(product => <Product product />);
      <div> ...children </div>;
    },
};

RemoteData.re

/**
 * Type inspired by Kris Jenkins' type of the same name in Elm/PS
 */
type t('a, 'e) =
  | NotAsked
  | Loading
  | Success('a)
  | Failure('e);