Envoyer le formulaire de données via redux-form et réducteur et créateur d'actions

Question

Bonjour, Comment envoyer la valeur des champs de mon formulaire redux? En effet, j'ai besoin d'envoyer les valeurs des champs de mon formulaire en base de données avec un réducteur et actionCreator.

Ma forme:

import React, {PropTypes} from 'react'; 

class myformClass extends React.Component { 
render(){ 
    return(
    <form> 
     <Field 
     name="inputName" 
     ref="inputName" 
     hintText="Le nom du flux" 
     floatingLabelText="Nom du input" 
     component={renderTextField} 
     fullWidth={true} 
     /> 
     <Field 
     label="inputComment" 
     name="inputComment" 
     ref="inputComment" 
     hintText="La description du input" 
     floatingLabelText="Commentaire" 
     component={renderTextareaField} 
     /> 
    </form> 
) 
} 
} 

export default withRouter(reduxForm({ 
    form: 'myForm' 
})(myformClass)) 

Dans mon application index, j'importé "réducteur dans Redux-forme":

import { reducer as reduxFormReducer } from 'redux-form' 

Je combine les Réducteurs:

let allReducers = combineReducers({form: reduxFormReducer }) 

J'ai créé un type d'action:

export const FORM_ADD = 'FORM_ADD' 

Je crée aussi un créateur d'action:

export function addForm(dataForm) { 
    return { 
    type: types.FORM_ADD , 
    data: { 
     INPUT_NAME: dataForm.inputName, 
     INPUT_COMMENT: dataForm.inputComment 
    } 
    } 
} 

Mais maintenant, je ne sais pas, comment puis-je récupérer et envoyer la valeur de ma forme avec mon créateur d'action et le réducteur. Je sais que je dois récupérer la valeur de mon formulaire et l'envoyer ensuite.

Pour plus d'informations, j'ai pu récupérer la valeur de mon Redux forme en faisant ceci:

import React, {PropTypes} from 'react'; 

class myformClass extends React.Component { 

    static contextTypes = {store: PropTypes.object} 

    getValMyForm =() => { 
    const { store } = this.context 
    const state = store.getState() 
    let valueFormFLow = getFormValues('myForm')(state) 
    return valueFormFLow; 
    } 
} 

export default withRouter(reduxForm({ 
    form: 'myForm' 
})(myformClass)) 

J'ai besoin de votre aide PLEASEEEEEE et je suis désolé pour mon anglais! !! :)

Answer 1

Lorsque vous utilisez la fonction reduxForm sur votre composant, Redux-From vous donne automatiquement une fonction handleSubmit, que vous pouvez transmettre une fonction. Cette fonction, lorsque vous soumettez le formulaire, recevra un objet où toutes les valeurs de formulaire sont disponibles par leur clé (la propriété name).

Par exemple (runnable JSFiddle demo here):

const MyForm = ({handleSubmit}) => (
<form onSubmit={ handleSubmit((formData) => console.log(formData)) } > 
    <div> 
    First Name 
    <Field name={`firstName`} component='input' type='text' /><br /> 
    Last Name 
    <Field name={`lastName`} component='input' type='text' /><br /> 
    </div> 
    <input type="submit" value="submit" /> 
    </form> 
) 

const MyTestForm = reduxForm({ 
    form: 'myForm' 
})(MyForm); 

// END EXAMPLE 
ReactDOM.render(
    <Provider store={store}> 
    <MyTestForm /> 
    </Provider>, 
    document.getElementById('root') 
); 

Ainsi, dans cet exemple simple forme, si je remplissais les premier et deuxième champs avec « Test1 » et « Test2 », puis quand je presse le bouton soumettre je recevrai un message de console avec {firstName: "Test1", lastName: "Test2"}.

Si vous disposiez d'une répartition d'action et/ou d'un appel d'API que vous souhaitiez exécuter à la place, vous devez simplement passer une autre fonction à handleSubmit.