NaN проблема с реактивным-редуксом и реактивным

Question

Я пытаюсь получить данные из API о валютах, и я получаю ошибку о NaN. Я console.log(this.props) Вот оно:

Есть то, что я уже сделал. В моих actionTypes. js

export const FETCH_DATA_BEGIN = 'FETCH_DATA_BEGIN';
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
export const FETCH_DATA_FAIL = 'FETCH_DATA_FAIL';

, а также в моем действии. js

export const fetchData = () => {
  return dispatch => {
    fetch(`https://api.exchangeratesapi.io/latest?base=${this.props.base}`)
      .then(res => res.json())
      .then(
        data => dispatch(fetchDataSuccess(data)),
        e => dispatch(fetchDataFail(e)),
      );
  };
};

далее - мои initialState в моем редукторе и case actionTypes.FETCH_DATA_SUCCESS

const initialState = {
  currencies: ['USD', 'AUD', 'SGD', 'PHP', 'EUR', 'PLN', 'GBP'],
  base: 'EUR',
  amount: '',
  convertTo: 'PLN',
  result: '',
  date: '',
  error: null,
  loading: false,
  rates: '',
};

case actionTypes.FETCH_DATA_SUCCESS:
      const date = action.data.date;
      const rates = action.data.rates;
      return {
        ...state,
        date,
        rates,
        loading: false,
      };

далее я использую mapStateToProps и mapDispatchToProps в моем компоненте следующим образом:

const mapStateToProps = (state, ownProps) => {
  return {
    base: state.base,
    amount: state.amount,
    convertTo: state.convertTo,
    result: (state.rates[ownProps.convertTo] * ownProps.amount).toFixed(4),
    date: state.date,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    handleFirstSelect: itemValue =>
      dispatch(exchangeCurriencesActions.handleFirstSelect(itemValue)),
    handleSecondSelect: itemValue =>
      dispatch(exchangeCurriencesActions.handleSecondSelect(itemValue)),
    handleInput: text => dispatch(exchangeCurriencesActions.handleInput(text)),
    fetchData: () => dispatch(exchangeCurriencesActions.fetchData()),
  };
};

И моя функция componendDidMount() выглядит так

componentDidMount() {
    if (this.props.amount === isNaN) {
      return;
    } else {
      try {
        this.props.fetchData();
      } catch (e) {
        console.log('error', e);
      }
    }
  }

И, например, я использую новые реквизиты, подобные этому

 <TextInputComponent
              editable={false}
              value={`${
                this.props.amount === ''
                  ? '0'
                  : this.props.result === null
                  ? 'Calculating...'
                  : this.props.result
              }`}
            />

и, конечно, я добавил промежуточное ПО

export default class App extends React.Component {
  render() {
    const store = createStore(exchangeCurrencies, applyMiddleware(thunk));
    return (
      <Provider store={store}>
        <NavigationContainer>
          <StatusBar hidden={true} />
          <MainTabNavigator />
        </NavigationContainer>
      </Provider>
    );
  }
}

Я добавляю картинку, как она выглядит в приложении

Где ошибка? Я также могу добавить больше кода, если это необходимо. Пожалуйста, помогите кому-нибудь!: D