Redux 如何避免商店更新中的操作

就我的理解而言，从存储更新处理程序中分派操作是一种反模式。对吗

那么，我如何处理以下工作流程

我的页眉上有一些公司交换机 单击公司会发送一些选定的公司更新操作 活动视图通过强制重新加载数据对状态存储中的相应更改作出反应。例如，通过调用companyDataService.fetchOrderscompanyName。 我想在提取数据的过程中显示一些加载动画，因此有一个专门的操作，如FETCHINGDATA\u UPDATE，它更新我的应用程序状态存储中的FETCHINGDATA部分，所有感兴趣的视图都可以通过显示/隐藏加载掩码来对其作出反应 我在哪里实际调度FETCHINGDATA\u更新操作？如果我直接从companyDataService.fetchOrderscompanyName中执行此操作，它将从存储更新处理程序中调用，请参见下面示例代码中的OrdersView.onStoreUpdate

编辑 为了澄清我的最后一句话，我添加了一些示例代码，展示了我的实现是什么样子的：

ActionCreator.js

CompanyDataService.js

CompanySwitcher.js

OrdersView.js

---

我同意Davin的观点，在动作中，创造者是这样做的地方，比如：

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 })
    );
  };
}

---

然后，在reducer FETCHINGDATA_UPDATE中，您可以将加载指示器设置为true，也可以将其设置为false I SUCCESS and FAILED（成功和失败）

在您的action creator中是最佳位置。我对最后一句有点困惑——它将从存储更新处理程序中调用。你能展示一些代码吗？动作创建者是否应该实际执行业务逻辑？这是用户偏好的一点，但简而言之，是的，它没有问题。事实上，Redux建议带有副作用的代码应该进入action creator流程。有关更详细的答案，请参阅

// ...
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));
    })
}
// ...

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

// ...
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;
  }
}
// ...

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 })
    );
  };
}