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

如何在 React 中调度异步操作

1 个答案: