Using Redux Hooks in a Formik onSubmit

Question

i am currently trying to solve a homework for my university.

We should integrate Action Creators and Reducers to our react project.

The project is about having a Money Transaction Form with a List which shows all money transactions.

We built the form with help of formik, my code looks like this.

const formik = useFormik({
initialValues: { ownwho: '', username: '', amount: '' },
validationSchema: validationSchema,
onSubmit: values => dispatch(createMoneyTransaction(1,2,3))
})

The Form is a normal form, with a handleSubmit and handleChange

<form className={styles.moneytransaction_form} onSubmit={formik.handleSubmit}>
  <div className={styles.radio_wrapper}>
    <div>
      <label>I owe somebody</label>
      <Input type='radio' name='ownwho' value='IOweYou' onChange={formik.handleChange} />
    </div>
    <div>
      <label>Somebody owes me</label>
      <Input type='radio' name='ownwho' value='YouOweMe' onChange={formik.handleChange} />
    </div>
  </div>

My Dispatch is currently looking like that

const dispatch = useDispatch()

Action Creator

Image of the Action Creator for the Post Method

Now i have the following problem.

When using the dispatch hook inside of the formik onsubmit handle i get this error by react

Image of the Error

I do think it is because the hook does have to be in a functional component and formik may not be one.

I would really be happy if someone can help me out on this one, because i dont fully understand what the problem about the usage of this hook with formik is.

Wrap your form in a redux form so you can use the form store to dispatch any form action? — Danys Chalifour, Apr 10 '21 at 19:36
@DanysChalifour we do need to use formik, so we cant just wrap a redux form around it — Zerebratox, Apr 10 '21 at 19:40
see for ref ;https://stackoverflow.com/questions/47420358/how-to-connect-simple-formik-form-with-redux-store-and-dispatch-an-action Are you sure your store is loaded? — Danys Chalifour, Apr 10 '21 at 20:26

score 0 · Accepted Answer · edited Jul 01 '21 at 04:33

0

You are not following the rule of hooks (in this case, useDispatch() is the hook). Either because you are not calling the hook in the right place or because you might be calling it conditionally or from something that is not a functional component.

edited Jul 01 '21 at 04:33

double-beep

5,031
17
33
41

answered Jun 30 '21 at 08:29

Zak

16
1

Using Redux Hooks in a Formik onSubmit

1 Answers1