2
votes

Comment puis-je obtenir la réponse de l'expédition?

J'ai un composant qui a une forme où pour le moment faire cliquer sur le bouton soumettre, j'appelle une fonction handleSubmit (c'est sur mon composant), cette fonction appelle une action via dispatch et cette action, je passe un appel à un service (HTTP Request).

handleSubmit

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;
    });
}

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

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
       }
    });
}

I souhaite obtenir la réponse dans mon composant pour pouvoir effectuer des validations mais comme la requête est asynchrone, je ne peux jamais obtenir la réponse et n'imprime qu'une variable indéfinie. Comment puis-je synchroniser la réponse? Ou que dois-je faire pour pouvoir effectuer des validations?

javascript reactjs react-redux

1 commentaires

Pour utiliser la réponse dans votre composant, vous devez faire 3 autres choses: Créez un réducteur sur ADD_DEVICE_REQUEST pour mettre à jour l'état de redux, créez une fonction de sélection pour récupérer la variable que vous avez modifiée dans l'état, puis ajoutez un prop au composant égal au résultat de ce sélecteur avec une fonction mapStateToProps

3 Réponses :

3
votes

Vous ne renvoyez pas la promesse service.addDevice .

Vous pouvez donc renvoyer service.addDevice ... et dans handleSubmit vous effectuez dispatch (...). then ((data) = > ... faire quelque chose avec les données ...)

0 commentaires

1
votes

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

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

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

0 commentaires

0
votes

Veuillez remplacer votre code par ce code

handleSubmit

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

        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()));
                }
            )
    }

    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 } }
}

actions.addDevice

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

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

            dispatch(actions.addDevice(params)).then((response)=>{
                  console.log(response);
            })
       }
    });
}

0 commentaires