ReasonReact Posts Component

Posts.re

type post = {
  userId: int,
  id: int,
  title: string,
  body: string
};

type posts = list(post);

type state = {
  posts: posts
};

type action =
  | Loaded(posts);

let component = ReasonReact.reducerComponent("Posts");

let str = ReasonReact.stringToElement;

let decode = json => {
  Json.Decode.{
    userId: json |> field("userId", int),
    id:     json |> field("id", int),
    title:  json |> field("title", string),
    body:   json |> field("body", string)
  };
};

let fetchData = () =>
  Js.Promise.(
    Fetch.fetch("https://jsonplaceholder.typicode.com/posts")
    |> then_(Fetch.Response.json)
    |> then_((json) => {
      let opt = Js.Json.decodeArray(json);
      let posts = switch opt {
      | None => [||]
      | Some(arr) => Array.map(decode, arr)
      };
      resolve(posts);
    })
  );

let make = (_c) => {
  ...component,
  initialState: () => {posts: []},
  didMount: (self) => {
    fetchData()
    |> Js.Promise.then_(posts => {
      self.reduce(_ev => Loaded(Array.to_list(posts)))();
      Js.Promise.resolve();
    })
    |> ignore;
    ReasonReact.NoUpdate;
  },
  reducer: (action, {posts}) =>
    switch action {
    | Loaded(data) => ReasonReact.Update({ posts: List.concat([data, posts]) })
    },
  render: (s) => {
    let items = List.map(it => <li>(str(it.title))</li>, s.state.posts);
    <ul>(ReasonReact.arrayToElement(Array.of_list(items)))</ul>
  }
};