I want to dispatch async thunk action with arguments. but I got an error

TS2345: Argument of type 'AsyncThunkAction<string, Ilogin, {}>' is not assignable to parameter of type 'AnyAction'.
    32 |     e.preventDefault();
    33 |     if (isEmailValid && isPasswordValid) {
  > 34 |       dispatch(login({ email: enteredEmail, password: enteredPassword }));
       |                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    35 |     }
    36 |   };
    37 |

My loginPage code is

import useInput from 'hooks/useInput';
import classNames from 'classnames/bind';
import { useDispatch } from 'react-redux';
import { login } from 'redux/authSlice';

import TextField from '../../components/UI/TextField';

import styles from './loginPage.module.scss';
import { FormEvent } from 'react';

const cx = classNames.bind(styles);

const LoginPage = () => {
  const dispatch = useDispatch();

  const {
    handleInputChange: handleEmailChange,
    handleBlur: handleEmailBlur,
    isTouched: isEmailTouched,
    isValid: isEmailValid,
    value: enteredEmail,
  } = useInput('email');
  const {
    handleInputChange: handlePasswordChange,
    handleBlur: handlePasswordBlur,
    isTouched: isPasswordTouched,
    isValid: isPasswordValid,
    value: enteredPassword,
  } = useInput('password');

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    if (isEmailValid && isPasswordValid) {
      dispatch(login({ email: enteredEmail, password: enteredPassword }));
    }
  };

and this is my slice

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { AxiosError } from 'axios';
import { Ilogin } from 'types/comminition';
import Comminition from '../apis/comminition';

interface Auth {
  token: string | undefined;
  isAuthenticated: boolean;
  status: 'success' | 'fail' | 'loading' | null;
}

const initialState: Auth = { token: undefined, isAuthenticated: false, status: null };

export const login = createAsyncThunk('authSlice/login', async (loginData: Ilogin) => {
  const response = await Comminition.login(loginData.email, loginData.password);
  return response.data.token;
});

export const authSlice = createSlice({
  name: 'authSlice',
  initialState,
  reducers: {
    logout: (state: Auth) => {
      state.isAuthenticated = false;
      state.token = undefined;
    },
  },
  extraReducers: (builder) => {
    builder.addCase(login.pending, (state) => {
      state.status = 'loading';
    });
    builder.addCase(login.fulfilled, (state, { payload }) => {
      state.status = 'success';
      state.isAuthenticated = true;
      state.token = payload;
    });
    builder.addCase(login.rejected, (state) => {
      state.status = 'fail';
      state.isAuthenticated = false;
      state.token = undefined;
    });
  },
});

export const { logout } = authSlice.actions;
export default authSlice.reducer;

and ILogin is simple interface that define email as string and password as string

I simply want to dispatch action with email and password, but I got an error..

what does error mean? and how can I solve this problem?

CodePudding user response：

Your standard dispatch type does not know that you are using the thunk middleware - please follow the setup for correctly typed hooks in the Redux Toolkit TypeScript QuickStart

You need the correctly typed hooks:

// app/hooks.ts

import { useDispatch, useSelector } from 'react-redux'
import type { TypedUseSelectorHook } from 'react-redux'
import type { RootState, AppDispatch } from './store'

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector