如何在 React 中调度异步操作

Question

我有三个 redux 操作。您可以在下面找到它们：

export const loadUser = () => (dispatch, getState) => {
  const token = localStorage.getItem('twitter-token');
  const config = {
    headers: {
      Authorization: `Token ${token}`,
    },
  };
  axios
    .get(`${url}/api/user`, config)
    .then((res) => {
      dispatch({ type: USER_LOADED, payload: res.data });
    })
    .catch((err) => {
      dispatch({ type: USER_NOTLOADED });
    });
};

export const loadTweets = () => (dispatch, getState) => {
  const token = getState().auth.token;
  const config = {
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Token ${token}`,
    },
  };
  axios
    .get(`${url}/tweet`, config)
    .then((res) => {
      dispatch({ type: TWEET_LOAD, payload: res.data });
    })
    .catch((err) => {
      dispatch({ type: ADD_ERROR, payload: err.response.data });
    });
};

最后一个

export const getComments = (id) => (dispatch, getState) => {
  const token = getState().auth.token;
  const config = {
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Token ${token}`,
    },
  };
  axios
    .get(`${url}/tweet/comments/${id}`, config)
    .then((res) => {
      dispatch({ type: GET_COMMENT, payload: res.data });
    })
    .catch((err) => {
      dispatch({ type: ADD_ERROR, payload: err.response.data });
    });
};

我已经将它们全部发送到App.js

useEffect(() => {
    dispatch(loadUser());
    dispatch(loadTweets());
    dispatch(getComments('all'));
  }, [dispatch]);

但在 loadUser 结束之前，loadTweets 正在执行。我希望他们被一个人派遣。我该如何处理？你能帮帮我吗？

Answer 1

您的所有代码都遵循此示例：

export const loadUser = async () => (dispatch, getState) => {
  const token = localStorage.getItem('twitter-token');
  const config = {
    headers: {
      Authorization: `Token ${token}`,
    },
  };
  await axios.get(`${url}/api/user`, config);
};