My action which is throwing the error:

// ACTIONS
export const startGetPrices = () => (dispatch: any) => getLatest().then((res) => {
  console.log('res', res);
  const { data } = res; // <-- error highlighted data
  const { rates } = data;
  dispatch(actionGetPrices(rates));
});

In the same file I have the following interfaces:

export interface IPricesRes {
  data: IPriceData
}

export interface IPriceData {
  base: string;
  date: string;
  rates: any;
  success: boolean;
  timestamp: number;
}

And in my ponent where I'm using that interface:

import React from 'react'
import { connect } from 'react-redux'

import { startGetPrices, IPricesRes } from '../store'
import { CurrencySelector, Header, Prices, Navigation } from '../ponents'

interface IProps {
  fiatPrices: [];
  startGetPrices(): IPricesRes; // <-- the res interface
}

class FiatWallet extends React.PureComponent<IProps> {
  ponentDidMount() {
    console.log('FiatWallet ponentDidMount...');
    this.props.startGetPrices();
  }

  public render() {
    const { fiatPrices } = this.props;
    return (
      <section>
        <CurrencySelector />
        <Header />
        <Prices prices={fiatPrices} />
        <Navigation />
      </section>
    );
  }     
}

const mapDispatchToProps = (dispatch: any) => ({
  startGetPrices: () => dispatch(startGetPrices())
});

const mapStateToProps = (state: any) => ({
  fiatPrices: state.fiatPrices,
  wallets: state.fiatPrices,
  defaultCurrency: state.defaultCurrency
});

export const BoardJest = FiatWallet;

export default connect(mapStateToProps, mapDispatchToProps)(FiatWallet);

It's telling me data doesn't exist on type AxiosResponse<any> and my question is how do I type it correctly?

Where do I use IPricesRes and IPriceData?

My entire store.ts file:

import { createStore, applyMiddleware } from 'redux'
import { poseWithDevTools } from 'redux-devtools-extension'
import thunkMiddleware from 'redux-thunk'

import { getLatest } from './services/api'

export interface IinitialState {
  fiatPrices: [];
  wallets: [];
  defaultCurrency: string;
}

export interface IPricesRes {
  data: IPriceData
}

export interface IPriceData {
  base: string;
  date: string;
  rates: any;
  success: boolean;
  timestamp: number;
}

const initialState = {
  fiatPrices: [],
  wallets: [],
  defaultCurrency: ''
}

// ACTION TYPES
export const actionTypes = {
  GET_PRICES: 'GET_PRICES'
}

// REDUCER
export const reducer = (state = initialState, action: any) => {
  switch (action.type) {
    case actionTypes.GET_PRICES: {
      const { rates } = action;
      return {
        ...state,
        fiatPrices: rates
      };
    }

    default:
      return state;
  }
}

// ACTIONS CREATORS
export const actionGetPrices = (data: any) => ({
  type: actionTypes.GET_PRICES,
  assets: data
});

// ACTIONS
export const startGetPrices = () => (dispatch) => getLatest().then((res) => {
  console.log('res', res);
  const { data } = res;
  const { rates } = data;
  dispatch(actionGetPrices(rates));
});

// @ts-ignore
export function initializeStore(initialState: IinitialState = initialState) {
  return createStore(
    reducer,
    initialState,
    poseWithDevTools(applyMiddleware(thunkMiddleware))
  )
}

services/api where getLatests() is:

import axios from 'axios'

const fixerAPI = '/';
const fixerKey = '25a1ad0f5f253du7131b68cd1...';

export const getLatest = async () => {
  const fixer = axios.create({
    baseURL: fixerAPI,
    params: {
      // base: 'USD',
      access_key: fixerKey
    }
  });

  try {
    const prices = await fixer.get('latest');
    return prices;
  } catch (err) {
    console.error(err);
  }
}

My action which is throwing the error:

// ACTIONS
export const startGetPrices = () => (dispatch: any) => getLatest().then((res) => {
  console.log('res', res);
  const { data } = res; // <-- error highlighted data
  const { rates } = data;
  dispatch(actionGetPrices(rates));
});

In the same file I have the following interfaces:

