Using Redux Hooks in a Formik onSubmit

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.

Answer

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.

Advertisement

Answer