Reactjs 分配重做操作时，单击按钮不起作用

我需要一些帮助来解决我遇到的这个redux问题。这里，我有一个APP.js代码，它从一个名为duck.js的文件中调用了该操作

import {
  selectBaseCurrency,
  selectExchangeCurrency,
  selectExhangeRate,
  setBaseCurrency, //calling this action
  initialState,
} from "./configureStore/duck";

在这段代码中，我指定了mapDispatchToProp来分派操作

const mapDispatchToProps = (dispatch,ownProps)=> ({
  onClick: () => dispatch(setBaseCurrency(ownProps.baseCurrency)),
});

我还将它连接到了connect

export default connect(
  state => ({
    exchangeRate: selectExhangeRate(state),
    exchangeCurrency: selectExchangeCurrency(state),
    baseCurrency: selectBaseCurrency(state)
  }), mapDispatchToProps
)(App);

但是，由于某些原因，当我单击按钮时，该值不会根据输入进行相应更新。按钮代码如下所示：

 <button onClick={() => onClick("USD")}>
        Change Currency Value
 </button>

编辑：作为附加信息，这里是我的沙盒链接：

这是我的github链接：

---

所以这里至少有两个问题，我将尝试逐一解释，我不确定您使用的这些框架是如何相互作用的，但这里有几点至少可以解决您的问题

您的reducer正在尝试提取{baseCurrency}，但这不是您操作的属性。相反，您需要在此处提取有效负载，如下所示：{payload}，此有效负载值将包含您的baseCurrency，为了将其正确保存在reducer中，您应该返回{…state，baseCurrency:payload}

您的选择器正试图直接从state变量中读取，但此选择器在发送给CombineReducer的键下包含了您的reducer，在您的情况下，您调用了reducer reducer，因此您需要选择类似于state=>state.reducer.baseCurrency的状态

请看我为您修复了baseCurrency案例的沙箱叉：

---

只需在控制台上尝试记录您的点击事件，以确认您的点击事件是否正常，即可进行调试！你怎么知道它不起作用？您是否在redux开发工具或其他工具中没有看到它？您应该执行以下操作：在分派dispatchsetBaseCurrencyownProps.baseCurrency之前，使用控制台消息或调试器语句确认单击在mapDispatchToProps中起作用，然后，我将从那里向您的reducer添加日志消息或调试器语句，以查看操作是否在那里进行。如果看不到更多的代码，就很难知道，但您发布的代码对我来说似乎没有任何危险信号，因此它可能在其他地方，如您的存储配置。我将尝试先调试，看看是否有帮助，这是我的git链接：我至少可以确认按钮正在调用console.log，但没有触发调度。如果我能给你星星，我会给你星星。非常感谢您的指导

import React, { useEffect, useState } from "react";
import { PropTypes } from "prop-types";
import { connect } from "react-redux";
import {
  selectBaseCurrency,
  selectExchangeCurrency,
  selectExhangeRate,
  setBaseCurrency, //calling this action
  // setExchangeCurrency, 
  // setExchangeRate, 
  initialState,
} from "./configureStore/duck";

const App = ({
  exchangeRate,
  exchangeCurrency,
  baseCurrency,
  onClick
}) => {
  return (
    <div>
      <div>
        <b>Exchange Rate</b>: {exchangeRate}
      </div>
      <div>
        <b>Exchange Currency</b>: {exchangeCurrency}
      </div>
      <div>
        <b>Base Currency</b>: {baseCurrency}
      </div>
      <button onClick={() => onClick("USD")}>
        Change Currency Value
      </button>
    </div>
  );
};
App.propTypes = {
  exchangeRate: PropTypes.number,
  exchangeCurrency: PropTypes.string,
  baseCurrency: PropTypes.string,
  setBaseCurrency: PropTypes.func.isRequired,
  // setExchangeCurrency: PropTypes.func.isRequired,
  // setExchangeRate: PropTypes.func.isRequired,
  dispatch: PropTypes.func.isRequired
};
App.defaultProps = {
  exchangeRate: initialState.exchangeRate,
  exchangeCurrency: initialState.exchangeCurrency,
  baseCurrency: initialState.baseCurrency
};

const mapDispatchToProps = (dispatch,ownProps)=> ({
  onClick: () => dispatch(setBaseCurrency(ownProps.baseCurrency)),
  // on: setExchangeCurrency,
  // setExchangeRate: setExchangeRate
});

export default connect(
  state => ({
    exchangeRate: selectExhangeRate(state),
    exchangeCurrency: selectExchangeCurrency(state),
    baseCurrency: selectBaseCurrency(state)
  }), mapDispatchToProps
)(App);

import { defineAction } from "redux-define";
import { createAction, handleActions } from "redux-actions";

export const initialState = {
  exchangeRate: 3.06,
  baseCurrency: "SGD",
  exchangeCurrency: "MYR"
};

//Action-types
export const SET_EXCHANGE_RATE = defineAction("SET_EXCHANGE_RATE");
export const SET_BASE_CURRENCY = defineAction("SET_BASE_CURRENCY");
export const SET_EXCHANGE_CURRENCY = defineAction("SET_EXCHANGE_CURRENCY");

//Action-creators
export const setExchangeRate = createAction(
  SET_EXCHANGE_RATE,
  params => params
);
export const setExchangeCurrency = createAction(
  SET_EXCHANGE_CURRENCY,
  params => params
);
export const setBaseCurrency = createAction(
  SET_BASE_CURRENCY,
  params => params
);

//reducer
const reducer = handleActions(
  {
    [setExchangeRate]: (state, { exchangeRate }) => ({
      ...state,
      exchangeRate
    }),
    [setExchangeCurrency]: (state, { exchangeCurrency }) => ({
      ...state,
      exchangeCurrency
    }),
    [setBaseCurrency]: (state, { baseCurrency }) => ({
      ...state,
      baseCurrency
    })
  },
  initialState
);
export default reducer;

//Selector
export const selectExhangeRate = state => state.exchangeRate;
export const selectExchangeCurrency = state => state.exchangeCurrency;
export const selectBaseCurrency = state => state.baseCurrency;