Issue
I got this error, found no relevant answer in SO
Argument of type 'AsyncThunkAction<any, void, {}>' is not assignable to parameter of type 'AnyAction'.
<MenuItem
onClick={() => {
dispatch(logout()) // <<--HERE
}}
/>
// slices/tikexAPI.ts
export const logout = createAsyncThunk(`${namespace}/logout`, async () => {
const { data } = await axios({
method: 'post',
url: 'logout',
headers: { crossDomain: true },
})
return data
})
const tikexAPI = createSlice({
name: 'authnUser',
initialState,
reducers: {
setAuthnRes(state, action: PayloadAction<AuthnRes | null>) {
state.resp = action.payload
},
},
extraReducers: (builder) => {
builder
.addCase(logout.fulfilled, (state, { payload }) => {
state.authnRes = null
})
//store.ts
import { configureStore, createSelector } from '@reduxjs/toolkit'
import tikexAPI from './tikexModule/slices/tikexAPI'
export const store = configureStore({
reducer: { tikexAPI: tikexAPI },
})
I have only two Redux package, reinstalled them, did not help.
// package.json
{
"dependencies": {
"@reduxjs/toolkit": "^1.8.1",
"react-redux": "^8.0.1",
Following this tutorial, it works for me, strange: https://www.youtube.com/watch?v=xtD4YMKWI7w
kukodajanos@Kukoda-MacBook-Pro-2 Team % yarn why redux
yarn why v1.22.18
[1/4] 🤔 Why do we have the module "redux"...?
[2/4] 🚚 Initialising dependency graph...
[3/4] 🔍 Finding dependency...
[4/4] 🚡 Calculating file sizes...
=> Found "redux@4.2.0"
info Reasons this module exists
- "@reduxjs#toolkit" depends on it
- Hoisted from "@reduxjs#toolkit#redux"
info Disk size without dependencies: "244KB"
info Disk size with unique dependencies: "1.06MB"
info Disk size with transitive dependencies: "1.11MB"
info Number of shared dependencies: 2
✨ Done in 0.29s.
kukodajanos@Kukoda-MacBook-Pro-2 Team % npm ls redux
tikex@0.1.0 /Users/kukodajanos/Workspace/Tikex/Portal/Team
└─┬ @reduxjs/toolkit@1.8.1
└── redux@4.2.0
Solution
It seems like you are not using correctly typed useAppDispatch/useAppSelector hooks, at least that is the most common source for that error. Please follow the TypeScript QuickStart.
// app/store.ts
import { configureStore } from '@reduxjs/toolkit'
// ...
export const store = configureStore({
reducer: {
posts: postsReducer,
comments: commentsReducer,
users: usersReducer,
},
})
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch
// app/hooks.ts
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'
// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
Answered By - phry
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.