Reduxアクションが2番目のアクションを送信するまで待ちます。

Question

こんにちは。

私はルータv3とReduxでReactアプリケーション（バージョン16）を作成しています。

アプリはこれに類似の構造を有する：

<Route path="/" component={BakeryComponent}> 
    <IndexRoute component={LandingComponent}/> 
    <Route path="employees" component={EmployeesComponent}/> 
    <Route path="clients" component={ClientComponent}/> 
</Route> 

だから我々は、異なるエンティティのように持っています。主要なベーカリー、選択されたベーカリーに依存する従業員、またベーカリーに依存する顧客。

アプリにアクセスすると、名前、従業員数量などのベーカリーの一般情報（デフォルトで選択されているもの）が表示されるランディングページに着陸します。これらの情報はすべてバックエンドからのもので、BakeryコンポーネントまたはLandingコンポーネントのcomponentDidMountで取得されます（この時点では違いはありません）。

ユーザが訪問ページにいるとき、彼は従業員ビューまたはクライアントビューのいずれかにナビゲートできます。それが起こると、コンポーネントがマウントされ、それが従業員コンポーネントであると仮定し、コンポーネントのcomponentDidMountメソッドで必要な情報（ここでは従業員リスト）を取得します。

これまでのところすべてうまくいきます。

ユーザーがページをリフレッシュすると、すべてが動作するはずです（要件ですが、そうではありません）。問題は、BakeryComponentとEmployeesComponent（両方とも）が再度マウントされると、新しいバックエンド呼び出しが（並行して）トリガーされるということです。しかし、従業員へのバックエンドの呼びかけは、まずベーカリーに依存しています。何故なら、従業員がどのベーカリーを望んでいるか知る必要があるからです。

ベーカリーがすでに解決されていて（getStateを使用している）、解決されていない場合は解決されるまで、呼び出されたアクション（従業員を取得するアクション）をチェックしようとしました。しかし、それは私を納得させるものではありません。ハックのように見えます。私はReact/Reduxがこれを解決するツールをすでに持っているはずだと思っていますが、私はそれらを知らないだけです。私は正しい？

本当に助かります。

ありがとうございます！

Answer 1

私はあなたのための方法を考えることができますが、実際にはクールな解決策ではありません。 LandingComponentでdispatchを呼び出す前に、BakeryComponentのデータが準備されているかどうかを確認できます。このような何か：

BakeryComponent

componentDidMount() { 
    // after this one finish we may have something in the store like: state.bakery.loaded = true 
    dispatch(loadBakery()) 
} 

LandingComponent

// Landing component should connect to state.bakery.loaded to get updated data 
componentDidMount() { 
    initData() 
} 

componentDidUpdate(){ 
    initData() 
} 

initData() { 
    // check if bakery loaded and landing data is not loaded 
    if (state.bakery.loaded && !state.landing.loaded) { 
    // this should load data and set the state.landing.loaded to true 
    dispatch(loadLanding()) 
    } 
}