export interface IPricesRes {
  data: IPriceData
}

export interface IPriceData {
  base: string;
  date: string;
  rates: any;
  success: boolean;
  timestamp: number;
}

And in my ponent where I'm using that interface:

import React from 'react'
import { connect } from 'react-redux'

import { startGetPrices, IPricesRes } from '../store'
import { CurrencySelector, Header, Prices, Navigation } from '../ponents'

interface IProps {
  fiatPrices: [];
  startGetPrices(): IPricesRes; // <-- the res interface
}

class FiatWallet extends React.PureComponent<IProps> {
  ponentDidMount() {
    console.log('FiatWallet ponentDidMount...');
    this.props.startGetPrices();
  }

  public render() {
    const { fiatPrices } = this.props;
    return (
      <section>
        <CurrencySelector />
        <Header />
        <Prices prices={fiatPrices} />
        <Navigation />
      </section>
    );
  }     
}

const mapDispatchToProps = (dispatch: any) => ({
  startGetPrices: () => dispatch(startGetPrices())
});

const mapStateToProps = (state: any) => ({
  fiatPrices: state.fiatPrices,
  wallets: state.fiatPrices,
  defaultCurrency: state.defaultCurrency
});

export const BoardJest = FiatWallet;

export default connect(mapStateToProps, mapDispatchToProps)(FiatWallet);

It's telling me data doesn't exist on type AxiosResponse<any> and my question is how do I type it correctly?

Where do I use IPricesRes and IPriceData?

My entire store.ts file:

import { createStore, applyMiddleware } from 'redux'
import { poseWithDevTools } from 'redux-devtools-extension'
import thunkMiddleware from 'redux-thunk'

import { getLatest } from './services/api'

export interface IinitialState {
  fiatPrices: [];
  wallets: [];
  defaultCurrency: string;
}

export interface IPricesRes {
  data: IPriceData
}

export interface IPriceData {
  base: string;
  date: string;
  rates: any;
  success: boolean;
  timestamp: number;
}

const initialState = {
  fiatPrices: [],
  wallets: [],
  defaultCurrency: ''
}

// ACTION TYPES
export const actionTypes = {
  GET_PRICES: 'GET_PRICES'
}

// REDUCER
export const reducer = (state = initialState, action: any) => {
  switch (action.type) {
    case actionTypes.GET_PRICES: {
      const { rates } = action;
      return {
        ...state,
        fiatPrices: rates
      };
    }

    default:
      return state;
  }
}

// ACTIONS CREATORS
export const actionGetPrices = (data: any) => ({
  type: actionTypes.GET_PRICES,
  assets: data
});

// ACTIONS
export const startGetPrices = () => (dispatch) => getLatest().then((res) => {
  console.log('res', res);
  const { data } = res;
  const { rates } = data;
  dispatch(actionGetPrices(rates));
});

// @ts-ignore
export function initializeStore(initialState: IinitialState = initialState) {
  return createStore(
    reducer,
    initialState,
    poseWithDevTools(applyMiddleware(thunkMiddleware))
  )
}

services/api where getLatests() is:

import axios from 'axios'

const fixerAPI = 'http://data.fixer.io/api/';
const fixerKey = '25a1ad0f5f253du7131b68cd1...';

export const getLatest = async () => {
  const fixer = axios.create({
    baseURL: fixerAPI,
    params: {
      // base: 'USD',
      access_key: fixerKey
    }
  });

  try {
    const prices = await fixer.get('latest');
    return prices;
  } catch (err) {
    console.error(err);
  }
}

• javascript
• reactjs
• typescript
• redux

1 Answer 1

I was able to get around that error by adding in a converter.ts util, however if there is a better answer please post for points!

// ACTIONS

export const startGetPrices = () => (dispatch: any) => getLatest().then((res) => {
  const ratesArray = converters.ratesIntoArray(res);
  dispatch(actionGetPrices(ratesArray));
});

// utils/converters.ts

// Takes rates { key : value } pairs and converts into Array.
export const ratesIntoArray = ({ data: { rates } }: any) =>
  Object.keys(rates).map(data => [data, rates[data]]);