The click button is not working when assigned a redux action - reactjs

Question

I need a little help with this redux problem that I am encountering. Here, I have an APP.js code that called the action from a file called duck.js.
import {
selectBaseCurrency,
selectExchangeCurrency,
selectExhangeRate,
setBaseCurrency, //calling this action
initialState,
} from "./configureStore/duck";
In this code, I have specified the mapDispatchToProp to dispatch the action.
const mapDispatchToProps = (dispatch,ownProps)=> ({
onClick: () => dispatch(setBaseCurrency(ownProps.baseCurrency)),
});
I've also connected it to the connect().
export default connect(
state => ({
exchangeRate: selectExhangeRate(state),
exchangeCurrency: selectExchangeCurrency(state),
baseCurrency: selectBaseCurrency(state)
}), mapDispatchToProps
)(App);
However, for some reason, when I click on the button, the value is not updated accordingly to the input. The button code looks like following:
<button onClick={() => onClick("USD")}>
Change Currency Value
</button>
Have I missed out a code to dispatch this correctly? What could be the problem with it.
Here below, I attach the full duck and also the App.js for more reference.
App.js:
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);
duck.js
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;
Edit : As additional info, here is my sandbox link: https://codesandbox.io/s/todoapp-with-redux-and-normalized-store-jkp8z
and here is my github link:
https://github.com/sc90/test-sandbox

Answer 1

So there are at least two issues here, I'll try to explain them one by one, I'm not sure how these frameworks you're using interact but here are a few points that will at least fix your issue.
Your reducer is trying to extract { baseCurrency } but this is not a property of your action. You instead need to extract the payload here, like this: { payload }, this payload value will contain your baseCurrency, and to properly save it in the reducer you should return { ...state, baseCurrency: payload }
Your selectors are trying to read directly from the state variable, but this one contains your reducers under the keys you sent to combineReducers, in your case you called your reducer reducer, thus you need to select state like this state => state.reducer.baseCurrency
See my fork of your Sandbox where I've fixed the baseCurrency case for you:
https://codesandbox.io/s/todoapp-with-redux-and-normalized-store-ih79q