reactjs - react - ¿Cómo asincar/esperar acciones redux-thunk?

redux thunk vs saga

Question

action.js

export function getLoginStatus() {
  return async(dispatch) => {
    let token = await getOAuthToken();
    let success = await verifyToken(token);
    if (success == true) {
      dispatch(loginStatus(success));
    } else {
      console.log("Success: False");
      console.log("Token mismatch");
    }
    return success;
  }
}

component.js

  componentDidMount() {
    this.props.dispatch(splashAction.getLoginStatus())
      .then((success) => {
        if (success == true) {
          Actions.counter()
        } else {
          console.log("Login not successfull");
        }
     });
   }

Sin embargo, cuando escribo el código de component.js con async / await como abajo, aparece este error:

Possible Unhandled Promise Rejection (id: 0): undefined is not a function (evaluating ''this.props.dispatch(splashAction.getLoginStatus())'')

component.js

  async componentDidMount() {
     let success = await this.props.dispatch(splashAction.getLoginStatus());
     if (success == true) {
       Actions.counter()
     } else {
       console.log("Login not successfull");
     }
   }

¿Cómo espero un getLoginStatus () y luego ejecuto el resto de las sentencias? Todo funciona bastante bien cuando se usa .then (). Dudo que falte algo en mi implementación async / await. tratando de resolver eso

Answer 1

Posible rechazo de la promesa no controlada

Parece que te estás perdiendo el .catch(error => {}); en tu promesa Prueba esto:

componentDidMount() {
    this.props.dispatch(splashAction.getLoginStatus())
        .then((success) => {
            if (success == true) {
                Actions.counter()
            } else {
                console.log("Login not successfull");
            }
        })
        .catch(err => {
            console.error(err.getMessage());
        }) ;
}

Answer 2

Remezclando la respuesta de Aspen .

import axios from ''axios''

import * as types from ''./types''

export function fetchUsers () {
  return async dispatch => {
    try {
      const users = await axios
        .get(`https://jsonplaceholder.typicode.com/users`)
        .then(res => res.data)

      dispatch({
        type: types.FETCH_USERS,
        payload: users,
      })
    } catch (err) {
      dispatch({
        type: types.UPDATE_ERRORS,
        payload: [
          {
            code: 735,
            message: err.message,
          },
        ],
      })
    }
  }
}

import * as types from ''../actions/types''

const initialErrorsState = []

export default (state = initialErrorsState, { type, payload }) => {
  switch (type) {
    case types.UPDATE_ERRORS:
      return payload.map(error => {
        return {
          code: error.code,
          message: error.message,
        }
      })

    default:
      return state
  }
}

Esto le permitirá especificar una serie de errores únicos para una acción.

Answer 3

El enfoque de la promesa

export default function createUser(params) {
  const request = axios.post(''http://www..., params);

  return (dispatch) => {
    function onSuccess(success) {
      dispatch({ type: CREATE_USER, payload: success });
      return success;
    }
    function onError(error) {
      dispatch({ type: ERROR_GENERATED, error });
      return error;
    }
    request.then(success => onSuccess, error => onError);
  };
}

El enfoque asíncrono / espera.

export default function createUser(params) {  
  return async dispatch => {
    function onSuccess(success) {
      dispatch({ type: CREATE_USER, payload: success });
      return success;
    }
    function onError(error) {
      dispatch({ type: ERROR_GENERATED, error });
      return error;
    }
    try {
      const success = await axios.post(''http://www..., params);
      return onSuccess(success);
    } catch (error) {
      return onError(error);
    }
  }
}

Referenciado en la publicación Medium explicando Redux con async / await: https://medium.com/@kkomaz/react-to-async-await-553c43f243e2