Есть ли способ использовать действия Redux и редуктор с response-final-form? - PullRequest
Новая
       16

Есть ли способ использовать действия Redux и редуктор с response-final-form?

0 голосов
/ 09 октября 2019

У меня есть форма, созданная с помощью обычного компонента класса React, который я пытаюсь перенести, чтобы использовать 'response-final-form'. Все выглядит нормально, но не может найти способ использовать редукторы с «response-final-form»

Изначально я использовал bindActionCreators для реагирования на карту Dispatch To Props. Итак, раньше он делал файл с призывом к действию, и все было хорошо. Не уверен, что есть возможность использовать те же функции. Я пытался вызвать действие непосредственно из onSubmit, но отправка там не определена. Я даже не смог найти учебник, который охватывает эту часть.

Форма регистрации: 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {Link} from 'react-router-dom'
import {Form, Field} from 'react-final-form';


// custom modules
import { submitEmail } from '../../actions/submitEmail';

import '../../styles/custom.css';


//Form through react-final-form
const renderInput = ({input, meta}) => (
    <input {...input} type="text" errorMessage={meta.touched && meta.error} />
);

const onSubmit = values => {
    debugger;
    submitEmail('/freeTrial', values);
    console.log("put request sent for trial ")
    alert(JSON.stringify(values))
};

const required = v => {
    console.log("v....: ", v);
    if (!v || v === ''){
        return 'This field is required';
    }

    return undefined;
};


const SendEmailInfo = () =>  (
    <Form
        onSubmit={onSubmit}
        render={({handleSubmit, invalid}) => (
            <div>
                <h2>Request 30 days Free Trial</h2>
                <form  onSubmit={handleSubmit} >
                    <Field name="customer-id"
                           component={renderInput}
                           validate={required} />
                    <button type="submit" disabled={invalid} > Submit </button>
                </form>
            </div>
        )}
    />
);

const mapDispatchToProps = dispatch => {
    return bindActionCreators(
        { submitEmail }, dispatch);
};


export default connect(null, mapDispatchToProps)(SendEmailInfo)

Отправить письмо 

import { API_URL } from '../global';

export const makeAPIRequestToSendEmail = () => {
    return {
        type: 'MAKE_API_REQUEST_TO_SEND_EMAIL'
    };
};

export const clearEmailDetails = () => {
    return {
        type: 'CLEAR_EMAIL_DETAILS'
    };
};

export const receivedResponse = () => {
    return {
        type: 'RECEIVED_RESPONSE'
    };
};

export const sentEmail = data => {
    return {
        type: 'SENT_EMAIL',
        data
    };
};

export const errorEmail = () => {
    return {
        type: 'ERROR_EMAIL'
    };
};

export function submitEmail(url, data) {
    return dispatch => {
        dispatch(makeAPIRequestToSendEmail());
        dispatch(clearEmailDetails());
        return fetch(API_URL + url, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ data })
        })
            .then(response => response.json())
            .then(emailMessage => {
                dispatch(receivedResponse());
                console.log(emailMessage);
                dispatch(sentEmail(emailMessage));
            })
            .catch(err => dispatch(errorEmail()));
    }
}

Я хотел бы использовать действия и редукторыи просто пусть он позаботится обо всех запросах API. Пожалуйста, дайте мне знать, если у вас есть предложения по решению этой загадки.

1 Ответ

1 голос
/ 10 октября 2019

Все, что касается Заключительной формы React, так это то, что вы даете ей onSubmit, которая возвращает Обещание. Я написал библиотеку для этого с действиями Redux, которые могут соответствовать вашим конкретным потребностям?

React Redux Promise Listener

...