Question

我正在使用React + Redux + redux-thunk代码库，我看到了一些奇怪的行为。如果我尝试在componentWillMount中执行 TWO 操作，则第二个操作将无限循环。

这是componentWillMount：

componentWillMount() {
  const { actions } = this.props;

  // Action #1 (synchronous)
  actions.openLoader();

  // Action #2 (promise-based fetch)
  actions.getListingsPurchased().then(() => {
    actions.closeLoader();
  })
  .catch(error => {
    console.error(error);
  });
}

第一个操作openLoader()是一个简单的状态更新。第二个操作是获取服务器。动作文件在这里：

export function openLoader() {
  return {
    type: TYPES.SET_LOADER_OPEN
  };
}

export function getListingsPurchased() {
  return dispatch => {
    return fetch'URL GOES HERE', { 'credentials': 'include' })
      .then(response => {
        return response.json();
      })
      .then(response => {
        return dispatch({ type: TYPES.SET_LISTINGS, data: response.data });
      });
  };
}

如果我要从openLoader() 删除第一个操作componentWillMount，则不会发生无限循环。否则，fetch电话会不断重复。

任何帮助都会受到赞赏，我似乎已经碰壁了。

Answer 1

我认为打破无限循环的最佳位置是Redux reducer。 Reducer是您必须决定是否要更新应用状态的地方 - ＆gt;将触发重新渲染您的组件 - ＆gt;将触发获取操作。

因此，尝试设置一些reducer条件，您可以在其中识别出之前已经获取状态，并且您不会更新状态。

在componentWillMount中调度时的无限循环

1 个答案: