■P106

────────────────
const [state, dispatch] = useReducer(reducer, initialArg);
────────────────

────────────────
// dispatch関数の引数がリデューサー関数に渡される
dispatch({ type: "type1" });
────────────────


■P107

────────────────
// 引数として現在のステートとアクションを受け取る
const reducer = (state, action) => {
  switch (action.type) {
    // action.typeに基づいた更新後のステートを返す
    case "type1":
      return "state1";
    case "type2":
      return "state2";
    default:
      return state;
  }
};
────────────────

────────────────
const [state, dispatch] = useReducer(reducer, initialArg, init);
────────────────


■P108

────────────────
import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  // 加算
  const handleIncrement = () => {
    setCount((prev) => prev + 1);
  };

  // 減算
  const handleDecrement = () => {
    setCount((prev) => prev - 1);
  };

  // 乗算
  const handleMultiply = () => {
    setCount((prev) => prev * 2);
  };

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={handleIncrement}>+1</button>
      <button onClick={handleDecrement}>-1</button>
      <button onClick={handleMultiply}>×2</button>
    </div>
  );
};

export default Counter;
────────────────


■P109

────────────────
import { useReducer } from "react";

const reducer = (state, action) => {
  switch (action.type) {
    // 加算
    case "increment":
      return state + 1;
    // 減算
    case "decrement":
      return state - 1;
    // 乗算
    case "multiply":
      return state * 2;
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, 0);

  return (
    <div>
      <p>カウント: {state}</p>
      <button
        onClick={() => dispatch({ type: "increment" })}
      >
        +1
      </button>
      <button
        onClick={() => dispatch({ type: "decrement" })}
      >
        -1
      </button>
      <button
        onClick={() => dispatch({ type: "multiply" })}
      >
        ×2
      </button>
    </div>
  );
};

export default Counter;
────────────────


■P110

────────────────
const reducer = (state, action) => {
  switch (action.type) {
    // 加算
    case "increment":
      return state + 1;
    // 減算
    case "decrement":
      return state - 1;
    // 乗算
    case "multiply":
      return state * 2;
    default:
      return state;
  }
};
────────────────


■P111

────────────────
const reducer = (state, action) => {
  switch (action.type) {
    // 加算
    case "increment":
      return state + 1;
    // 減算
    case "decrement":
      return state - 1;
    // 乗算
    case "multiply":
      return state * 2;
    // リデューサー関数に「除算」を追加するだけ
    case "divide":
      return state / 2;
    default:
      return state;
  }
};
────────────────


■P112

────────────────
import { useState } from "react";

const initialState = [
  { id: Date.now(), title: "サンプルタスク" },
];

const TaskApp = () => {
  const [tasks, setTasks] = useState(initialState);
  const [inputText, setInputText] = useState("");

  // 作成
  const handleTaskCreate = () => {
    setTasks((prev) => [
      ...prev,
      { id: Date.now(), title: inputText },
    ]);
    setInputText("");
  };

  // 削除
  const handleTaskDelete = (id) => {
    setTasks((prev) =>
      prev.filter((task) => task.id !== id),
    );
  };

  return (
    <div>
      <input
        type="text"
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
        placeholder="タスクタイトルを入力"
      />
      <button onClick={handleTaskCreate}>作成</button>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            {task.title}
            <button
              onClick={() => handleTaskDelete(task.id)}
            >
              削除
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TaskApp;
────────────────


■P113

────────────────
setTasks((prev) => [
  ...prev,
  { id: Date.now(), title: inputText },
]);
────────────────

────────────────
setTasks((prev) =>
  prev.filter((task) => task.id !== id),
);
────────────────


■P114

────────────────
import { useReducer, useState } from "react";

const initialState = [
  { id: Date.now(), title: "サンプルタスク" },
];

const reducer = (state, action) => {
  switch (action.type) {
    // 作成
    case "CREATE":
      return [
        ...state,
        { id: Date.now(), title: action.payload },
      ];
    // 削除
    case "DELETE":
      return state.filter(
        (task) => task.id !== action.payload,
      );
    default:
      return state;
  }
};

const TaskApp = () => {
  const [tasks, dispatch] = useReducer(
    reducer,
    initialState,
  );
  const [inputText, setInputText] = useState("");

  const handleTaskCreate = () => {
    dispatch({ type: "CREATE", payload: inputText });
    setInputText("");
  };

  const handleTaskDelete = (id) => {
    dispatch({ type: "DELETE", payload: id });
  };

  return (
    <div>
      <input
        type="text"
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
        placeholder="タスクタイトルを入力"
      />
      <button onClick={handleTaskCreate}>作成</button>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            {task.title}
            <button
              onClick={() => handleTaskDelete(task.id)}
            >
              削除
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TaskApp;
────────────────


■P116

────────────────
const reducer = (state, action) => {
  switch (action.type) {
    // 作成
    case "CREATE":
      return [
        ...state,
        { id: Date.now(), title: action.payload },
      ];
    // 削除
    case "DELETE":
      return state.filter(
        (task) => task.id !== action.payload,
      );
    default:
      return state;
  }
};
────────────────

