4

I'm develop new application and I encountered an error. When I try to dispatch action, I got an error like this:

Argument of type '(dispatch: Dispatch) => Promise' is not assignable to parameter of type 'T'. Property 'type' is missing in type '(dispatch: Dispatch) => Promise' but required in type 'X'.

Has anyone encountered this problem or can help me? I'm using packages:

  • "react": "^16.7.0",
  • "react-dom": "^16.7.0",
  • "react-redux": "^6.0.0",
  • "react-router-dom": "^4.3.1",
  • "redux": "^4.0.1",
  • "redux-thunk": "^2.3.0",
  • "typescript": "^3.3.1"

This is my code:

 Container:

 import { connect } from 'react-redux';
 import { Dispatch } from 'react';
 import { loginUser, Actions } from './actions';
 import Screen, { Props } from './Screen';

 const mapDispatchToProps = (dispatch: Dispatch<Actions >): Props => ({
   login: (userName: string, password: string) => { 
 dispatch(loginUser(userName, password)); }
 });

 export const ScreenContainer = connect(mapDispatchToProps)(Screen);

 Props:

 export interface Props {
  login: (userName: string, password: string) => void;
 }


Actions:

import { Dispatch } from 'redux';

export type Actions =
  LoginRequest
  | LoginSuccess
  | LoginFailure;

  export const loginRequest = (): LoginRequest => ({
    type: types.LOGIN_REQUEST,
  });

  export const loginFailure = (): LoginFailure => ({
    type: types.LOGIN_REQUEST_FAILED,
  });

  export const loginSuccess = (): LoginSuccess=> ({
    type: types.LOGIN_REQUEST_SUCCESS,
  });

  export interface LoginRequest {
    type: types.LOGIN_REQUEST;
  }

  export interface LoginFailure {
    type: types.LOGIN_REQUEST_FAILED;
  }

 export interface LoginSuccess{
    type: types.LOGIN_REQUEST_SUCCESS;
  }

export const loginUser = (email: string, password: string) => async 
 (dispatch: Dispatch<Actions>) => {
      dispatch(loginRequest());
      try {
        dispatch(loginSuccess());
      } catch (error) {
        dispatch(loginFailure());
      }
  };
Lottek
  • 113
  • 1
  • 8

3 Answers3

5

I have a similar problem and just solved.

Reason:It is typescript complain from "@types/react".

Solution: Add code as below:

export const loginUser = (email: string, password: string) => async 
 (dispatch: Dispatch<Actions>) => {
     dispatch<any>(loginRequest());
     ....
  };

 add '<any>' into your complain place. it will passed TS compiler
Gaoxin Huang
  • 178
  • 1
  • 2
  • 9
  • nice, it solved my problem, but still.. would you know if I can assign any type other than "any"? i'm pretty new to typescript, but as soon as i understand, i should always avoid the type "any". thanks anyway! – rodolfoksveiga May 28 '21 at 09:40
0

This how I return dispatch to my redux typescript

    return (dispatch: any) => {
      getPosts()
      .then(res => 
        dispatch({ type: DispatchTypes.FETCH_POSTS, notifications: res.data })
      )
      .catch(err => 
        dispatch({ type: "ERROR",msg: "Unable to fetch data" })
      );
    };

Maybe put any will solved the error?

dispatch: any
Roel John
  • 104
  • 2
  • 7
0

You can add this:

import type {} from 'redux-thunk/extend-redux';

to the file where dispatch is used.

motto
  • 2,888
  • 2
  • 2
  • 14
Oleksandr Datsiura
  • 1