reactjs - 明らかに複数レベルのネストされたアクションを設計し、それらをバッチ処理する

Question

私のアプリのスライスのセットアップは次のようなものです:

アプライアンスは、1 つまたは複数のデータソースからデータを取得します。ユーザーは、1 つ以上のアプライアンスと対話します。現在、dataSources はリアルタイム データを提供します。このデータは、アプライアンスごとに一定の間隔でフェッチされてから表示されます。したがって、構造は次のように表示できます。

User <----->  (Appliance1, Appliance2) <------> ((DataSource1, DataSource2), (DataSource1, DataSource3, DataSource4))

データ ソースが重複する場合があることに注意してください。つまり、2 層のように重なり合うデザインです。

現在、アクションは次のように設定されています (コードは構文的に 100% 正しいわけではありません - 単なる設計上の問題です)。

ComponentContainer {
    ...

    componentDidMount() {
        this.setInterval(() => {
            this.props.appliances.forEach(appliance => dispatch(fetchApplianceRealtime(appliance))
        }, 4000))
    }
}


// in src/actions/appliance.js
fetchApplianceRealtime(appliance) {
    return (dispatch, getState) => {
        fetchApplianceRealtimeInit(appliance) // I may want to toggle a flag here

        const promises = appliance.dataSources.map(ds => return dispatch(fetchDataSourceRealtime(ds)))
        Promise
            .all(promises)
            .then(() => {
                dispatch(fetchApplianceRealtimeDone(appliance))
            })
            .catch(() => {
                dispatch(fetchApplianceRealtimeFail(appliance))
            })
    }
}


// in src/actions/data-source.js
fetchDataSourceRealtime(ds) {
    return (dispatch, getState) => {
        // No need for Init() action as data sources dont need their own fetching flag or something.
        return fetch(...)
            .then(resp => {
                // normalize
                return dispatch(fetchDataSourceRealtimeDone(ds, entities)
            })
            .catch(error => {
                return dispatch(fetchDataSourceRealtimeFail(ds, error)
            })
    }
}

さて、これはまともなデザインですか？ここでいくつかの機能を見逃していると強く感じています。シナリオを考えると、アクションのネストは最善の方法ですか? ここで他の改善を行うことはできますか？

更新: ここで直面している問題の 1 つは、1 つ以上のfetchDataSourceRealtime呼び出しでフェッチ エラーが伝播することfetchApplianceRealtimeです。

今、私はこの問題を間違った視点から見ているだけだと感じています。