reactjs - 使用 React Final Form 的 Redux 调度
问题描述
我试图了解为什么dispatch
在我的操作中无法使用无济于事。这是我尝试过的。
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, Form } from 'react-final-form';
import { createProfile } from '../../actions/actions_members';
const onSubmit = async (values) => {
createProfile(values)
}
const Signup = () => (
<Form
onSubmit={onSubmit}
render={({ handleSubmit, submitting, pristine, values }) => (
<form onSubmit={handleSubmit} >
<label>Email:</label>
<Field type='text' className='input' component="input" type="text" name='email'/>
<label>Password:</label>
<Field className='input' component="input" type="password" name='password' />
{/*<label>Confirm password:</label>
<input type='password' className='input' name='password' {...password} />*/}
<button type="submit" disabled={submitting || pristine}>
Submit
</button>
</form>
)}
/>
)
export default connect()(Signup)
这是我的actions_members
文件
import * as C from './actions_const.js'
import { post, get } from '../helpers/apiConnection.js'
const createProfile = (value, dispatch) => {
var data = {
ep: "EP_SIGNUP",
payload : {
email: value.email,
password: value.password
}
}
post(data).then((result)=>dispatch({type:C.MEMBER_CREATE}));
}
export { createProfile }
我不知道如何传递dispatch
给我的createProfile
行动
解决方案
你只需要从onSubmit
函数中传递它。
const dispatch = useDispatch();
const onSubmit = async (values) => {
createProfile(values, dispatch)
}
另一种选择是将商店导入您的 action_members 文件并使用 store.dispatch,这相当于同一件事。
import * as C from './actions_const.js'
import { post, get } from '../helpers/apiConnection.js'
import store from '../whereverReduxStoreIsSetup.js';
const createProfile = (value) => {
var data = {
ep: "EP_SIGNUP",
payload : {
email: value.email,
password: value.password
}
}
post(data).then((result)=>store.dispatch({type:C.MEMBER_CREATE}));
}
export { createProfile }
推荐阅读
- rust - 将 Pool 设置为结构类型会导致错误
- reactjs - 反应:在数组中的引导轮播项目中显示无序列表
- azure - Windows 上的 docker 容器没有给出任何响应
- sql - 具有空值的键集分页
- math - 简化布尔表达式 F=(Not B and Not C) or (B and Not C) or (Not A and C)
- python - 在 Pandas 中加快对 csv 文件的条件行读取?
- visual-studio-code - Visual Studio 执行单元 - 正在执行哪个单元?
- bash - 为什么我的二进制搜索脚本在输入后没有继续执行?
- sql - 在 T-SQL 检查约束中,如何允许特定模式或空字符串
- azure-resource-manager - 使用 ARM 模板创建 azure 容器注册表 Timer 任务?