メインコンテンツにスキップ

React Redux を使用する理由

Redux 自体はスタンドアロンライブラリであり、React、Angular、Vue、Ember、Vanilla JS など、あらゆる UI レイヤーまたはフレームワークで使用できます。 Redux と React はよく一緒に使用されますが、互いに独立しています。

Redux を何らかの UI フレームワークで使用する場合、通常は UI コードからストアに直接アクセスするのではなく、「UI バインディング」ライブラリを使用して Redux と UI フレームワークを結び付けます。

React Redux は、React の公式 Redux UI バインディングライブラリです。 Redux と React を一緒に使用している場合は、React Redux を使用してこれら 2 つのライブラリをバインドする必要があります。

React Redux を使用する理由を理解するには、「UI バインディングライブラリ」とは何かを理解すると役立つ場合があります。

情報

Redux を一般的に使用する必要があるかどうかについて質問がある場合は、Redux をいつ、なぜ使用したいのか、そしてどのように使用することを意図しているのかについての議論のために、これらの記事を参照してください。

Redux と UI の統合​

Redux を*あらゆる* UI レイヤーで使用するには、同じ一貫した手順が必要です

  1. Redux ストアを作成する
  2. 更新を購読する
  3. 購読コールバック内
    1. 現在のストアの状態を取得する
    2. この UI の部分に必要なデータを抽出する
    3. UI をデータで更新する
  4. 必要に応じて、初期状態で UI をレンダリングする
  5. Redux アクションをディスパッチすることで UI 入力に応答する

このロジックを手書きすることは可能ですが、そうすると非常に反復的になります。 さらに、UI パフォーマンスの最適化には複雑なロジックが必要になります。

ストアの購読、更新されたデータの確認、再レンダリングのトリガーのプロセスは、より汎用的で再利用可能にすることができます。 React Redux のような UI バインディングライブラリは、ストアインタラクションロジックを処理するため、そのコードを自分で書く必要はありません。

情報

React Redux が内部でどのように機能し、ストアインタラクションをどのように処理するかの詳細については、慣用的な Redux: React Redux の歴史と実装を参照してください。

React Redux を使用する理由​

React の公式 Redux UI バインディングです​

Redux はあらゆる UI レイヤーで使用できますが、もともと React での使用を目的として設計されました。 他の多くのフレームワークの UI バインディングレイヤーがありますが、React Redux は Redux チームによって直接保守されています。

React の公式 Redux バインディングとして、React Redux はどちらのライブラリからの API 変更にも最新の状態に保たれ、React コンポーネントが期待どおりに動作することを保証します。 その意図された使用法は、React の設計原則である宣言型コンポーネントの記述を採用しています。

パフォーマンスの最適化を実装します​

React は一般的に高速ですが、デフォルトでは、コンポーネントの更新は React にコンポーネントツリーのその部分内のすべてのコンポーネントを再レンダリングさせます。 これには作業が必要であり、特定のコンポーネントのデータが変更されていない場合、要求された UI 出力が同じになるため、再レンダリングは無駄な努力になる可能性があります。

パフォーマンスが懸念される場合、パフォーマンスを向上させる最良の方法は、不要な再レンダリングをスキップして、コンポーネントが実際にデータが変更されたときにのみ再レンダリングされるようにすることです。 React Redux は内部で多くのパフォーマンス最適化を実装しているため、独自のコンポーネントは実際に必要なときにのみ再レンダリングされます。

さらに、React コンポーネントツリー内の複数のコンポーネントを接続することにより、接続された各コンポーネントがストアの状態からそのコンポーネントに必要な特定のデータのみを抽出するようにすることができます。 これは、独自のコンポーネントの再レンダリングの回数を減らすことを意味します。なぜなら、ほとんどの場合、これらの特定のデータは変更されていないからです。

コミュニティサポート​

React と Redux の公式バインディングライブラリとして、React Redux には多くのユーザーコミュニティがあります。 これにより、ヘルプを求めたり、ベストプラクティスについて学んだり、React Redux 上に構築されたライブラリを使用したり、さまざまなアプリケーション間で知識を再利用したりすることが容易になります。

React Redux を理解する​

コミュニティリソース​