I have faced to same issue(below link).

I can't explan well that issue ...so brought the link

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

PLEASE let me know if you need any extra info

this is Login componenet

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

this is my 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);
    }
  };

CodePudding user response：

The problem is that const dispatch = useDispatch(); only knows about the basic Dispatch type from the redux core. That Dispatch type does not know that thunks exist - it only accepts plain action objects. So, when you try to dispatch a thunk, it (correctly) errors.

The fix is to follow our "Usage with TS" guidelines for correctly inferring an AppDispatch type from store.dispatch, and then defining pre-typed hooks that have the thunk types baked in:

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