0

Tengo un componente el cual tiene un formulario donde al momento de hacer click al botón de Submit mando a llamar una función llamada handleSubmit (qué está en mi componente), el cual por medio de dispatch llama un action y este action, manda a llamar a un servicio (HTTP Request).

Lo que me gustaría es poder obtener la respuesta en el componente para poder hacer validaciones pero como la petición es asíncrona nunca puedo obtener la respuesta y me la imprime como undefined. ¿Cómo puedo obtener la respuesta?


handleSubmit

handleSubmit = (e) => {
   e.preventDefault()
   const { validateFields } = this.props.form;

   validateFields((err, params) => {
       if (!err) {
            const { user, dispatch } = this.props;

            let response = dispatch(actions.addDevice(params))
            console.log(response); //Response is undefined
       }
    });
}

actions.addDevice

function addDevice(params){
    return (dispatch, getState) => {
        let { authentication } = getState();
        dispatch(request({}));

        service.addDevice(params, authentication.user.access_token)
            .then(
                response => {
                    if(response.status === 201) {
                        dispatch(success(response.data));
                    }
                    return response;
                },
                error => {
                    dispatch(failure(error.toString()));
                    dispatch(alertActions.error(error.toString()));
                }
            )
    }

    function request(response) { return { type: constants.ADD_DEVICE_REQUEST, response } }
    function success(response) { return { type: constants.ADD_DEVICE_SUCCESS, response } }
    function failure(error) { return { type: constants.ADD_DEVICE_FAILURE, error } }
}

service.addDevice

function addDevice(params, token){
    return axios({
        url: 'http://localhost:5000/user/add-device',
        method: 'POST',
        headers: { 'Authorization': 'Bearer ' + token},
        data: {
            data1: params.data1,
            data2: params.data2,
            data3: params.data3
        }
    })
    .then(function(response) {
        return response;
    })
    .catch(function(error) {
        return error.response;
    });
}

1 respuesta 1

1

Lo que te falta son dos pasos muy sencillos, retornar y esperar que se ejecute la promesa. Te explico:

En tu función de addDevice que es el action, debes retornar algo, si no retornas nada, por eso obtienes undefined. Así que puedes retornar la promesa, quedando algo así:

function addDevice(params){
  return (dispatch, getState) => {
    let { authentication } = getState();
    dispatch(request({}));

    // -----> AQUI agregas el return <------
    return service.addDevice(params, authentication.user.access_token)
      .then(
        response => {
          if(response.status === 201) {
            dispatch(success(response.data));
          }
          return response;
        },
        error => {
          dispatch(failure(error.toString()));
            dispatch(alertActions.error(error.toString()));
          }
        )
  ...
}

Ya luego es cuestión de hacerla "theneable". Pero antes para hacer tu código mucho más "prettier" puedes utilizar algo que te proporciona redux al momento de conectar un componente, y se conoce como el mapDispatchToProps, que es el segundo parámetro que recibe la función connect. Básicamente lo que esta función hace es retornar un objeto con propiedades para tu componente que hagan uso del método dispatch. Y se implementa así:

const mapDispatchToProps = dispatch => ({
  addDevice: (params) => dispatch(actions.addDevice(params))
});

// se agrega al connect
export default connect(null, mapDispatchToProps)(TuComponente)

Nota: Recuerda que es el segundo parámetro de la función connect el primer parámetro se suele llamar mapStateToProps y lo que recibe como parámetro no es el dispatch si no el state en si

Y luego ya queda llamarlo en tu función de una forma más limpia y "theneable":

handleSubmit = (e) => {
  e.preventDefault()
  const { validateFields } = this.props.form;

  validateFields((err, params) => {
    if (!err) {
      const { user, dispatch } = this.props;

      // recuerda que la función se llama `addDevice` y ahora está en `this.props`
      this.props.addDevice(params).then(response => {
        // Aquí tu response
        console.log(response);
      });
    }
  });
}

BONUS

También puedes usar async y await para no ser tan "thenpendiente". Una forma en la que quedaría bien sería redefinir tu método handleSubmit así:

async handleSubmit = (e) => {
  e.preventDefault()
  const { validateFields } = this.props.form;

  validateFields(async (err, params) => {
    if (!err) {
      const { user, dispatch } = this.props;

      // una forma mucho más bonita y funciona igual
      const response = await this.props.addDevice(params);
    }
  });
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.