Question

25

Typescript: How to type the Dispatch in Redux

rated 0 times [ 27] [ 2] / answers: 1 / hits: 53937 / 5 Years ago, sat, february 23, 2019, 12:00:00

For example I want to remove the dispatch: any here:

export const fetchAllAssets = () => (dispatch: any) => {

  dispatch(actionGetAllAssets);

  return fetchAll([getPrices(), getAvailableSupply()]).then((responses) =>

    dispatch(actionSetAllAssets(formatAssets(responses))));

}

There are 2 actions I dispatch above, actionsGetAllAssets and actionsSetAllassets.

Here are the interfaces and actionCreators for both:

// Interfaces

interface IActions {

  GET_ALL_ASSETS: string;

  SET_ALL_ASSETS: string;

  GET_MARKET_PRICES: string;

  SET_MARKET_PRICES: string;

  ADD_COIN_PORTFOLIO: string;

  ADD_COINS_PORTFOLIO: string;

  UPDATE_COIN_PORTFOLIO: string;

  REMOVE_COIN_PORTFOLIO: string;

} 



interface IGetAllAssets {

  type: IActions['GET_ALL_ASSETS'];

  loading: boolean;

}



interface ISetAllAssets {

  type: IActions['SET_ALL_ASSETS'];

  assets: IAsset[];

  loading: boolean;

}



// ACTION CREATORS

const actionGetAllAssets = () => ({

  type: Actions.GET_ALL_ASSETS,

  loading: true

});



const actionSetAllAssets = (data: any) => ({

  type: Actions.SET_ALL_ASSETS,

  assets: data,

  loading: false

});

So then I tried the following:

export const fetchAllAssets = () => (dispatch: IGetAllAssets | ISetAllAssets) => {

  console.log('fetchAllAssets', dispatch);

  dispatch(actionGetAllAssets);

  return fetchAll([getPrices(), getAvailableSupply()]).then((responses) =>

    dispatch(actionSetAllAssets(formatAssets(responses))));

}

However it produces this Typescript error:

Cannot invoke an expression whose type lacks a call signature. Type 'IGetAllAssets | ISetAllAssets' has no compatible call signatures.ts(2349)

Thoughts? Or is there a different way to type a dispatch event?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jakobarmandr

Add To Favorites

Follow

Total Points: 363

Total Questions: 103

Total Answers: 87

Location: Romania

Member since Mon, Jun 6, 2022

2 Years ago

answered 5 Years ago andreguym · Accepted Answer

I got a bit further!

Dispatch is an event function, so got this to work:

interface IAllAssets {

  type: IActions['GET_ALL_ASSETS'];

  assets?: IAsset[];

  loading: boolean;

}



// ACTIONS

// Fetch assets from Nomics API V1.

export const fetchAllAssets = () => (dispatch: (arg: IAllAssets) => (IAllAssets)) =>

{

   dispatch(actionGetAllAssets());

   return fetchAll([getPrices(), getAvailableSupply()]).then((responses) =>

       dispatch(actionSetAllAssets(formatAssets(responses))));

}

However I'd still like to create a dispatch type, something like:

interface IAllAssetsDispatch {

  dispatch: (arg: IAllAssets) => (IAllAssets)

}



export const fetchAllAssets = () => (dispatch: IAllAssetsDispatch) => {

But this produces the same lacks a call signature error.

GOT IT!

Forgot about type that's what I needed to use instead of interface for functions:

type DispatchAllAssets = (arg: IAllAssets) => (IAllAssets);



type DispatchMarketPrices = (arg: ISetMarket) => (ISetMarket);



type DispatchAddCoin = (arg: ICoinPortfolio) => (ICoinPortfolio);



type DispatchAddCoins = (arg: ICoinsPortfolio) => (ICoinsPortfolio);



// ACTIONS

// Fetch assets from Nomics API V1.

export const fetchAllAssets = () => (dispatch: DispatchAllAssets) => {

  dispatch(actionGetAllAssets());

  return fetchAll([getPrices(), getAvailableSupply()]).then((responses) =>

    dispatch(actionSetAllAssets(formatAssets(responses))));

}



// Fetch USD, USDC & USDT markets to filter out Exchange List.

export const fetchMarketPrices = (asset: string) => (dispatch: DispatchMarketPrices) => {

  dispatch(actionGetMarketPrices);

  return getMarkets().then((res) => {

    if (res && res.marketUSD && res.marketUSDC && res.marketUSDT) {

      const exchangesForAsset = combineExchangeData(asset, res);

      return dispatch(actionSetMarketPrices(exchangesForAsset));

    }

    else {

      return dispatch(actionSetMarketPrices([]));

    }

  });

}