子コンポーネントでアクションを発生させたときにディスパッチの途中でディスパッチできない

Question

私は現在自分のアプリケーションを構造化しているので、このようなReact-RouterによってレンダリングされるFormNameで渡されたコンフィグレーションをロードするFormWrapperコンポーネント - FormWrapperの負荷が、それはActionCreatorを呼び出し、サーバーに関するページから設定を取得し、objPropsを経由して構成のページの受け渡しをレンダリング

<Route path="/Diary/Test" components={require('./components/wrapperComponents/formWrapper.jsx')} FormName="AppointmentBooking"/> 

。このように物事を行う理由は、もともと私たちは、ユーザーが簡単にフォームを見て、どのコンポーネントが、それは私たちがフォームを保存するために許可されて示されており、それに付随し、どのようにカスタマイズすることができるようにするためにできるようにしたかったということです

render: function() { 
    return(React.createElement(PageComponents[this.props.FormName], objProps); 
} 

子コンポーネントを設定してから、包括的なラッパーコンポーネントでロードするだけです。だから、フォームの包括的なものはすべてフォームラッパーに置かれ、特定のコードを構成すると各ページコンポーネントに座り、その特定のページに関連する部分のみを読み込むことができます。

私は、AppointmentBookingフォームで、いくつかのデータ（たとえば、予定場所のドロップダウンリストのオプション）を読み込むために、componentWillMount/componentDidMountメソッドでアクションを発生させる必要がある場合、「Can not発送中に発送する "というエラーが発生します。

私が推論したのは、フォームラッパーによってトリガーされた最初のアクションがデータを持っていたためformWrapperの再レンダリングを引き起こし、React.createElementがトリガーしていたAppointmentBookingコンポーネントをレンダリングしようとしていたということでしたアクションによってディスパッチャエラーが発生します。

私はwaitFor（）を使って最初のアクションが完了するのを待ってから2番目のトリガを待つことを読んだことがありますが、これは子コンポーネントがそれを知っていて、懸念の適切な分離を維持していない。

これは一般的な問題ですか、私はこれに正しい方法でアプローチしていますか？もしそうでなければ、これを達成するための提案方法がありますか？

Answer 1

Fluxのベストプラクティスでは、「コンテナ」コンポーネントを使用することをお勧めします。そうすれば、問題が解決する可能性があります。 https://facebook.github.io/flux/docs/flux-utils.html#best-practices

"コンテナ"コンポーネントは、ストア通信を容易にすることのみを目的とするダミーコンポーネントです。その責任を1つのコンポーネントにオフショアリングすることで、このような奇妙なレースの問題を回避できます。

コンテナの基本規則は、関連するストアから収集された固有の情報（小道具として）を渡しながら、常に同じ子コンポーネントをレンダリングする必要があるということです。条件付き論理なし。ちょうど情報のルーティング。

このパラダイムに再構成できれば、それはあなたの問題を解決します。しかし、あなたのアプリケーション全体にアクションとリスナーがすでに広がっているならば、それは小さな仕事ではありません。