So I have an async thunk function in redux:
export const fetchItem = createAsyncThunk('item/fetchItem', async (id: number) => { const res = await fetch(`${apiUrl}/${id}`) .then(res => res.json()) return res })
And here is my fetch function in react, it fetches the item by the html id of the event target (an tag):
const handleFetch = (e: React.MouseEvent<HTMLAnchorElement>) => { useAppDispatch(fetchItem(e.target.id)) }
The error is in the fetchItem and it says: Expected 0 arguments, but got 1. I even tried just using:
useAppDispatch(fetchItem(1))
And got the same error.
useAppDispatch looks like this:
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"; import type { RootState, AppDispatch} from "./redux/store"; export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector() export const useAppDispatch = () => useDispatch<AppDispatch>()
Advertisement
Answer
useAppDispatch
is a hook and can be used only directly inside component’s bodyuseAppDispatch
takes 0 arguments, but you pass 1useAppDispatch
returns adispatch
function that you wanted to use
// inside your component const dispatch = useAppDispatch() const handleFetch = (e: React.MouseEvent<HTMLAnchorElement>) => { dispatch(fetchItem(e.target.id)) }