这个err是什么意思？ '(dispatch: Dispatch<IAuthType>) => Promise<void>' 类型的参数不可分配给 'AnyAction' 类型的参数

Question

我遇到了同样的问题（低于link）。

我不能很好地解释那个问题...所以带来了 link

Argument of type ()=> void is not assignable to parameter of type 'AnyAction'

如果您需要任何额外信息，请告诉我

这是登录组件

import { Dispatch, useState } from "react";
import { useDispatch } from "react-redux";
import { InputChange, FormSubmit } from "../../utils/TypeScript";
import { login } from "../../redux/action/authAction";

function LoginPass() {
  
  const initialState = { account: "", password: "" };
  const [userLogin, setUserLogin] = useState(initialState);

  const { account, password } = userLogin;

  const [typePass, setTypePass] = useState(false);

  const dispatch = useDispatch();

  const handleChangeInput = (e: InputChange) => {
    const { value, name } = e.target;
    setUserLogin({ ...userLogin, [name]: value });
  };

  const handleSubmit = (e: FormSubmit) => {
    e.preventDefault();
    dispatch(login(userLogin));
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group mb-3">
     
        <label htmlFor="account" className="form-label">
          Email / Phone number
        </label>
        <input
          type="text"
          className="form-control"
          id="account"
          name="account"
          value={account}
          onChange={handleChangeInput}
        />
      </div>

      <div className="form-group mb-3">
        <label htmlFor="password" className="form-label">
          Password
        </label>

        <div className="pass">
          <input
           
            type={typePass ? "text" : "password"}
            className="form-control"
            id="password"
            name="password"
            value={password}
            onChange={handleChangeInput}
          />

      
          <small onClick={() => setTypePass(!typePass)}>
      
            {typePass ? "Hide" : "Show"}
          </small>
        </div>
      </div>

      <button
        type="submit"
        className="btn btn-dark w-100 mt-4"
        disabled={account && password ? false : true}
      >
        Login
      </button>
    </form>
  );
}

export default LoginPass;

enter image description here

这是我的authAction.ts

import { Dispatch } from "redux";
import { AUTH, IAuthType } from "../types/authType";
import { IUserLogin } from "../../utils/TypeScript";
import { postAPI } from "../../utils/FetchData";

export const login =
  (userLogin: IUserLogin) => async (dispatch: Dispatch<IAuthType>) => {
    console.log(userLogin);
    try {
      const res = await postAPI("login", userLogin);
      console.log(res);

      dispatch({
        type: AUTH,
        payload: {
          token: res.data.access_token,
          user: res.data.user,
        },
      });
    } catch (error: any) {
      console.log(error.response.data.msg);
    }
  };

Answer 1

问题是 const dispatch = useDispatch(); 只知道来自 redux 核心的基本 Dispatch 类型。 Dispatch 类型不知道 thunk 的存在——它只接受普通的动作对象。因此，当您尝试发送 thunk 时，它（正确地）出错了。

解决方法是遵循我们的“与 TS 一起使用”指南，从 store.dispatch 正确推断出 AppDispatch 类型，然后定义 pre-typed 包含 thunk 类型的挂钩:

https://redux.js.org/tutorials/typescript-quick-start

这个err是什么意思？ '(dispatch: Dispatch<IAuthType>) => Promise<void>' 类型的参数不可分配给 'AnyAction' 类型的参数

What is this err means? Argument of type '(dispatch: Dispatch<IAuthType>) => Promise<void>' is not assignable to parameter of type 'AnyAction'

typescript

reactjs

redux