コンテナ内のサーバからデータを取得してコンポーネントに渡す

Question

私は過去数週間、Reactを学んできましたが、サーバからデータのコレクションを取り出してReduxを使用して提示する方法には苦労しています。

私が持っているもの

：

私はその中<Movie />コンポーネントのリストをレンダリング<MoviesList />コンポーネントを持っています。

何が必要

：

私は、サーバーからこれらの映画を取得し、自分の状態に保管する必要があります。私はコンテナコンポーネントを作成する場合は、私がダウンして私の<MoviesList />コンポーネントへの状態から映画を渡すためにmapStateToPropsを使用しますが、最初私はからそれをフェッチする必要が

：私は何と戦ってる

サーバではコンテナコンポーネントのライフサイクルフックの1つで行うべきだと思っていましたが、私は<MoviesListContainer />と<MoviesList />の両方でmovies小道具（これはPropTypeで検証する必要があります）を持っています。両方のコンポーネントで大きなプロップ検証が行われますが、これは私のためにはまったく見えません。

機能コンポーネントを使用して小道具をコンテナに簡単に広げれば問題はありませんが、ライフサイクルフックでムービーを取得する必要があるため、クラスにする必要があります両方のファイルに小道具を指定してください。

これを達成するにはどうすればよいでしょうか？

これらの映画を別の場所で取得する必要がありますか？私はそれを取得し、これらの重複を避けるために別のアプローチをとるべきですか？または、私は本当に両方のファイルで検証を行う必要がありますか？

ありがとうございました！私が過去にやっていること

Answer 1

はcomponentDidMountライフサイクルイベントで呼び出される関数の性質を持つことです：プロパティは、サンクまたは他のいくつかの非同期アクションにmapDispatchToPropsを使用してコンテナにマッピングされていること

componentDidMount() { 
    this.props.onMount(); 
} 

（the Async Actions documentation参照）。

さらに洗練された代替方法については、ルータから非同期アクションをディスパッチできるようにするRedux First Routerを参照してください。

Answer 2

@JCEが正しい場合は、Async Actionsを調べる必要があります。データをフェッチしてコンポーネントに渡す前にReduxに格納する場合は、副作用ライブラリ（redux-thunks、redux-sagasなど）を使用する必要があります。その理由は、Reduxのアクションは本質的に同期しており、APIのフェッチは非同期操作であるためです。副作用ライブラリは、あなたがそれを達成するのに役立ちます。