CODEWITHSUNDEEP
reactjsreduxreact-final-form
Ando
Ando

Reputation: 1827

Redux dispatch with React Final Form

I'm trying to understand why dispatch is not available in my actions to no avail. Here is what I tried.

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)

And here is my actions_members file

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 }

I don't know how to pass dispatch to my createProfile action

Upvotes: 0

Views: 809

Answers (1)

Zachary Haber
Zachary Haber

Reputation: 11027

You just have to pass it in from the onSubmit function.

const dispatch = useDispatch();

const onSubmit = async (values) => {
    createProfile(values, dispatch)
}

The other option would be to import the store in your action_members file and use store.dispatch, which amounts to the same thing.

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 }

Upvotes: 1

Related Questions