使用 React Final Form 的 Redux 调度答案

【问题标题】：Redux dispatch with React Final Form使用 React Final Form 的 Redux 调度
【发布时间】：2020-11-18 22:44:56
【问题描述】：

我试图理解为什么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 操作

【问题讨论】：

标签： reactjs redux react-final-form

【解决方案1】：

您只需从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 }

【讨论】：