Why is React-Redux not calling action creator function - reactjs

Question

I have a piece of code which updates user settings when a number input box is called in react-redux. The first portion of the code works fine: The "onChange" function gets called. But now it gets weird. onChange is called twice and the code jumps through a bunch of the react back end, touches the action creator then execution skips the entire function and exits at the closing brace.
I have many other Redux functions created using the same model that work perfectly and cannot understand why this one is not being called.
Here is my code:
mapDispatchToProps
const mapDispatchToProps = (dispatch) => {
return {
SMSAdmin_Get_Users: () => { return dispatch(SMSAdmin_Get_Users()) },
SMSAdmin_Load_User: (userId, userName, oldData = null, startVal = 0, number = 20) =>
{
return dispatch(SMSAdmin_Load_User(userId, userName, oldData, startVal, number))
},
SMSAdmin_Update_User: (user, province, credits) => { return
SMSAdmin_Update_User(user, province, credits)
},
SMSAdmin_setCurrentUpload: (userName) => { return SMSAdmin_setCurrentUpload(userName) }
};
}
Calling Input
<Form.Control type="number"
style={{ width: '100px' }}
defaultValue={this.props.SMSAdmin.user.credits}
id='numCredits'
onChange={(e) => this.updateUser(e.target)}
/>
I know that in the input I don't need to pass in the event but included it should I need it in the future for some purpose.
onChange function
//this gets called twice when making a single change in the input box
updateUser = () => {
var province = document.getElementById("provinceId");
var credits = document.getElementById("numCredits");
var user = document.getElementById("lblUser");
if (user && user.value !== '') { //safeguard to avoid trying to update nothing
//execution hits here once, then after the second hit proceeds into Redux code
this.props.SMSAdmin_Update_User(user.value, province.value, credits.value);
}
}
Redux action creator
// Execution touches here
export const SMSAdmin_Update_User = (user, province, credits) => (dispatch) => {
//then here jumps to bottom
dispatch(Actions.SMSAdmin_User_Updating());
var data = { 'mode': 'UPDATE', 'user': user, 'province': province, 'credits': credits }
var init = fetchInit();//copy to not modify the original
init.method = "POST";
init.body = JSON.stringify(data);
var myReq = new Request('/dataAPI/SMS', init);
return fetch(myReq)
.then((response) => {
if (response.ok) {
return response;
}
else {
var error = new Error("Error " + response.statusText);
error.response = response;
throw error;
}
}, (error) => {
var err = new Error(error.message);
throw err;
})
.then((response) => { return response.json() })
.then((resp) => {
handleData(dispatch, Actions.SMSAdmin_User_Updated, resp)
})
.catch((err) => {
var msg = err.message;
return dispatch(Actions.SMS_Send_Failed(msg));
});
} //touches here and exits
I think that this is all the code involved. If I am missing anything let me know and I will include it. I am baffled how execution touches the function but does not execute it, nor does Chrome debug break at a breakpoint set on the function header.

Answer 1

The issue is that action is not dispatched properly. dispatch is not attached to SMSAdmin_Update_User function.
Inside mapDispatchToProps, update the following:
SMSAdmin_Update_User: (user, province, credits) => {
// Add dispatch here. It is already done for other functions such as SMSAdmin_Load_User
return dispatch(SMSAdmin_Update_User(user, province, credits))
},