J
J
jenya77712021-11-07 16:36:50
React
jenya7771, 2021-11-07 16:36:50

Why in React, Redux in mapDispatchToProps I can’t specify my action type in generic?

Hello, please tell me why this error occurs:

TS2769: No overload matches this call.   The last overload gave the following error.     Argument of type 'Dispatch<UserActions>' is not assignable to parameter of type 'Dispatch<AnyAction>'.       Type 'AnyAction' is not assignable to type 'UserActions'.         Property 'payload' is missing in type 'AnyAction' but required in type 'UserLoginErrorAction'.


Here is the code in more detail:
6187d605af6ad809170712.png

Everything related to actions:
import { Action } from 'redux';

export enum UserTypes {
    USER_LOGIN_REQUEST = 'USER_LOGIN_REQUEST',
    USER_LOGIN_SUCCESS = 'USER_LOGIN_SUCCESS',
    USER_LOGIN_ERROR = 'USER_LOGIN_ERROR',
}

export interface UserState {
    error: any,
    loading: boolean,
    currentUser: {
        id: string,
        email: string,
        role: string,
        balance: number
    } | undefined
}

export interface UserLoginRequestPayload {
    username: string,
    password: string
}

export interface UserLoginSuccessPayload {
    id: string,
    email: string,
    role: string,
    balance: number
}

export interface UserLoginRequestAction extends Action {
    type: UserTypes.USER_LOGIN_REQUEST,
    payload: UserLoginRequestPayload
}

export interface UserLoginSuccessAction extends Action {
    type: UserTypes.USER_LOGIN_SUCCESS,
    payload: UserLoginSuccessPayload
}

export interface UserLoginErrorAction extends Action  {
    type: UserTypes.USER_LOGIN_ERROR
    payload: any
}

export type UserActions = UserLoginRequestAction | UserLoginSuccessAction | UserLoginErrorAction


All about actionCreators:
export function loginUserRequestActionCreator(payload: UserLoginRequestPayload): UserLoginRequestAction {
    return {
        type: UserTypes.USER_LOGIN_REQUEST,
        payload
    }
}

export function loginUserSuccessActionCreator(payload: UserLoginSuccessPayload): UserLoginSuccessAction {
    return {
        type: UserTypes.USER_LOGIN_SUCCESS,
        payload
    }
}

export function loginUserErrorActionCreator(payload: any): UserLoginErrorAction {
    return {
        type: UserTypes.USER_LOGIN_ERROR,
        payload: payload
    }
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question