Aktionsersteller wird aufgerufen, aber Aktion wird nicht gesendet

Question

Ich habe eine Komponente, die erfolgreich redux-form onSubmit verwendet, um einen Aktionsersteller aufzurufen. Der Ersteller führt einen Ajax-Aufruf durch, aber die Aktion wird niemals gesendet, um sie im Speicher zu speichern. Ich muss etwas in der Verkabelung von react-redux und redux-form vermasselt haben, möglicherweise in der Bindung des Action Creators. Ich habe alles gelesen, was ich bei Google gefunden habe und kann das Problem immer noch nicht finden. Irgendwelche Ideen? (Ich habe redux-Versprechen enthalten die Anfrage Versprechen zu handhaben, aber es nie macht, dass weit)

import React from 'react'; 
import { Field, reduxForm } from 'redux-form'; 
import validate from '../utils/add_person_validation'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { addPersonResponseAction } from '../actions/index'; 
import renderField from '../components/render_input_field'; 

// call the action creator - this part succeeds 
const doSubmit = function(values) { 
    addPersonResponseAction(values); 
}; 


let AddPersonContainer = (props) => { 
    const { 
    handleSubmit, 
    pristine, 
    reset, 
    submitting 
    } = props; 


    return (
    <div className="row"> 
     <form onSubmit={handleSubmit(doSubmit)} > 
      <div className="col-sm-6"> 
       <fieldset> 
       <legend>Person Info</legend> 
       <div className="form-group"> 
        <Field name="personFirstName" component={renderField} type="text" label="First Name" className="form-control" /> 
        <Field name="personLastName" component={renderField} type="text" label="Last Name" className="form-control" /> 
        <Field name="birthday" component={renderField} type="date" label="Birthday" className="form-control" /> 
        <Field name="group" component={renderField} type="text" label="Group" className="form-control" /> 
       </div> 
       </fieldset> 
      </div> 
      <div className="form-buttons-container"> 
      <button className="btn btn-default form-button" type="submit" disabled={pristine || submitting}>Submit</button> 
      <button className="btn btn-default form-button" type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button> 
      </div> 
     </form> 
    </div> 
); 
}; 


const mapStateToProps = function({ addPersonResponse }) { 
    return { addPersonResponse }; 
}; 

const mapDispatchToProps = function(dispatch) { 
    return bindActionCreators({addPersonResponseAction}, dispatch); 
}; 

const form = reduxForm({ form: 'addPerson', validate: validate }); 

AddPersonContainer = connect(mapStateToProps, mapDispatchToProps)(form(AddPersonContainer)); 

export default AddPersonContainer; 

/******************************************** 
* Action creator 
**********************************************/ 

import axios from 'axios'; 

export const ADD_PERSON_RESPONSE = 'ADD_PERSON_RESPONSE'; 

export const addPersonResponseAction = (data) => { 

    const postURL = 'http://some-url/addperson'; 
    const request = axios.post(postURL, { data }); 

    return { 
    type: ADD_PERSON_RESPONSE, 
    payload: request 
    }; 

}; 

Answer 1

Redux wickelt Aktionen mapDispatchToProps mit - aber Sie rufen die ungeöffneten Version durch die importierte Methode.

// call the action creator - this part succeeds 
const doSubmit = function(values) { 
    addPersonResponseAction(values); <------ Redux does not know anything about this 
}; 

Versuchen:

let AddPersonContainer = (props) => { 
    const { 
    handleSubmit, 
    pristine, 
    reset, 
    submitting 
    } = props; 

    const doSubmit = function(values) { 
    props.addPersonResponseAction(values); <----- Try this 
    } 

    return (
    <div className="row"> 
     <form onSubmit={handleSubmit(doSubmit)} > 
      <div className="col-sm-6"> 
       <fieldset> 
       <legend>Person Info</legend> 
       <div className="form-group"> 
        <Field name="personFirstName" component={renderField} type="text" label="First Name" className="form-control" /> 
        <Field name="personLastName" component={renderField} type="text" label="Last Name" className="form-control" /> 
        <Field name="birthday" component={renderField} type="date" label="Birthday" className="form-control" /> 
        <Field name="group" component={renderField} type="text" label="Group" className="form-control" /> 
       </div> 
       </fieldset> 
      </div> 
      <div className="form-buttons-container"> 
      <button className="btn btn-default form-button" type="submit" disabled={pristine || submitting}>Submit</button> 
      <button className="btn btn-default form-button" type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button> 
      </div> 
     </form> 
    </div> 
); 
}; 

Da die Funktion, die Sie definieren, haben keinen Zugriff auf Requisiten dies ein bisschen eine Wendung gibt, so versuchen Sie es in die Komponentendefinition Refactoring.

Dies ist eine Quelle der Verwirrung, weil sie es importieren erforderlich ist, wickeln Sie die Funktion so mapDispatchToProps können ... aber es ist die Versuchung, dass die eigentliche Handlung in props, nicht die Funktion selbst ist zu vergessen. Ich bin mir sicher, dass Sie Ergebnisse in der eigentlichen Aktionsfunktion sehen, aber redux weiß es nicht, weil es nicht in dispatch verpackt ist.