2017-01-24 9 views
1

私はredux/reactアプリケーションで作業しています。我々は非常に少数の「接続された」コンポーネント(すなわち、還元状態にアクセスし、直接アクションをディスパッチするコンポーネント)から始めました。その結果、すべてのコンポーネントは、すべての子、サブファミリーなどに小道具をあまりにも多く渡し、トップレベルの「接続された」コンポーネントは神のクラスになりました。react/redux:データを取得するためにAPI呼び出しを行わずに状態からデータを取得するコンポーネント

私たちはさらに多くのコンポーネントを接続し、mapStateToPropsmapDispatchToPropsを介して還元状態とディスパッチアクションに直接アクセスできます。これは、Dan Abramovがここでお勧めします:https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.lye71jwmx

私の質問は、実際のAPI呼び出しを行ったアクションを送信したと仮定して、状態ツリーからデータをフェッチすることは可能ですか?そのデータを状態ツリーに入れますか?

古典的な「ブログ」のアプリを使用して、具体的な例を与える:

<blog id=123/>コンポーネントは、ブログの記事をレンダリングします。ヒットしたときにブログを取得し、JSONとしてネストされたコメントを取得するAPI呼び出しを行います。

コンポーネントは<comments blog_id=123 />コンポーネントをレンダリングします。その子コンポーネントは、親がブログを取得するためのAPIコールを処理していると仮定し、それがネストされたコメントであると仮定するだけでよいので、状態ツリーからコメントをフェッチし、データがまだ存在します(つまり、APIコールはまだ進行中です)。

そうでない場合は、ここでは何ができますか?

私はこのような人為的な例で理解していますが、おそらく小道具としてコメントを渡すだけです。しかし、私の実際の生活の例では、はるかに複雑です。

そこで質問は、あるそれは「私は状態ツリーからのものをレンダリングします - しかし、誰でも私を使用すると、私が正しく動作するためにはAPIの呼び出しを行う必要があります」を言うために、コンポーネントの悪い習慣である

+0

もちろんOKです。それは私がそれにアプローチする方法です。子コンポーネントは、適切な小道具が渡されるか、接続された状態になるまで、何も描画しません。これをこの子に渡すか、Redux状態ツリーからフェッチすることができます。 –

+0

ありがとうございます。私はそう思ったが、確かにしたいと思った。それを答えとして加えて、私は喜んで受け入れます。 –

答えて

1

もちろんOKです。それは私がそれにアプローチする方法です。

例では、子コンポーネントは、適切な小道具が渡されるか、接続された状態になるまで何も表示しません。これをこの子に渡すか、Redux状態ツリーからフェッチすることができます。

多くの子コンポーネントがある場合、または対象の子が子どもの奥深くにある場合は、通常、小道具を通過しないようにします。おそらく理想的であり、子どもから子供などに状態を渡すことに関して、状態ツリーからの小道具を取り出すことはおそらく理想的であり、それほど面倒ではありません。

mapStateToProps関数を利用すると、定義された小道具だけを渡し、与えられたものをレンダリングすることができます。

関連する問題