問題タブ [react-redux]

私は redux を初めて使用します -mapStateToPropsが呼び出されず、コンポーネントが更新されて「hello world」が表示されないのはなぜですか?

http://codepen.io/anon/pen/QyXyvW?editors=0011

このシナリオでいくつかのテストを行った後、自分では答えられない質問がいくつかあるので、自分の概念を明確にするために助けを求めます。

1. ナビゲーターのプロバイダーと小道具

ナビゲーターをセットアップし、React Native アプリのさまざまなシーンにストアを渡すための違いと最良のアプローチは何ですか?

MainContainerpropsと Action を に渡すためComponentに react-redux 関数内で接続されています。connectprops

コンテキストまたは小道具へのより良いアクセスですか?

対

2. コンポーネント シーンで (スマート コンテナとしてラッピングするのではなく) 、 redux 状態の変化に関するリスナーをセットアップする方法、またはコンポーネントの状態を redux 状態にバインドする方法。

state(Redux ストアの) を渡し、をプッシュしたときactionsのように、アクションをディスパッチして正しく実行すると、状態は更新されますが、... はシーンを再レンダリングしません。passPropsnewSceneNavigatornewScene

画面に反映された変更を確認するには、状態コンポーネントを Redux 状態にバインドする必要がありますか?

このシナリオのベスト プラクティスに関するサンプルはありますか?

3. props対connect同じScene

同じSceneで、コンポーネントを上から下に、コンポーネントをwith ' ' fromでラップするか、穴のシナリオを として渡すredux state(については話さない)ための最良のアプローチです。component state'smart' containerconnectreact-reduxprops

ボタンクリックからアクションをディスパッチしようとしています。

コンポーネントを作成しました。プロバイダーによってコンポーネントに渡されるストアに接続します。しかし、私はエラーが発生します:

キャッチされていない TypeError: this.doSearchClick は関数ではありません

私は自分の輸入品を持っています：

私のコンポーネント:

これが必要かどうかわからない：

最後にconnect：

最上位では、プロバイダーを介してストアを渡します。

また、コンテキストを介してストアにアクセスし（機能せず、廃止される可能性があります）、@connect属性を使用してこれを達成しようとしました（同様のエラーが発生しました）。

最も単純な Redux アプリを構築しようとしています。初期状態があり、Redux ストアを作成し、ストアを ReactRedux.Provider に渡し、アプリを Provider の子として持っています。

ただし、ステートレスな機能コンポーネントとして記述された APP ビューは、小道具を受け取っていません。(メソッドを使用しReact.createClassてチェックするAPP ビューを作成する場合も同様です。)this.propsrender

私は何を間違っていますか？

非同期アクション クリエーターでは、サーバーからデータをフェッチします。私のユースケースでは、データが適切にフォーマットされていないため、UI で使用するためにデータを変換する必要があります。

質問 : 私は

1. 変換されたデータで成功アクションをディスパッチする前に、データが到着した直後にデータを変換しますか?

   /li>

2. 生データを使用して成功アクションをディスパッチして保存し、内部で変換しますmapStateToPropsか?

3. 生データを使用して成功アクションをディスパッチし、レデューサーで変換しますか?

1.では、必要なときにデータが変換され、API データ形式と Redux ストアが切り離されているように思えます。ただし、変換ロジックはデータ フェッチ アクションにあります。

2.では、非同期アクション クリエーターは単純なままで、ロジックはまったくなく、マッピングは UI レイヤーで行われます。mapStateToPropsしかし、これは、レンダーごとに呼び出されるため、reselect などで最適化する必要があることを意味します。

3.では、非同期アクション クリエーターは単純なままで、ロジックはまったくありませんが、アクションは API データ形式に結合されています。

私は 1 に行きます(とにかく変換​​の単体テストを行います) が、完全に満足しているわけではありません。なにか提案を ？ありがとう ！

-編集：質問は独断的な回答の対象であるため、ここで自分自身に答えています。コメントに記載されているすべての理由と回答の1つから、1.を使用します。

Redux と React を使用して単一ページのアプリを作成する場合、最初に何をする必要がありますか? 最初に redux で状態のロジックを作成するか、すべてのコンポーネントを最初に反応させますか?

例えば：

アプリを起動するときに、アクションをディスパッチするためのコールバックを含む接続コンポーネントを作成し、「画面」(または「シーン」) を構成する他の多くのプレゼンテーションを含む単一のプレゼンテーション コンポーネントをレンダリングします。

しかしその後、これらのコンポーネントの多くが不必要なレンダリングを行っていることに気付きました。それぞれが状態の異なる部分を必要とするためです。

それで、解決策は何でしょうか？多くのコンテナーをレンダリングする単一のプレゼンテーションをルート ハンドラーに渡し、それぞれが関心のある状態に接続するのでしょうか? 次に、2 つのコンポーネントが状態の同じ部分を使用している場合、それらは異なるコンテナーである必要がありますか? そして、このアプローチを採用した場合、これらのルート ハンドラを格納するためのフォルダ「views」を用意することは理にかなっていますか?

これにどのように対処しましたか？

ありがとう！