こんにちは、テルプロです！
「useReducerの使い方がわからない」とお悩みではないでしょうか？
本記事ではそんな悩みを解決していきます！
本記事を読むことで
- useReducerの使い方をサンプルで理解できる
- コードを公開しているので、自分の環境で確かめることができる
【React Hooks】useReducerの使い方
useReducerとは
- 「useState」と同様にstateを管理することができるもの
- 複雑な状態を持ち、多くの異なる状態を管理する場合に使用する
useReducerを理解する上で、押さえておくべきポイントは上記の2点のみです。
では、実際の使用例を見ていきましょう！
使用例
上記は数字があり、カウントボタンを押すと加算減算される例です。
（コードは左側から見れます！）
useReducerを用いることで「reducer」というストアを用意することができます。この「reducer」で「state」の操作内容を管理しています。
そして「dispatch」で「reducer」への通知を行うことにより、指定した操作内容を実行しています。最後に、更新された「state」を表示しています。
useReducerは「state」が複数の値にまたがるような複雑なロジックがある場合に使用することが一般的とされています。
以上が、useReducerの基本的な使い方です。
まとめ
今回は「useReducerの使い方」を解説しました。
React Hooksの機能の1つであるuseReducerを使うことで、より複雑な状態管理を行うことができます。
Reactの実践的なスキルを身につけたい方には「Udemy」がおすすめです。オンラインコースの数は10万以上。世界で4000万人以上の人が学習に利用しています。
▼以下では、口コミをもとに厳選した「React学習におすすめのUdemy講座3選」をご紹介しています。ぜひ参考にしてみてください！
最後までご覧いただきありがとうございました。ではまた！
