reactjs – Redux- Form:无法在提交时发送动作

前端之家收集整理的这篇文章主要介绍了reactjs – Redux- Form:无法在提交时发送动作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在我的React / Redux应用程序中使用redux-form,我正在试图弄清楚如何在提交时发送一个动作.

我已经能够触发handleSubmit函数,并且我传递给它的submit函数被执行,但是没有调用’submitFormValues’动作.

我已经尝试过使用mapDispatchToProps和connect(),但这也不起作用.

Redux-Form操作执行(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;

预先感谢您的帮助.

Redux Form不会在onSubmit回调中调度任何内容.这是因为我们不会对您希望如何处理表单提交做出任何假设.

但是,您可以use the dispatch argument和…发送您的行动!

function submit(values,dispatch) {
    return dispatch(submitFormValues(values));
}
原文链接:https://www.f2er.com/react/301120.html

猜你在找的React相关文章