web-dev-qa-db-fra.com

Redux- Form: impossible d'envoyer une action lors de la soumission

J'utilise redux-form dans mon React/Redux application, et j'essaie de comprendre comment envoyer une action lors de la soumission.

J'ai pu déclencher la fonction handleSubmit et la fonction de soumission que je lui transmets est exécutée, mais l'action "submitFormValues" n'est pas appelée.

J'ai essayé d'utiliser mapDispatchToProps et connect (), mais cela ne fonctionne pas non plus.

Les actions Redux-Form s'exécutent (START_SUBMIT, STOP_SUBMIT, SET_SUBMIT_SUCCEEDED), mais mon propre créateur d'action n'est jamais exécuté.

Voici le formulaire:

import React from "react";
import { Field, reduxForm } from "redux-form";
import {submitFormValues} from "../../../actions/BasicFormActions";


function submit(values) {
    //Can log the values to the console, but submitFormValues actionCreator does not appear to be dispatched.
    return new Promise(function(resolve) { resolve(submitFormValues(values))} )
}

const renderField = ({ input, label, type, meta: {touched, error} }) => (
    <div>
        <label>{label}</label>
        <div>
            <input {...input} placeholder={label} type={type}/>
            {touched && error && <span>{error}</span>}
        </div>
    </div>
)

const BasicForm = (props) => {
    const { error, handleSubmit, pristine, reset, submitting } = props;
    return (
        <form onSubmit={handleSubmit(submit)}>
            <Field name="firstName" type="text" component={renderField} label="First Name"/>
            <Field name="lastName" type="text" component={renderField} label="Last Name"/>
            {error && <strong>{error}</strong>}
            <div>
                <button type="submit" disabled={submitting}>Submit</button>
                <button type="button" disabled={pristine || submitting} onClick={reset}>Clear</button>
            </div>
        </form>
    )
}



export default reduxForm({
    form: "basicForm",
    submit
})(BasicForm)

Voici l'action Creator (utilise Thunk). Je peux envoyer ces actions avec succès, mais pas à partir du formulaire.

 export const submitFormValues = (values) => (dispatch) =>
        getData("submitApproveForm", values).then(response => {
            dispatch(formSubmissionError(response))
        }).catch(error => {
            throw (error);
        });

const formSubmissionError = (response) =>
    ({
        type: types.FORM_SUBMISSION_ERROR,
        basicFormResponse: { ...response}
    });


export const getData = (apiName, args) =>
    fetch(settings.basePath + getUrl(apiName, args))
        .then(response =>
    response.json()
    ).catch(error => {
        return error;
    });

Enfin mon réducteur:

import * as types from "../actions/ActionsTypes";
import initialState from "./initialState";

const basicFormReducer = (state = initialState.basicFormResponse, action) => {
    switch (action.type) {
        case types.FORM_SUBMISSION_ERROR:
            return {...state, "errors": action.basicFormResponse}; // returns a new state
        case types.FORM_SUBMISSION_SUCCESS:
            return {...state, "successes": action.basicFormResponse}; // returns a new state
        default:
            return state;
    }
};

export default basicFormReducer;

Merci d'avance pour votre aide.

reactjsreduxreact-reduxredux-form
10
Julie Torres

Redux Form n'envoie rien dans le rappel onSubmit. En effet, nous ne faisons aucune hypothèse sur la façon dont vous souhaitez traiter vos soumissions de formulaire.

Vous pouvez cependant tilisez l'argument dispatch et ... envoyez votre action!

function submit(values, dispatch) {
    return dispatch(submitFormValues(values));
}
15
gustavohenke