【React】useReducerを用いてシンプルな真偽値の反転

リデューサーとは

現在のステート値を受け取って、新しいステート値を返す関数のこと

Reactハンズオンラーニング 第2版

useReducerの戻り値の配列

• 第1引数：ステート値
• 第2引数：リデューサーを実行するための関数（dispatch関数）

真偽値を反転させるリデューサーsample

function Checkbox() {
  const [checked, toggle] = useReducer(checked => !checked, false);
  console.log(`第一引数： ${checked}`);
  console.log(`第二引数： ${toggle}`);

  return (
    <>
      <input type="checkbox" value={checked} onChange={toggle} />
      {checked ? "checked" : "not checked"}
    </>
  );
}

console結果