使用 React Final Form 进行 Redux 调度
Redux dispatch with React Final Form
我试图理解为什么 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 }
我试图理解为什么 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 }