Напишите такое же поведение функции в редукторе и действиях

Question

Я хочу спросить, как переписать такое же поведение функции, используя редукторные редукторы и действия.

Есть функция, которую мне нужно реализовать для редукции

handleSelect = itemValue => {
    this.setState(
      {
        ...this.state,
        base: itemValue,
        result: null,
      },
      this.calculate,
    );
  };

Первый шаг, что я делал создания файлов actionTypes. js и action. js. Код ниже actionTypes. js

export const HANDLE_FIRST_SELECT = 'HANDLE_FIRST_SELECT';

и мое действие. js

import * as actionTypes from './actionTypes';

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

На следующем шаге я создал редуктор, похожий на этот

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: '',
};

const exchangeCurriences = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.HANDLE_FIRST_SELECT:
      return {
        ...state,
        [action.itemValue]: state.base[action.itemValue],
        result: null,
      };
    default:
      return state;
  }
};

export default exchangeCurriences

далее я создал функции mapStateToProps и mapDispatchToProps в моем файле контейнера следующим образом

const mapStateToProps = state => {
  return {
    baseCurrency: state.base,
    amountPrice: state.amount,
    convertToPrice: state.convertTo,
    result: state.result,
    actualDate: state.date,
  };
};

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

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

И, конечно, у меня есть провайдер с пропом магазина

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

Когда я передаю handleFirstSelect (из mapDispatchToProps) в моем компоненте функции Проп это не работает, как раньше. Кто-нибудь знает, где ошибка? Любая помощь с решением будет признателен.

Answer 1

Эта строка выглядит странно:

[action.itemValue]: state.base[action.itemValue]

Вы инициализировали state.base для 'EUR' единственной строки, а не для массива, как в приведенном выше коде редуктора.

Из вашего Исходный код, который вы просто хотите установить для state.base action.itemValue, который был установлен в действии handleFirstSelect

Поэтому я бы ожидал, что ваш код редуктора будет выглядеть так:

const exchangeCurriences = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.HANDLE_FIRST_SELECT:
      return {
        ...state,
        base: action.itemValue, // correct this line
        result: null,
      };
    default:
      return state;
  }
    };

Answer 2

    ...state,
    [action.itemValue]: state.base[action.itemValue], <--- oops previous type here?
    result: null,