【React】useReducer の使い方をわかりやすく解説！
こんにちは！駆け出しエンジニアのガッキー（@ExplorerZine）です。
今回は React で頻出な useReducer について書いてみたいと思います！
サーバーサイドエンジニアである僕にとって React の基礎はまだまだ学ぶことがたくさん！
今回も一緒に学んでいきましょう～
useReducer とは？？
useState とは React のフック（Hook）の一つであり、状態管理やアクションの処理に使用される関数です。
状態管理というと先日 useState についてシェアしていますが、
useState は状態やアクション（状態の更新するために使用されるオブジェクト）
を受取ることでより複雑な状態管理を行うことができます。
useReducer の書き方
import React, { useReducer } from "react";
// 初期状態の定義
const initialState = {
count: 0,
};
// Reducer関数の定義
const reducer = (state, action) => {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
case "reset":
return { count: 0 };
default:
throw new Error("Unsupported action type");
}
};
const App = () => {
// useReducerを使用して状態とディスパッチ関数を取得
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: "increment" })}>+</button>
<button onClick={() => dispatch({ type: "decrement" })}>-</button>
<button onClick={() => dispatch({ type: "reset" })}>Reset</button>
</div>
</>
);
};
export default App;上記はボタンをクリックするとカウントされるコンポーネントになります。
ブラウザではこのように表示されます。
各ボタンを押すことで数値がカウントされ表示されます。
useReducer の使い方
先程のコードから useReducer の使われ方を見ていきたいと思います。
const [state, dispatch] = useReducer(reducer, initialState);この部分でフックである useReducer を呼び出しています。
左から順番に、
- state (ステイト) 現在の状態を保持するための変数
- dispatch (ディスパッチ関数) 状態の更新を開始して reducer にアクションを渡すための関数
- reducer (リデューサー) ディスパッチ関数から送られたアクションに基づいて新しい状態を計算
- initialState (初期値)
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
case 'reset':
return { count: 0 };
default:
throw new Error('Unsupported action type');
}
};それからこちらで reducer 関数の定義です。
reducer 関数ではボタンのクリックイベントにセットされている dispatch 関数によって
送信されてくるアクションによって switch 分によって state（状態）の更新をおこなっています。
useReducer と useState の違い
useState に比べて useReducer は定義する際に、
状態管理方法を reducer に記載する必要があります。
複数人で開発する際には、予め状態管理方法が設定された useReducer を使用する方法が便利です。
一方で useState は状態の更新方法をシンプルに記載することが出来るので、
単純な状態管理・独立した管理に向いています。
- useReducer は複数かつ複雑な状態管理が得意
- useState は 1 つの独立した状態管理が得意。
このような違いがあります。
まとめ
いかがでしたか？？
React の useReducer についてご紹介してきました！
引き続きブログをお楽しみいただければ嬉しいです。
よかったら Twitter も@ExplorerZineみてくださいね ♪
これからも一緒に学習しましょう～
