Refactoring

Let's imagine we now need our stateful component to display a message that congratulates the user when they get to a count of 10, and once the message is displayed, the user can close the message by clicking a close button. Thanks to our helpful compiler, we can follow these steps:

  1. Update the shape of state
  2. Update the available actions
  3. Step through the compiler errors
  4. Update the render function

The compiler messages will remind us to update the component's initial state and reducer. Since we now need to also keep track of whether or not to display a message, let's change the shape of state to this:

type state = {  count: int,  showMessage: bool};

For our actions, let's combine Increment and Decrement into one constructor that ...

Get ReasonML Quick Start Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.