til / 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.
1type action = Toggle | Display | Hide
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!
1Warning number 8 (configured as error)
2
3 6 │ let make = () => {
4 7 │ let (state, dispatch) = React.useReducer((state, action) => {
5 8 │ switch action {
6 9 │ | Toggle =>
7 . │ ...
813 │ }
914 │ }
1015 │ }, HideValue)
1116 │
12
13You forgot to handle a possible case here, for example:
14(Display|Hide)
Let’s add the new actions to our reducer.
1switch action {
2| Display => DisplayValue
3| Hide => HideValue
4| Toggle =>
5 ...
6}
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.
1<Button onClick={_ => dispatch(Display)}> {React.string("Display value")} </Button>
2<Button onClick={_ => dispatch(Hide)}> {React.string("Hide value")} </Button>
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
1type state = DisplayValue | HideValue
2
3type action = Toggle | Display | Hide
4
5@react.component
6let make = () => {
7 let (state, dispatch) = React.useReducer((state, action) => {
8 switch action {
9 | Display => DisplayValue
10 | Hide => HideValue
11 | Toggle =>
12 switch state {
13 | DisplayValue => HideValue
14 | HideValue => DisplayValue
15 }
16 }
17 }, HideValue)
18
19 <div>
20 {switch state {
21 | DisplayValue => React.string("The best value")
22 | HideValue => React.null
23 }}
24 <Button onClick={_ => dispatch(Toggle)}> {React.string("Toggle value")} </Button>
25 <Button onClick={_ => dispatch(Display)}> {React.string("Display value")} </Button>
26 <Button onClick={_ => dispatch(Hide)}> {React.string("Hide value")} </Button>
27 </div>
28}