Force to render in the callback of promise

#1

Hi all
I have the following component, that do in the didMount lifecycle fetch data from server.

let make = (~server: CoinsType.coinsServer, ~url: string, _children) => {
  ...component,
  didMount: _self => {
    server.fetcher(url)
    |> Js.Promise.then_(value => {
      Js.Promise.resolve(ReasonReact.Update({coins: value}));
    });
    ReasonReact.NoUpdate;
  },
  initialState: () => {coins: [||]},
  reducer: (action, _state) => 
    switch (action) {
    | Fetch => ReasonReact.NoUpdate;
    },
  render: self => {
    <div> 
     <DashboardView coins={self.state.coins}/>
    </div>;
  },
};

The DashboardView component did not get the value from new set value in the didMount lifecycle.
The question is, how to force to re-render component, that theDashboardView component will receive the value.
Thanks

#2

Don’t really know ReasonReact, but it looks like you’re not updating your state in the reducer.

Here is an example of an async fetch action which may be helpful:

#3

It works like a charm.
Thanks a lot @ncthbrt.

#4

Don’t forget to note that the example ncthbrrt shared used self.send() in the didMount. Without the self.send() the component won’t reflect any changes to state that you’ve made.