店舗更新内のアクションを回避する方法

Question

私の理解では、店舗更新ハンドラ内からアクションをディスパッチするのは反パターンです。正しい？

どのようにして次のワークフローを処理できますか？

• 私は会社に私のページヘッダ
• クリックする上でいくつかの会社のスイッチャーを持っているが、アクティブビューはデータのリロードを強制することにより、状態ストアに応じて変化に反応するいくつかのSELECTEDCOMPANY_UPDATEアクション
• を送出します。例えば。 companyDataService.fetchOrders(companyName)を呼び出してください。
• データが取得されている間にいくつかの読み込みアニメーションを表示したいので、FETCHINGDATA_UPDATEのような専用のアクションがあり、負荷マスクを表示/非表示して関心のあるすべてのビューが反応することができるアプリケーション状態ストアのfetchingDataセクションを更新します

私は実際にFETCHINGDATA_UPDATEアクションを送信しますか？私が直接companyDataService.fetchOrders(companyName)内からこれを行う場合、私が追加している私の最後の文を明確にするため

---

編集

...（以下、例示的なコードでOrdersView.onStoreUpdateを参照）ストア更新ハンドラ内から呼び出されます私の実装は似たようなものにする方法を示していくつかの典型的なコード：

ActionCreator.js

// ... 
export function setSelectedCompany(company) { 
    return { type: SELECTEDCOMPANY_UPDATE, company: company }; 
} 

export function setFetchingData(isFetching) { 
    return { type: FETCHINGDATA_UPDATE, isFetching: isFetching }; 
} 
// ... 

CompanyDataService.js

// ... 
export fetchOrders(companyName) { 
    this.stateStore.dispatch(actionCreator.setFetchingData(true)); 
    fetchData(companyName) 
    .then((data) => { 
     this.stateStore.dispatch(actionCreator.setFetchingData(false)); 
     // Apply the data... 
    }) 
    .catch((err) => { 
     this.stateStore.dispatch(actionCreator.setFetchingData(false)); 
     this.stateStore.dispatch(actionCreator.setFetchError(err)); 
    }) 
} 
// ... 

CompanySwitcher.js

// ... 
onCompanyClicked(company) { 
    this.stateStore.dispatch(actionCreator.setSelectedCompany(company)); 
} 
// ... 

OrdersView.js私はデーヴィンに同意

// ... 
constructor() { 
    this._curCompany = ''; 
    this.stateStore.subscribe(this.onStoreUpdate); 
} 
// ... 
onStoreUpdate() { 
    const stateCompany = this.stateStore.getState().company; 
    if (this._curCompany !== stateCompany) { 
    // We're inside a store update handler and `fetchOrders` dispatches another state change which is considered bad... 
    companyDataService.fetchOrders(stateCompany); 
    this._curCompany = stateComapny; 
    } 
} 
// ... 

Answer 1

は、アクションの作成者に場所ですこれを行うには、何か以下のような：

export function fetchOrders (company) { 
    return (dispatch) => { 
    dispatch ({ type: FETCHINGDATA_UPDATE }); 
    return fetchOrderFunction().then(
     (result) => dispatch ({ type: FETCHING_COMPLETED, result }), 
     (error) => dispatch ({ type: FETCHING_FAILED, error }) 
    ); 
    }; 
} 

はその後減速にFETCHINGDATA_UPDATEはtrueにあなたの負荷インジケータを設定することができますし、偽I両方の成功に戻ってそれを設定し、あなたの行動の作成者インサイド