Question

我有一个操作 userAction，它将调用 API 从数据库加载数据，我想在单独的操作 calcAction 中使用该数据，以便我可以发布到一个带有来自 userAction 的数据的 API，但是当我在 getState() 中调用 calcAction 时，我得到了初始状态。我如何确保 getState() 仅在 userAction 从数据库加载数据后才获得状态？

我的 calcReducer 看起来像这样：

export const getAllCharReq = () => (dispatch, getState) => {
  const { userData } = getState();
  axios.post('/api/character', userData).then((res) => {
    dispatch({
      type: GET_ALL_CHAR_REQ,
      payload: res.data,
    });
  });
};

在应用组件中调用 userAction，以便在首次访问网站时加载用户数据。而calcAction是在子组件的componentDidMount()中调用的，这样只有在组件被访问时才能获取到相关数据。所以这只是一个问题，如果用户首先加载这个子组件。如果用户要导航到此子组件，则加载 userData。

Answer 1

您可以通过仅在 userData 存在时执行提取来在您的 thunk 内处理它。

export const getAllCharReq = () => (dispatch, getState) => {
  const { userData } = getState();
  if (userData) {
    axios.post("/api/character", userData).then((res) => {
      dispatch({
        type: GET_ALL_CHAR_REQ,
        payload: res.data
      });
    });
  } else {
    dispatch({
      type: "ERROR",
      payload: "No user data found"
    });
  }
};

您还可以将组件中的 userData 作为参数传递给操作创建者，如果它适用于您的应用程序结构，我会建议这样做。在组件内，除非加载了 userData，否则您将知道不要分派 thunk。

export const getAllCharReq = (userData) => (dispatch) => {
  axios.post("/api/character", userData).then((res) => {
    dispatch({
      type: GET_ALL_CHAR_REQ,
      payload: res.data
    });
  });
};

如何在redux中调用getState()之前等待数据加载

1 个答案: