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:
- Update the shape of state
- Update the available actions
- Step through the compiler errors
- 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 ...