前回までの記事

React Hooksを学ぶ【useState編】

まずは基本の使い方

import { useReducer } from 'react'
import "./Reducer.css";

export const Reducer = () => {
  const [count,dispatch] = useReducer(prev => ++prev ,0)
  return (
    <>
      <div className="display">{count}</div>
      <div><button className="button" onClick={dispatch}>click!</button></div>
    </>
  )
}

useReducer[状態の更新式、初期値]

click!をクリックするとカウントアップしていく。

さすがにこれだけだと、メリットがよくわからないのでちょっと複雑に。

import { useReducer } from 'react'
import "./Reducer.css";

export const Reducer = () => {
  const [count,dispatch] = useReducer((prev:number,action:string) => {
    switch(action){
      case '+':
        return prev + 1;
      case '-':
        return prev - 1;
      default:
        return prev;
    }
  }
  ,0)
  return (
    <>
      <div className="display">{count}</div>
      <div><button className="button" onClick={()=>dispatch('+')}>plus!</button></div>
      <div><button className="button" onClick={()=>dispatch('-')}>minus</button></div>
    </>
  )
}

関数を使う側は、アクションに応じた関数を指定するのではなくて、アクションを識別する要素を渡せば、それに応じて更新された状態を得ることが出来る。

ちなみにアクションには辞書型も渡すことが出来る。

useStateとの違いは？

上の例だけでは、ちょっと分かりづらい、、、、

でも自分は書いた、「更新された状態を得る」、と。

useStateはコンポーネントを跨いでも、状態の更新は使う側でロジックを書く必要がある。