Когда я вызываю api, то redux не ждет ответа от вызова api и вызывает случай сбоя даже до получения ответа

#react-native #redux #axios #redux-thunk

Вопрос:

ApiCall.js

Здесь я вызвал свой API с помощью Axios. Я использовал Обещание, чтобы получить ответ. Этот ответ решается позже, и действие redux вызывает случай сбоя до получения этого ответа.

 export const callPostApi = async (url, body) => {
  console.log('url ==> ', url, ' body ===> ', body);
  return new Promise((resolve, reject) => {
    try {
      axios.post(url, body, config).then(
        (response) => {
          console.log('response ==> ', response.data);
          const { success, data, message } = response.data;
          if (!success) {
            alert(message);
          }
          return resolve(response.data);
        },
        (error) => {
          console.log('error in post api', error);
          return reject(error);
        }
      );
    } catch (error) {
      console.log('error', error);
    }
  });
};

export const callLoginApi = async (body) => {
  const resp = await callPostApi(apis.LOGIN_URL, body);
  return resp;
};
 

ActionCreator.js

 export const loginLoading = () => {
  return { type: types.LOGIN_LOADING };
};

export const loginSuccess = (data) => {
  return {
    type: types.LOGIN_SUCCESS,
    payload: data,
  };
};

export const loginError = (error) => {
  return { type: types.LOGIN_ERROR, error };
};
 

action.js

Я ставлю здесь асинхронное ожидание. Но redux не ждет ответа. Здесь я получаю ответ неопределенный после того, как ответ на вызов API получен как успешный. какую ошибку я совершаю?

 export const login = (body) => async (dispatch) => {
  dispatch(ActionCreator.loginLoading());
  try {
    const resp = await callLoginApi(body);
    console.log('login resp ==> ', resp);

    if (resp != undefined amp;amp; resp != null) {
      const { success = false, message = '', data } = resp;

      if (success == true) {
        const obj = { user: data.user, token: data.token, isLoggedIn: true };
        dispatch(ActionCreator.loginSuccess(obj));
        storeJSON(CONST.user, data.user);
        storeString(CONST.token, data.token);
        RootNavigation.navigate(SCREENS.Tab, { screen: SCREENS.Home });
      } else {
        dispatch(ActionCreator.loginError(message));
      }
      if (message != '') {
        alert(message);
      }
    }
  } catch (error) {
    dispatch(ActionCreator.loginError(error));
  }
};
 

Комментарии:

1. Для выполнения асинхронных действий используйте промежуточное программное обеспечение thunk github.com/reduxjs/redux-thunk

2. @MichaelBahl Я уже использую redux-thunk

3. Поскольку callPostApi является асинхронным, необходимо ли возвращать обещание? Попробуйте удалить асинхронность перед вызовом postapi.