search

reduxjs / redux-toolkit

The official, opinionated, batteries-included toolset for efficient Redux development
https://redux-toolkit.js.org
MIT License
10.71k stars 1.17k forks source link

There is an error when using react-hook-form with createAsyncThunk. #1769

Closed Tojaeung closed 2 years ago

Tojaeung commented 2 years ago

Dear respectful teachers Hello, I like what you made. First, I pay my respects to you. I am developing using MERN stack. (win10, vsCode) I use a library called react-hook-form to verify user data in frontEnd. https://github.com/Tojaeung/web-socials-portpolio/blob/master/client/src/pages/Register.tsx The link above is my GitHub address where the problem occurred. path : client/src/pages/Register.tsx(27 line).

No overload matches this call. The last overload gave the following error. Argument of type 'UseFormRegisterReturn' is not assignable to parameter of type 'AnyAction | ThunkAction<unknown, { auth: AuthType; }, undefined, AnyAction>'. Property 'type' is missing in type 'UseFormRegisterReturn' but required in type 'AnyAction'.ts(2769)

What's the problem? I tried to solve this problem, but I couldn't. The login component(path : client/src/pages/Login.tsx.) did not use react-hook-form. But createAsyncThunk works well. When used with react-hook-form, createAsyncThunk does not work. Can respected teachers solve this problem? I'd appreciate it if you could help me.

markerikson commented 2 years ago

You've got two variables with the name register in this file:

import { register } from '../redux/requests/authRequests';

and:

  const {
    register,
    handleSubmit,
    formState: { errors },
    watch,
  } = useForm<IFormInputType>();

The register function from the useForm hook is the one in the current scope, so that's what the name register is referring to, and you can't dispatch that.

You'll need to make these two variables have different names somehow to avoid the name clash problem.

markerikson commented 2 years ago

Hah, it's okay :) FYI the Reactiflux Discord is a good place to ask these kinds of questions.