DEV Community

Rickard Natt och Dag
Rickard Natt och Dag

Posted on • Originally published at willcodefor.beer on

ReScript: Adding new actions to an existing useReducer

Previously we updated a React component to use the useReducer hook in rescript-react. In this post, we'll add a couple of new actions to our reducer and see how the compiler helps us with adding these new features.

type action = Toggle | Display | Hide
Enter fullscreen mode Exit fullscreen mode

We start by adding two new actions to the action type called Display and Hide. After we save we'll get an error in the compiler saying that we haven't covered all cases in our reducer's pattern match. It even tells us that we are missing (Display|Hide). This is exactly what we want!

Warning number 8 (configured as error)

 6  let make = () => {
 7    let (state, dispatch) = React.useReducer((state, action) => {
 8      switch action {
 9      | Toggle =>
 .  ...
13        }
14      }
15    }, HideValue)
16 

You forgot to handle a possible case here, for example:
(Display|Hide)
Enter fullscreen mode Exit fullscreen mode

Let's add the new actions to our reducer.

switch action {
| Display => DisplayValue
| Hide => HideValue
| Toggle =>
  ...
}
Enter fullscreen mode Exit fullscreen mode

By handling both the Display and Hide case the compiler will be happy, but we don't have anything that triggers our new actions so let's add those next.

<Button onClick={_ => dispatch(Display)}> {React.string("Display value")} </Button>
<Button onClick={_ => dispatch(Hide)}> {React.string("Hide value")} </Button>
Enter fullscreen mode Exit fullscreen mode

By adding two <Button> components that trigger our new actions when clicked we've successfully added the new functionality to our useReducer. The complete updated example looks like this

type state = DisplayValue | HideValue

type action = Toggle | Display | Hide

@react.component
let make = () => {
  let (state, dispatch) = React.useReducer((state, action) => {
    switch action {
    | Display => DisplayValue
    | Hide => HideValue
    | Toggle =>
      switch state {
      | DisplayValue => HideValue
      | HideValue => DisplayValue
      }
    }
  }, HideValue)

  <div>
    {switch state {
    | DisplayValue => React.string("The best value")
    | HideValue => React.null
    }}
    <Button onClick={_ => dispatch(Toggle)}> {React.string("Toggle value")} </Button>
    <Button onClick={_ => dispatch(Display)}> {React.string("Display value")} </Button>
    <Button onClick={_ => dispatch(Hide)}> {React.string("Hide value")} </Button>
  </div>
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)