Javascript 在redux reducer和actions中编写相同的函数行为

我想问一下如何使用redux还原程序和操作重写相同的函数行为

有一个我需要实现的函数来redux

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';

还有我的action.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>
    );
  }
}

导出默认类App扩展React.Component{
render（）{
const store=createStore（exchangeCurriences）；
返回(
);
}
}

当我将handleFirstSelect（来自mapDispatchToProps）传递到我的组件函数prop中时，它不像以前那样工作。有人知道哪里出了错吗？如果您能提供任何帮助，我们将不胜感激。

这一行看起来很奇怪：

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

您将state.base初始化为'EUR'一个字符串，而不是像上面的reducer代码中那样的数组

从原始代码中，您只需将state.base设置为action.itemValue，该值已在action handleFirstSelect中设置

因此，我希望您的reducer代码如下所示：

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;
  }
    };

这一行看起来很奇怪：

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

您将state.base初始化为'EUR'一个字符串，而不是像上面的reducer代码中那样的数组

从原始代码中，您只需将state.base设置为action.itemValue，该值已在action handleFirstSelect中设置

因此，我希望您的reducer代码如下所示：

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;
  }
    };

…状态，
[action.itemValue]：state.base[action.itemValue]，
…state，
[action.itemValue]：state.base[action.itemValue]，它仍然不起作用：（.谢谢你的回答。因此，在你的新代码中，你不再使用setState，但是，你的setState有一个回调this.calculate，你不需要在别处调用此功能吗？例如，在返回之前在action handleFirstSelect中执行相同的逻辑…嗯，此函数只是给了我一些控制台。log（）信息您在哪里检查结果？结果应该在props对象中，例如props.baseCurrencyI fiiguret out。效果很好。谢谢Michael！它仍然不起作用：（.谢谢你的回答。因此，在你的新代码中，你不再使用setState，但是，你的setState有一个回调this.calculate，你不需要在别处调用此功能吗？例如，在返回之前在action handleFirstSelect中执行相同的逻辑…嗯，此函数只是给了我一些控制台。log（）信息您在哪里检查结果？结果应该在props对象中，例如props.baseCurrencyI fiiguret out。工作正常。谢谢Michael！