Reactjs 有没有一种方法可以将Redux动作和reducer与react final form一起使用?
我有一个通过常规React类组件创建的表单,我正在尝试将其迁移到使用“React final form”。看起来一切正常,但无法找到一种使用“react final form”还原剂的方法 最初,我使用了从react到map Dispatch再到Props的bindActionCreators。所以,它过去常常调用动作文件,一切都很好。不确定是否还有其他方法可以使用相同的功能。我试图直接从onSubmit调用action,但其中未定义dispatch。我甚至找不到任何涵盖这一部分的教程 报名表格:Reactjs 有没有一种方法可以将Redux动作和reducer与react final form一起使用?,reactjs,redux,reducers,react-final-form,Reactjs,Redux,Reducers,React Final Form,我有一个通过常规React类组件创建的表单,我正在尝试将其迁移到使用“React final form”。看起来一切正常,但无法找到一种使用“react final form”还原剂的方法 最初,我使用了从react到map Dispatch再到Props的bindActionCreators。所以,它过去常常调用动作文件,一切都很好。不确定是否还有其他方法可以使用相同的功能。我试图直接从onSubmit调用action,但其中未定义dispatch。我甚至找不到任何涵盖这一部分的教程 报名表格
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)
我希望使用操作和减缩器,让它处理所有API请求。如果您有任何解决此难题的建议,请告诉我。React Final Form关心的是您向其提交一份返回承诺的onSubmit。我已经编写了一个库来使用Redux操作来实现这一点,它可能适合您的特定需求
最终形式所关心的是,你们给它一个返回承诺的onSubmit。我已经编写了一个库来使用Redux操作来实现这一点,它可能适合您的特定需求
您可能正在寻找react redux promise listener。您需要使用您自己的、redux saga、redux thunk或类似的中间件来替换submitEmail函数。下面是一个替换const-mapDispatchToProps=>{submitEmail}的工作示例;或const-mapDispatchToProps=>dispatch=>{submitEmail:…args=>dispatchsubmitEmail…args}@IstvanSzasz在发布我的回答之前没有看到你的评论。您可能正在寻找react redux promise listener。您需要使用您自己的、redux saga、redux thunk或类似的中间件来替换submitEmail函数。下面是一个替换const-mapDispatchToProps=>{submitEmail}的工作示例;或const-mapDispatchToProps=>dispatch=>{submitEmail:…args=>dispatchsubmitEmail…args}@IstvanSzasz在发布我的回答之前没有看到你的评论。嗨,埃里克,你知道noob友好的解释react-redux promise listener是如何工作的吗?我正在使用react-thunk文档,其中thunk本身发送apiCallBegag操作,然后取决于服务器的响应,它发送apiCallFailed或ApicallSuccessed?嗨,Erik,你知道noob友好的解释react-redux promise listener是如何工作的吗?我使用的是react-thunk文档,其中thunk本身调度apiCallBegag操作,然后根据服务器的响应,它调度ApicalFailed或ApicalSuccessed?
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()));
}
}