Реагируй родной жду не работает в нажатом состоянии

Question

У меня есть асинхронная функция, которая использует redux, она вызывает API и возвращает ответ от сервера:

function xyz() {
  return async (dispatch, getState) => {
    const { user: { token } } = getState();
    return axios.get(API_URL, {
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        'jwt': token
      }
    })
      .then(response => {
        console.log(response.data.data);
        return response.data.data;
      })
      .catch(function(error) {
        console.log('error: ' + error.message);
      });
  };
}

Функция mapDispatchToProps определяется следующим образом:

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    xyz: () => {
      dispatch(actions.xyz());
    }
  };
};
export default connect(null, mapDispatchToProps)(Container);

Я пытаюсь вызвать функцию xyz из следующей функции:

  abc = async () => {
    const { xyz } = this.props;
    const result = await xyz();
    console.log(result);
  }

, которая срабатывает при нажатии кнопки:

<TouchableOpacity onPressOut={this.abc}>

Я вижу, что console.log вфункция abc печатает неопределенное значение, а console.log (result.data.data) в xyz печатает ожидаемый результат.Где я не прав?

Решение

Ошибка была в функции mapDispatchToProps, в которой отсутствовал возврат.Вот это правильная реализация:

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    xyz: () => {
      return dispatch(actions.xyz());
    }
  };
};
export default connect(null, mapDispatchToProps)(Container);

Answer 1

Как я уже упоминал в комментариях, xyz () должна возвращать обещание.Дважды проверьте правильность передачи аргументов dispatch и getState.Вам также нужно дождаться возвращенного обещания axios.get.Например:

abc = async () => {
  const { xyz } = this.props;
  const result = await xyz();
  const results = await result(); 
  console.log(results);
}

Вот закуска с рабочим примером.

Answer 2

Я не совсем понимаю, что вы имеете в виду, когда говорите, что console.log в xyz печатает ожидаемый результат, вы говорите о error.message в вашем catch?Кроме того, причина, по которой вы можете получать undefined, заключается в том, что function xyz не Async , а скорее возвращает асинхронную функцию, поэтому вы должны сделать xyz async , например:

function async xyz () {
 // Rest of code
}

Более подробно вы можете прочитать здесь