I am trying to dispatch an async action using redux toolkit and react. My action and my slice are like that :

export const newRegister = createAsyncThunk('users', async (user: User) => {
    const response = await AuthService.register(
        user.username,
        user.email,
        user.password
    )
    return response.data
})

const registerSlice = createSlice({
    name: 'register',
    initialState: {
        username: '',
        password: '',
        isLogin: false,
    },
    reducers: {
        register: (state, action) => {
            state.username = action.payload.username
            state.password = action.payload.password
            state.isLogin = true
        },
    },
    extraReducers: (builder) => {
        builder.addCase(newRegister.fulfilled, (state, action) => {
            state.username = action.payload.username
            state.password = action.payload.password
            state.isLogin = true
        })
    },
})

My store looks like that :

import { combineReducers, configureStore } from '@reduxjs/toolkit'
import { cartReducer, authReducer, registerReducer } from './slices'
import { useDispatch } from 'react-redux'
import storage from 'redux-persist/lib/storage'
import {
    persistStore,
    persistReducer,
    FLUSH,
    REHYDRATE,
    PAUSE,
    PERSIST,
    PURGE,
    REGISTER,
} from 'redux-persist'

const persistConfig = {
    key: 'root',
    storage,
}

const reducers = combineReducers({
    auth: authReducer,
    cart: cartReducer,
    register: registerReducer,
})

const persistedReducer = persistReducer(persistConfig, reducers)

export const store = configureStore({
    reducer: persistedReducer,
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
            serializableCheck: {
                ignoredActions: [
                    FLUSH,
                    REHYDRATE,
                    PAUSE,
                    PERSIST,
                    PURGE,
                    REGISTER,
                ],
            },
        }),
})

export type AppDispatch = typeof store.dispatch
export const useAppDispatch: () => AppDispatch = useDispatch

export const persistor = persistStore(store)

I try to call my action using dispatch() in my register component like that (I use formik for fields checking) :

const formik = useFormik({
        initialValues: {
            username: '',
            email: '',
            password: '',
        },
        validationSchema: validationSchema,
        onSubmit: () => {
            const user: User = {
                username: formik.values.username,
                email: formik.values.email,
                password: formik.values.password,
            }
            dispatch(newRegister(user))
        },
    })

The problem is that I keep having this error on my newRegister() action : "Argument of type 'AsyncThunkAction<any, User, {}>' is not assignable to parameter of type 'AnyAction'."

CodePudding user response：

you may need to define action types. Try something like this:

 import { PayloadAction } from '@reduxjs/toolkit';
    
    const registerSlice = createSlice({
        name: 'register',
        initialState: {
            username: '',
            password: '',
            isLogin: false,
        },
        reducers: {
            register: (state, action:PayloadAction<string | boolean>) => {
                state.username = action.payload.username
                state.password = action.payload.password
                state.isLogin = true
            },
        },
        extraReducers: (builder) => {
            builder.addCase(newRegister.fulfilled, (state, action:PayloadAction<string | boolean>) => {
                state.username = action.payload.username
                state.password = action.payload.password
                state.isLogin = true
            })
        },
    })

CodePudding user response：

The only thing that does not seem right is this line:

export const useAppDispatch: () => AppDispatch = useDispatch

it should be

export const useAppDispatch = () => useDispatch<AppDispatch>()