web-dev-qa-db-ja.com

componentDidMount（）とreact-redux connect（）をどのように混合しますか？

これは単純な使用例のように思えますが、私にはわかりません。 HTTP経由でリモートAPIへのリクエストから取得したアイテムのリストを表示したい。リクエストが行われている間、最初は画面に空白が表示され、利用可能な場合は結果が表示されます。

だから私は2つのコンポーネントを持つと思った：ダムの「アイテムリスト」コンポーネントと、状態からの空のアイテムリストでダムコンポーネントをレンダリングする間にリモートリクエストを何らかの形で開始するラッパーの「プレゼンテーショナル」コンポーネント。

最初のリモート要求を開始する方法を知っています：componentDidMount()を使用します。

そして、私はディスパッチ/接続を処理する方法を知っています：私は次のようなものを使いたいです：

_const OuterWrapper = connect(
   mapStateToProps,
   mapDispatchToProps
) (ItemList)
_

しかし、これらを一緒にプレイするにはどうすればよいですか？ connect()を使用すると、物事が届かないように見えます。 APIリクエストを非同期で開始し、何らかの形で `dispatch（updateItemList（items））を実行して、状態に追加する新しいアイテムがあることを世界に伝えたいと思います。

編集：

react-lifecycle-component を見つけましたが、使用前と使用後の両方の使用例がわかりません。長い場合、なぜgetAllTehDatasが2回参照されるのですか？ _key:value_ペアなしで、なぜmapDispatchToPropsにあるのですか？ componentDidMount()が呼び出す場合、なぜそこに必要なのですか？そして、そのメソッドがdispatch()を利用する必要がある場合はどうしますか？

javascriptreact-nativereduxreact-redux
26
evilfred

まず、あなたの編集について、そのレポのコンポーネントは、関数をコンポーネントに小道具として渡すことを目的としていること。これらは Reactライフサイクルメソッド が実行されるたびに実行されます。これは理由により便利です。しかし、それらの理由はそのレポで説明されており、あなたの質問には関係ありません。

また、あなたはこれを見ました：

const mapDispatchToProps = { getAllTehDatas };

これはES6の略記法です。それはただ意味します：

const mapDispatchToProps = { getAllTehDatas: getAllTehDatas };

つまり、プロパティの名前は変数の名前と同じです。これは非常に一般的な操作なので、誰かがこの速記を思いつきました。あなたはそれについて知らない場合、それは非常に混乱する可能性があります。 約es6 と読む必要があります。

次へ。

明確に描写されていない概念がいくつかあります。ダムコンポーネント。スマートコンポーネント。コンテナコンポーネント。プレゼンテーションコンポーネント。接続されたコンポーネント。純粋な機能コンポーネント。それは多い。

コンテナコンポーネントareスマートコンポーネントとプレゼンテーションコンポーネントareダムコンポーネント。

ダムコンポーネントは少し賢い場合があります。たぶん、彼らはマウスオーバーでアニメーションを持っています。彼らも状態を持つことができます。

純粋な機能コンポーネントは単なる機能です。したがって、メソッドも状態もありません。それは小道具だけを意味します。状態や追加のロジックは存在できないため、純粋な機能コンポーネントは常に表示的です。

接続されたコンポーネントは、高次コンポーネントです。これは、コンポーネントを子としてレンダリングする単なる親コンポーネントです。また、レンダリングを最適化するために少し魔法をかけます。

プレゼンテーションコンポーネントは、コンテンツのみを表示し、コンテンツは表示しません。それらをクリックまたは入力したときに処理が完了した場合、プレゼンテーションコンポーネントにハンドラーを渡すことができる親によって処理される必要があります。プレゼンテーションコンポーネントはsomeのことを行うことができますが、これらのことは外部の何かに影響を与えてはなりません。

コンテナコンポーネントは、何が起こるかを決定することになっています。そこにロジックが詰め込まれています。これは、Reduxの概念というよりも、Reactの概念です。

接続されたコンポーネントは、connectで作成されます。それが呼び出されると、いくつかの関数を渡します。 mapStateToPropsおよびmapDispatchToProps。

mapStateToPropsは、コンポーネントが使用するいくつかの小道具を生成するために必要なことをすべて実行できます。これは、コンポーネントがデータをさらに処理することなくこれらの小道具を使用できることを意味します。必要な処理はすべてmapStateToPropsで実行できます。

mapDispatchToPropsは、イベントハンドラーとして直接使用される関数を渡すために必要なことをすべて実行できます。多くの場合、バインドされたアクションクリエーターを渡します。これは通常、ハンドラーがとにかく行う必要があるすべてを既に実行しています。ただし、任意の関数を渡し、任意の名前を付けることができます。したがって、それをonClickと呼び、好きな関数を渡すことができます。 Redux-Thunkを使用して複雑なアクションクリエーターを作成し、イベントハンドラーをスマートアクションクリエーターにすることもできます。サンクアクションクリエーターは、ディスパッチと状態にアクセスできます。

上記の2つの段落は、興味深い点の概要を示しています：connectとmapStateToPropsの助けを借りてmapDispatchToPropsによって作成されたHOCは、完全にスマートなコンポーネントに簡単に作成でき、結果のHOCがスマートになってももの。

または、これを取得します。すでに接続されているコンポーネントをconnectできます。確かに吹く心。そうするのは便利ですか？もちろんそうかもしれません。コンポーネントは、使用されるすべての状態からの一般データを必要とする場合があります。そのデータに対してconnectします。結果のコンポーネントは、他の場所で使用される場所に固有のデータにconnectedできます。一般？いいえ、便利ですか？はい！

プレゼンテーションコンポーネントをコンテナコンポーネントにラップして、connectでラップすることもできます。これはあなたが探しているものかもしれません。その後、componentDidMountを使用して、コンテナコンポーネントでフェッチを実行できます。

ただし、プレゼンテーションコンポーネントは、次の2つの理由により、スマートから有効に分離されているだけです。

  • 再利用性
  • テスタビリティ

どちらも必要ない場合は、2つを分離しないでください。ゲインなしで物事を複雑にするのはなぜですか？

また、componentDidMountではなく、componentWillMountを使用します。ユニバーサルコンポーネントを使用する場合、後者はサーバー側でも実行されます。サーバー上でフェッチを実行したくありません。

接続されたコンポーネントは明らかにラッパーですが、そのように考えるべきではないことに注意してください。オリジナルのプラグインバージョンと考えてください。ラッピングは実装の詳細にすぎません。また、ラッパーはReact-Reduxによって作成および管理されており、その腸をいじってはなりません。これは、ラッパーのcomponentDidMountやその他の部分を変更できないことを意味します。そして、私はあなたができないと言ったとき、私はあなたが完全にできるが、本当にすべきではないことを意味します。

要約すると、React、Redux、React-Reduxを理解することをお勧めします。それらは一緒にうまくいきますが、同じものではありません。

概念を理解した後、あなたは自分が最高だと思うことをするだけです。独自のルールを作成します。

30
DDS

この回答 しばらく前に、適切に接続を使用してコンポーネントでアクション呼び出しを行う方法の例を示しました。唯一の違いは、私にとってはcomponentWillMountにあることです：P

4
Alexandre Rivest