Как вернуть обещания от Action создатели react redux

Question

Я пытаюсь вернуть длину массива из создателя действия redux . Но я получаю undefined .

компонент. js

componentDidMount = () => {

   this
       .props
       .getMyData()
       .then(responseFromAction => {
           console.log("Response from Action :", responseFromAction)
        })
       .catch(err => {
           console.log("catch->", err)
       })
}

Действие. js

export const getMyData = () => {

  return async (dispatch, getState) => {

     return new Promise((resolve, reject) => {

        axios
          .get(
               API_URL
          )
          .then(async res => {
               if(res.data.success) {
                  const payload = res.data.myData;

                  dispatch({
                     type : SET_MY_DATA,
                     payload,
                  });

                  resolve(res.data.myData.length);

                }
                else {
                   reject();
                }
            })
            .catch(err => {
                reject()
            })   
        })
    }
}

Я думаю, я должен получить длину массива данных с сервера, но вместо этого я получаю ' undefined ' в компоненте. js

Answer 1

Используя ключевое слово asyn c с внутренней функцией в создателе действий, вы фактически возвращаете обещание как ответ на .then getMyData.

Вы можете легко решить вашу проблему, удалив асинхронный c ключевое слово

export const getMyData = () => {

  return (dispatch, getState) => {

     return new Promise((resolve, reject) => {

        axios
          .get(
               API_URL
          )
          .then(async res => {
               if(res.data.success) {
                  const payload = res.data.myData;

                  dispatch({
                     type : SET_MY_DATA,
                     payload,
                  });

                  resolve(res.data.myData.length);

                }
                else {
                   reject();
                }
            })
            .catch(err => {
                reject()
            })   
        })
    }
}

или, если вы выберете go с ключевым словом asyn c, возможно, вы могли бы использовать await с внутренним обещанием, а затем вернуть значение

export const getMyData = () => {

  return async (dispatch, getState) => {

     const length = await new Promise((resolve, reject) => {

        axios
          .get(
               API_URL
          )
          .then(async res => {
               if(res.data.success) {
                  const payload = res.data.myData;

                  dispatch({
                     type : SET_MY_DATA,
                     payload,
                  });

                  resolve(res.data.myData.length);

                }
                else {
                   reject();
                }
            })
            .catch(err => {
                reject()
            })   
        });

       return length;
    }
}