Как дождаться загрузки данных перед вызовом getState() в редуксе

У меня есть действие userAction, которое будет вызывать API для загрузки данных из базы данных, и я хочу использовать эти данные в отдельном действии calcAction, чтобы я мог публиковать в API данные из userAction, но когда я вызываю 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.


javascript redux thunk
person dawson1096    schedule 21.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете справиться с этим внутри своего преобразователя, выполнив выборку только тогда, когда присутствует userData.

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.

export const getAllCharReq = (userData) => (dispatch) => {
  axios.post("/api/character", userData).then((res) => {
    dispatch({
      type: GET_ALL_CHAR_REQ,
      payload: res.data
    });
  });
};
person Linda Paiste    schedule 21.01.2021
comment
Я могу передать userData в качестве аргумента, но если userAction еще не загрузил данные, то он все равно будет пустым независимо от передачи аргумента. Я мог бы проверить, прежде чем вызывать calcAction, но я не вижу, чем это будет отличаться от проверки внутри calcAction. Я должен был упомянуть об этом раньше, но у меня есть поле isLoaded в userData. есть ли способ дождаться, пока это станет правдой, прежде чем делать почтовый запрос? - person dawson1096; 22.01.2021