0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【React】useReducerの使い方 💡

Last updated at Posted at 2023-01-18

useReducerとは

useReducerは、useStateと同じく値を管理できるフックです。
構文は以下の通りです。

const [state, dispatch] = useReducer(stateを更新する関数, stateの初期値);

// state初期値0で更新関数を実行するとstateの値から+1する例
const [state, dispatch] = useReducer(prev => ++prev, 0);

usetStateとの違い

useStateでは更新用関数は、使用時に新しい値をどのように変更するか記述するのに対して、useReducerでは定義時に第一引数に新しい値をどうするか記述します。

// 例 useState
const [state, setState] = useState(0);
<button onClick={() => { setState((prev) => ++prev); }}>
+
</button>

// 例 useReducer
const [state, dispatch] = useReducer(prev => ++prev, 0);
<button onClick={() => { dispatch(); }}>
+
</button>

useState → 利用側が状態の更新の仕方を決定する
useReducer → 状態側で更新の仕方を決定する

上記のような違いから、useReducerは、大きなアプリケーションを作成する場合や、多数で開発する場合に使用するメリットが多くなってきます。
個人開発ではuseStateだけでも問題ありませんが、他の開発者と協働した場合、useStateでは利用者側が更新の仕方を決定するため意図しない使われ方をする場合があります。

useReducerを使ったシンプルなコード例

useReducerを使って、ボタンクリックに応じてカウントが増減するコード例です。

import { useReducer } from "react";
const Example = () => {
 const reducer = (prev, { type }) => {
    switch (type) {
      case "+":
        return ++prev;
      case "-":
        return --prev;
      default:
        throw new Error("不明なactionです");
    }
  };
  const [rstate, dispatch] = useReducer(reducer, 0);

  const rcountUp = () => {
    dispatch({ type: "+" });
  };

  const rcountDown = () => {
    dispatch({ type: "-" });
  };
  return (
    <>
      <h3>{rstate}</h3>
      <button onClick={rcountUp}>+</button>
      <button onClick={rcountDown}>-</button>
    </>
  );
};

export default Example;

スクリーンショット 2023-01-15 14.44.09.png

useReducer()定義時に第一引数に渡している更新用関数reducerに注目してください。

(prev, { type }) => {
    switch (type) {
      case "+":
        return ++prev;
      case "-":
        return --prev;
      default:
        throw new Error("不明なactionです");
    }
  }

更新用関数では第一引数に前回の値のstate値が渡されます。今回で言ったらprevstateの値が渡ってきます。
そして第二引数では、更新用関数実行時、つまりdispatch()実行時の引数が渡ってきます。
今回の例では、{ type }と、分割代入でtypeプロパティの値を渡しています。
ボタン押下時にdispatch({ type: "+" });と実行しているので、引数にはオブジェクトが渡ってきて、typeプロパティの値に応じて、switchさせているという流れです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?