React

【React Hooks】useReducerとは?概念や使い方を徹底解説!

こんにちは、アプリ開発者のテルです!

「useReducerの使い方がわからない」とお悩みではないでしょうか?

テル

本記事ではそんな悩みを解決していきます!

本記事を読むメリット
  1. useReducerの使い方をサンプルで理解できる
  2. コードを公開しているので、自分の環境で確かめることができる

【React Hooks】useReducerの使い方

useReducerとは

  1. 「useState」と同様にstateを管理することができるもの
  2. 複雑な状態を持ち、多くの異なる状態を管理する場合に使用する

useReducerを理解する上で、押さえておくべきポイントは上記の2点のみです。

では、実際の使用例を見ていきましょう!

使用例

上記は数字があり、カウントボタンを押すと加算減算される例です。

(コードは左側から見れます!)

useReducerを用いることで「reducer」というストアを用意することができます。この「reducer」で「state」の操作内容を管理しています。

そして「dispatch」で「reducer」への通知を行うことにより、指定した操作内容を実行しています。最後に、更新された「state」を表示しています。

useReducerは「state」が複数の値にまたがるような複雑なロジックがある場合に使用することが一般的とされています。

以上が、useReducerの基本的な使い方です。

まとめ

今回は「useReducerの使い方」を解説しました。

React Hooksの機能の1つであるuseReducerを使うことで、より複雑な状態管理を行うことができます。

良ければ上記のコードを参考に、色々と試してみてください。

最後までご覧いただきありがとうございました。ではまた!

エンジニア就活対策