रेडक्स- फॉर्म:

Question

पर कार्रवाई को डिस्पैच करने में असमर्थ मैं अपने रिएक्ट/रेडक्स एप्लिकेशन में रेडक्स-फॉर्म का उपयोग कर रहा हूं, और मैं यह समझने की कोशिश कर रहा हूं कि सबमिट पर कार्रवाई कैसे प्रेषित करें।

मैं हैंडल सबमिशन फ़ंक्शन को ट्रिगर करने में सक्षम हूं, और सबमिट फ़ंक्शन जिसे मैं पास करता हूं निष्पादित किया जाता है, लेकिन 'submitFormValues' क्रिया को नहीं कहा जाता है।

मैंने mapDispatchToProps और कनेक्ट() का उपयोग करने का प्रयास किया है, लेकिन यह या तो काम नहीं करता है।

रेडक्स-फॉर्म क्रियाएं निष्पादित (START_SUBMIT, STOP_SUBMIT, SET_SUBMIT_SUCCEEDED), लेकिन मेरा स्वयं का एक्शन निर्माता कभी निष्पादित नहीं होता है।

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) 

यहाँ कार्रवाई प्रजापति (thunk उपयोग करता है) है:

यहाँ रूप है। मैं इन कार्यों को सफलतापूर्वक प्रेषित करने में सक्षम हूं, सिर्फ फॉर्म से नहीं।

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

अंत में मेरी कम करने:

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; 

आपकी मदद के लिए अग्रिम धन्यवाद।

Answer 1

रेडक्स फॉर्म onSubmit कॉलबैक में कुछ भी प्रेषित नहीं करता है। ऐसा इसलिए है क्योंकि हम आपके फॉर्म सबमिशन से निपटने के तरीके के बारे में कोई धारणा नहीं करते हैं।

हालांकि, आप use the dispatch argument और ... अपनी कार्रवाई भेज सकते हैं!

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