web-dev-qa-db-ja.com

Redux-フォーム：送信時にアクションをディスパッチできません

React/Reduxアプリケーションでredux-formを使用しています。送信時にアクションをディスパッチする方法を理解しようとしています。

HandleSubmit関数をトリガーすることができ、それに渡す送信関数が実行されましたが、 '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)

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

 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;

よろしくお願いします。

reactjsreduxreact-reduxredux-form
10
Julie Torres

Reduxフォームは、onSubmitコールバックで何もディスパッチしません。これは、フォームの送信をどのように処理するかについて、私たちが想定していないためです。

ただし、 dispatch引数を使用 および...アクションをディスパッチできます！

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