【React】Reduxが意味不明、、、そもそも何?なんで使う必要があるの?Redux不要論について

React

Reactを使うとほぼ必ず出くわすReduxについて、所見では意味不明で学習したくなくなる場合も少なくないです。 Reduxってそもそも何?なんで使う必要があるの?という点について理解して、 Reduxを学習する価値を知りましょう。

Reduxってそもそも何

Reduxは一箇所で状態管理をするためのライブラリです。 なぜReduxを使うのかというと、すべてのコンポーネントで状態を監視したいからです。Reduxを使うとそれが簡単にできます。 状態というのは、データの状態のことと考えてかまいません。 たとえばログインしている状態、していない状態、テーマの色が赤の状態、青の状態、数字が1の状態、10の状態などです。 各状態を管理することで、その状態に応じて他の状態も変化させることができます。 たとえば、ログインしている状態では、管理画面をみせる、していない状態であれば、ログイン画面をみせる、テーマカラーが白のときは、文字を黒にする、 数字が100のときにアニメーションするといったことが、状態を監視して管理することで可能になります。 それを行うことができるのが、Reduxです。 Reactのものというわけではなく、Vueでもvanilla JavaScriptでもReduxは使用可能です。

Reduxってなんで使う必要があるの?

Reactなどを使うとコンポーネント(部品)がたくさんできることがわかります。 そのコンポーネントが組み合わさって一つのアプリケーションが動きます。 各コンポーネントはいろんなデータを保持しています。 コンポーネント間でデータのやり取りを行うことで、様々なことができるようになります。 Reactでは基本的には親コンポーネントから子コンポーネントにデータの状態を渡します。 でも、それを親子関係のないコンポーネントでも使いたい場合、子孫だけど遠い子孫でのみそのデータ状態を使いたい場合などがあります。 そのようなときに、Reduxを使うことで可読性の高く、保守性の高いコードで状態管理することができます。

Reduxって使わなくていいのでは?Redux不要論について

ReactではHooksをつかえばReduxを使わずともアプリケーション制作が可能です。 小さなアプリケーションであれば、Reduxは不要といえます。 ただ、Reactでも同様のことができるにも関わらず、現在でも多くのWebアプリケーションでReduxが使われているのが実情ですし、 実績のあるReduxを使った方が多くの開発者が携わることが可能なため、 技術選定の段階でReduxは選択されることは今後も多いでしょう。 小さなアプリケーションであれば、Reduxではなく、ReactのHooksを使えばいいです。 大きなアプリケーションの場合は、何十、何百とあるコンポーネントの状態管理はやはりひとつの場所でしないと保守性がとくに落ちてしまいます。 状態のバケツリレーをすると、後でバグの発見などがとても大変になります。 大きなアプリケーションの場合は、Reduxを使う方があとあと楽になるためベストとなるケースが多いでしょう。

React

Posted by devsakaso