Проблема с отображением данных от действий и редукторов - реагирует на родной редукс

Question

Я почти сделал свое заявление, но в данный момент у меня проблема с действиями и редуктором. Поэтому мое приложение позволяет проверять валюты и их цены. Когда я выбираю предмет из компонента выбора, цена не меняется. Это все время по умолчанию EUR -> PLN. Вот пример использования

Сначала пользователь может записать цену в евро, а затем она конвертируется в PLN -> результат удовлетворительный с этой конфигурацией. Но если я изменю конфигурацию на USD -> цена PLN не изменится :(.

Другая проблема заключается в том, когда я выбираю значение для обоих сборщиков " EUR "у меня есть NaN

'1 EUR эквивалентно NaN EUR'

Также я замечаю, что когда я меняю нижний пункт выбора, тогда цена конвертируется. Так что будет ясно: если это

EUR -> PLN = нормально

USD -> PLN = цена из предыдущей конфигурации (что бы это ни было)

USD -> ALL = работает

так определенно я Я думаю, что есть какая-то проблема с верхним компонентом Picker. Вот мой код, который я использую для обработки.

action. js

export const handleFirstSelect = itemValue => {
  return {
    type: actionTypes.HANDLE_FIRST_SELECT,
    itemValue: itemValue,
  };
};

reducer. js

import React from 'react';
import * as actionTypes from '../actions/actionTypes';

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

const exchangeCurrencies = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.HANDLE_FIRST_SELECT:
      return {
        ...state,
        base: action.itemValue,
      };
    case actionTypes.HANDLE_SECOND_SELECT:
      return {
        ...state,
        convertTo: action.itemValue,
      };
    case actionTypes.HANDLE_INPUT:
      return {
        ...state,
        amount: action.text,
        date: state.date,
      };
    case actionTypes.HANDLE_SWAP:
      return {
        ...state,
        convertTo: state.base,
        base: state.convertTo,
        e: action.e,
      };
    case actionTypes.FETCH_DATA_BEGIN:
      return {
        ...state,
        loading: true,
        error: null,
      };
    case actionTypes.FETCH_DATA_SUCCESS:
      return {
        ...state,
        result: action.data.rates,
        date: action.data.date,
      };
    case actionTypes.FETCH_DATA_FAIL:
      return {
        ...state,
        loading: false,
        error: action.error,
      };
    default:
      return state;
  }
};

export default exchangeCurrencies;

Кто-нибудь знает, что я делаю неправильно? Спасибо за все ответы. Конечно, я могу добавить больше кода, если это необходимо.

РЕДАКТИРОВАТЬ: также добавив код компонента

class HomeContentContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      base: 'EUR',
      amount: '',
      convertTo: 'PLN',
      result: '',
      date: '',
    };
  }

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

  render() {
    return (
      <ImageBackground
        style={styles.imageBackground}
        source={require('../../assets/images/2.jpeg')}>
        <View style={styles.container}>
          <View style={styles.inputsContainer}>
            <TextInputComponent
              value={this.props.amount}
              onChangeText={this.props.handleInput}
            />
            <PickerComponent
              selectedValue={this.props.base}
              onValueChange={this.props.handleFirstSelect}
            />
          </View>
          <View style={styles.inputsContainer}>
            <TextInputComponent
              editable={false}
              value={`${
                this.props.amount === ''
                  ? '0'
                  : this.props.result === null
                  ? 'Calculating...'
                  : this.props.result
              }`}
            />
            <PickerComponent
              selectedValue={this.props.convertTo}
              onValueChange={this.props.handleSecondSelect}
            />
          </View>
        </View>
        <ResultText
          equevalentText={`${this.props.amount} ${
            this.props.base
          } is equevalent to `}
          amountText={`${
            this.props.amount === ''
              ? '0'
              : this.props.result === null
              ? 'Calculating...'
              : this.props.result
          }${' '}${this.props.convertTo}`}
          dateText={`As of ${
            this.props.amount === ''
              ? ''
              : this.props.date === null
              ? ''
              : this.props.date
          }`}
        />
        <CustomButton onClick={this.props.handleSwap} buttonTitle="SWAP" />
        <BottomSignature />
      </ImageBackground>
    );
  }
}

const mapStateToProps = state => {
  return {
    base: state.base,
    amount: state.amount,
    convertTo: state.convertTo,
    result: (state.result[state.convertTo] * state.amount).toFixed(2),
    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()),
    handleSwap: e => dispatch(exchangeCurriencesActions.handleSwap(e)),
  };
};

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