ReScript: rescript-react에서 useReducer 사용

ReactuseReducer는 상태가 단순한 값보다 복잡해질 때 좋습니다. rescript-reactuseReducer는 ReScriptvariants를 사용하면 훨씬 더 좋습니다.
useReducer 를 사용하도록 구현에서 코드를 단계별로 업데이트해 보겠습니다.

type state = DisplayValue | HideValue

type action = Toggle

이러한 유형은 감속기의 상태와 동작을 정의합니다. 값만 토글하기를 원하기 때문에 DisplayValue 또는 HideValue 두 가지 가능한 값이 있는 상태에 대한 변형을 사용합니다. 그런 다음 상태를 업데이트하기 위해 전달할 수 있는 작업을 정의합니다. 이 경우 Toggle state 에 대해 하나의 작업만 필요합니다.

let (state, dispatch) = React.useReducer((state, action) => {
  switch action {
  | Toggle =>
    switch state {
    | DisplayValue => HideValue
    | HideValue => DisplayValue
    }
  }
}, HideValue)

useState 후크를 이 useReducer 후크로 교체합니다. 감속기는 작업에 pattern matching을 사용하고 현재 상태에 따라 상태를 전환합니다.
state 및 dispatch 유형은 각각 state 유형 및 action => unit 사용에서 유추됩니다.

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

업데이트된 보기 부분은 state에서 다른 패턴 일치를 사용하여 값을 표시하거나 아무 것도 표시하지 않습니다. onClick 함수는 이제 dispatch를 사용하여 Toggle 작업을 감속기에 전달합니다.

전체 코드는 다음과 같습니다.

type state = DisplayValue | HideValue

type action = Toggle

@react.component
let make = () => {
  let (state, dispatch) = React.useReducer((state, action) => {
    switch action {
    | 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>
  </div>
}

이것은 useState 구성 요소와 동일한 작업을 수행하지만 더 복잡한 방식으로 수행하는 간단한 예입니다. 그러나 전용Display 또는 Hide 작업을 추가하려는 경우 컴파일러가 구현에서 처리하는 것을 놓치지 않도록 우리를 도울 수 있습니다.