So I have an async thunk function in redux:
JavaScript
x
7
1
export const fetchItem = createAsyncThunk('item/fetchItem', async (id: number) => {
2
const res = await fetch(`${apiUrl}/${id}`)
3
.then(res => res.json())
4
5
return res
6
})
7
And here is my fetch function in react, it fetches the item by the html id of the event target (an tag):
JavaScript
1
4
1
const handleFetch = (e: React.MouseEvent<HTMLAnchorElement>) => {
2
useAppDispatch(fetchItem(e.target.id))
3
}
4
The error is in the fetchItem and it says: Expected 0 arguments, but got 1. I even tried just using:
JavaScript
1
2
1
useAppDispatch(fetchItem(1))
2
And got the same error.
useAppDispatch looks like this:
JavaScript
1
7
1
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
2
import type { RootState, AppDispatch} from "./redux/store";
3
4
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector()
5
6
export const useAppDispatch = () => useDispatch<AppDispatch>()
7
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
JavaScript
1
6
1
// inside your component
2
const dispatch = useAppDispatch()
3
const handleFetch = (e: React.MouseEvent<HTMLAnchorElement>) => {
4
dispatch(fetchItem(e.target.id))
5
}
6