Redux-フォーム：私は私の/ Reduxのを反応させるのアプリケーションでReduxの形式を使用している、と私は提出する上でアクションをディスパッチする方法を把握しようとしている

Question

送信のアクションをディスパッチすることができません。

私はhandleSubmit機能を起動することができた、と私はそれに渡す提出する関数が実行されますが、「submitFormValues」アクションが呼び出されません。

私はmapDispatchToPropsを使用してみましたし、接続（）が、それはどちらか動作しませんしました。

Reduxのフォームのアクションは（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) 

ここでアクションCreatorは（サンクを使用しています）です。フォームからではなく、これらのアクションを正常にディスパッチできます。

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

ReduxのフォームはonSubmitコールバックには何も送出されません。これは、フォームの提出にどのように対処したいと考えているかについては何も仮定していないためです。

ただし、use the dispatch argumentと...あなたの行動を派遣することができます！

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