React Redux - 等待数据加载

Question

我正在使用 Redux (+ thunk) 从我的 API 获取数据。我实现了一个 Data Fetcher 组件，它调用所有操作，完成后调度 LOADED。在我渲染内容的实际主要组件中，我会等到isLoadedprops 中的 flag 设置为 true。

这是数据获取器中的方法：

const fetchData = () => {
    if (isAuthenticated) {
        const p = [];
        p.push(fetchDataSetOne());
        p.push(fetchDataSetTwo());
        Promise.all(p).then( () => setHasLoaded() );
    }
}

每个 fetch 方法都会返回一个 axios Promise，一旦检索到，我就会分派，如下所示：

export const fetchDataSetOne = () => dispatch => {
  return axios.get(`${API_URL}/dataSetOne`)
    .then(res => {
        dispatch({
            type: FETCH_ALL_DATA_SET_ONE,
            payload: res.data.docs
        });
    });
};

在我的组件的渲染函数中，我仅在加载时渲染内容（由操作中的 LOADED 调度设置setHasLoaded），如下所示：

{ hasLoaded && <MyContent> }

即使我“等待”操作完成（= Promise.all），我的变量 hasLoaded 在设置获取的数据之前已设置为 true。有人可以帮忙吗？

Answer 1

问题是你返回一个函数而不是一个承诺。
这立即解决。

查看工作代码示例

export const fetchData2 = dispatch => () => {
  dispatch({type: 'START_FETCH'})
  const p = [
    fetchDataSetOne(dispatch),
    fetchDataSetTwo(dispatch)
  ];
  Promise.all(p).then((res) => setHasLoaded(res));
};

// this returns a promise AFTER it calls an action
const fetchDataSetOne = dispatch => {
  return axois.get(`${API_URL}/dataSetOne`).then(res => {
    dispatch({
      type: "FETCH_ALL_DATA_SET_ONE",
      payload: res.data.docs
    });
  });
};

这会在两个承诺都解决后解决，但状态会在每个承诺解决后更新。要在所有承诺解决后更新状态，请尝试以下操作：

export const fetchData3 = dispatch => () => {
  dispatch({ type: "START_FETCH" });
  const p = [
    axois.get(`${API_URL}/dataSetOne`),
    axois.get(`${API_URL}/dataSetTwo`)
  ];
  Promise.all(p).then(callActions(dispatch));
};

const callActions = dispatch => res => {
  dispatch({
    type: "FETCH_ALL_DATA_SET_ONE",
    payload: res[0].data.docs
  });
  dispatch({
    type: "FETCH_ALL_DATA_SET_TWO",
    payload: res[1].data.docs
  });
  setHasLoaded(res);
};