プログラミング初心者のための入門ブログエンジニアが未来を切り開く。使い方この広告は、90日以上更新していないブログに表示しています。本日はReact.jsのuseReducerフックを初心者様向けに解説していきます。useReducerとは比較useReducerフックReduxは必要ないのか?最後にuseReducerはフックの中でも、非常に高度なフックの1つとなっています。React初心者に関しては実際に使用方法をよく知らない場合がほとんどです。このフックはより適切で明確なコードを作成するのに非常に皆様の役に立ってくれるはずです。覚えて今回でuseStateの勉強から1ランク上へいきましょう。useStateフックに関する学習は下記になります。dev-k.hatenablog.comuseReducerとは状態管理フックとしてuseStateこれは、コンポーネントの状態を管理できるようにするフックです。useReducerフックの動作方法はuseStateとはかなり異なります。代替え品というものです。Docs(ドキュメント)もuseReducerフックがuseStateフックの代替えであると示唆しています。ja.reactjs.orgでは、どう言った場合に活用するのか?useReducerはコンポーネントの階層が深く、複雑な状態を持ち、多くの異なる状態を管理していかなければならない、または以前の状態を元に新しい状態として作る場面での時に使用されます。最上位のコンポーネントで参照されている状態が、何百個もあった場合、あなたは簡単にそれらを把握することはできますか?アプリケーションが複雑になるにつれて、状態ツリーはすぐに手に負えなくなる可能性があります。そのような、複雑さに対処するために提供された最良のパターンの1つがレデューサーとなります。最上位コンポーネントから任意のコンポーネントに渡すことができます。これを最上位コンポーネントで定義し、状態をグローバルにすることができます。すべての状態を管理し1つのオブジェクトによってまとめることができます。状態を1つのオブジェクトとしてまとめる?Reduxですか?気付いた方はいらっしゃるかと思います。はい、つまり特定のactionがディスパッチされたときにコンポーネントの状態の一部を更新できます。これは、Reduxの動作と非常によく似ております。useReducerの状態は常にオブジェクトである必要はなく制限はありません。配列や数値でも構いません。useReducerのレデューサーはReduxからのものでありReduxはJavaScriptのArray.reduce()から借用しているのです。JavaScriptのMDNでreduce()について最初から参照されているチュートリアルに戻って学習してみて下さい。あなたの手助けとなる可能性がございます。developer.mozilla.orgこれまでの開発者の間で最も人気のあるフックの1つはこのuseReducerフックとも言えます。0);上記の通り、どちらもこのフックは2つの要素を持つ配列を返します。useReducerの引数はレデューサー関数と2つの引数を使用してフックを呼び出し、2つ目が初期状態となります。useReducerフックでは状態とdispatchと呼ばれる新しい特別な関数を返すフックという事になります。useStateに近いです。レデューサーは3番目の引数もあると言う事も知っておいて下さい。init);上記では3番目の引数があります。これは、初期状態を遅延的に作成するオプションの値となります。外部の関数を使用して初期状態の値を計算できます。useReducerフックは基本的に、関数コンポーネントがアプリケーションの状態管理からレデューサー機能にアクセスできるようにします。それでは、機能の扱い方を見ていきましょう。ある、カウンターコンポーネントでの簡単な例での解説になります。)の値を使用して新しい値を計算する方法を示しております。分割しながら解説致します。'react';しっかり読み込まれるように、インポートをしましょう。基本的に、レデューサーは状態の変更を管理する機能にすぎません。useStateを理解してれば、レデューサーはそこまで難しいフックではありません。}useReducerはSwitch文を使用される事が多いです。)に指定されている2番目の引数となります。}}dispatch関数を使用して、現在の状態を暗黙的に変更するactionをレデューサーに送信可能です。レデューサーは状態とactionを実行する関数であるので任意での値にすることが可能となります。上記では文字列となっており、DECREMENTでカウンターを1ずつ減らしていきます。INCREMENTは増加なので数が増えていきます。actionがどのcaseにもマッチしない場合に備えて、必ずデフォルトの状態を返すようにしましょう。レデューサーはactionを実行した後に新しい状態を返します。それは、以前の状態を元に新しい状態として作っているという事です。)dispatchの唯一の仕事はactionを実行し、それらをレデューサーに送信することです。状態に応じて、レデューサー関数に対して正しいactionがdispatchされます。その後、Reactコンポーネントが再度レンダリングされますが、useReducerフックからの新しい状態が使用される事になります。Reduxは必要ないのか?useReducerフックの導入によって、Reduxのような外部ライブラリを導入することなく、相当な量の複雑な状態を管理できるようになったのは事実です。すべてのuseReducer状態を取得し、トップレベルのコンポーネントに配置した場合、Reduxはもう必要ないように感じるかもしれません。これはReduxが役に立たないという意味ではありません、Reduxには検討するべき価値のある他の機能や利点がまだたくさんございます。useReducerがReduxの動作と非常に似ているように見えても、それでもReduxではありません。このuseReducerフックは、より複雑なアプリケーションではReduxやMobXに置き換わるものではございません。単純なアプリケーションではuseReducerフックがReduxを置き換えることができると思います。Reduxは、グローバルな状態を必要とする大きくて複雑なアプリケーションで作業する必要がある場合、ほとんどのReact開発者にとって頼りになります。複雑なアプリの場合は、Reduxのような状態管理ライブラリが引き続き必要になる事は間違いありません。最後にレデューサーで従うべき重要なルールの1つは、関数に渡される引数は変更されないままである必要性があります。同じ引数が渡された場合、関数は常に同じ出力を返します。レデューサー関数は副作用を引き起こしません。あなたが、useReducerフックを早く理解したいのであればdispatchを先に理解すれば、自ずと分かってきます。useReducerはuseStateとほぼ変わりませんが、ですがむやみやたらと使用するのは避けましょう。使い分けて、なるべくuseStateを使用していき問題が起きた時はuseReducerで代替えして下さい。useReducerフックは、React.js用のReduxを必要としない小規模および中規模のアプリケーションに最適となります。useReducerを理解できれば、Reduxの学習時の理解も簡単となる事でしょう。本日は以上となります。最後まで読んで頂きありがとうございます。この記事が気に入ったら、ブックマークし他の方に共有してください。17:56ご訪問いただきありがとうございます。私はdeve.Kと申します。現役のReact.jsプログラマーでありWebアプリ開発に携わっています。当ブログでは、ITやプログラミングの学習を目的としたブログを運営しています。専門分野はJS/TS/Node.js/React/Next.jsです。質問や相談、または学びたい分野のリクエストなどがありましたら、お気軽にお問い合わせください。このブログでは、ITやプログラミングに関する情報を分かりやすく、かつ実践的な内容でお届けしています。皆様にとって有益な情報を提供し、より良い学習体験を得ていただけるよう、精一杯の努力をしてまいります。今後ともどうぞよろしくお願いいたします。[deve.K].はてなブログをはじめよう!dev04Kさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。