Redux is executing the wrong action - reactjs

Question

I am trying to execute the submitRecord action that POSTs data to a server. It is supposed to activate the SubmitRecordSuccess upon doing it so the data is posted to the server but is the SubmitRecordFail action that is executed instead as if the app wouldn't had posted the data to the server. However, when I check the data is online. What I'm a doing wrong so the wrong action is executed?
This is the action:
export const submitRecordSuccess = ( id, recordData ) => {
return {
type: actionTypes.SUBMIT_RECORD_SUCCESS,
recordId: id,
recordData: recordData
};
};
export const submitRecordFail = ( error ) => {
return {
type: actionTypes.SUBMIT_RECORD_FAIL,
error: error
};
};
export const submitRecordStart = () => {
return {
type: actionTypes.SUBMIT_RECORD_START
};
};
export const submitRecord = ( recordData ) =>{
return dispatch => {
dispatch(submitRecordStart());
axios.post( '/medicalRecords.json', recordData ).then( response => {
dispatch(submitRecordSuccess( response.data, recordData ));
} ).catch( error => {
dispatch(submitRecordFail( error ));
})
}
}
And this is the function that dispatches the action:
const mapDispatchToProps = dispatch => {
return {
onSubmitRecord: (recordData) => dispatch(actions.submitRecord(recordData))
};
};
Finally, this is the reducer:
const reducer = (state = initialState, action) => {
switch (action.type) {
case actionTypes.SUBMIT_RECORD_START:
return {
...state,
loading: true
};
case actionTypes.SUBMIT_RECORD_SUCCESS:
const newRecord = {
...action.recordData,
id: action.recordId
}
return {
...state,
medicalRecords: state.orders.concat(newRecord),
loading: false,
};
case actionTypes.SUBMIT_RECORD_FAIL:
return {
...state,
loading: false
};
default:
return state;
}
};
I console.log the error inside the .catch() and get
TypeError: Cannot read property 'concat' of undefined
at reducer (recordBuilder.js:24)

Answer 1

Initially, you state is initialised as:
state = {
medicalRecords: [],
loading: false,
}
You are getting the error because of this line.
medicalRecords: state.orders.concat(newRecord),
You are trying to access state.orders which is undefined and hence the error.
Please either add order: [] in initialState or use
medicalRecords: state.medicalRecords.concat(newRecord),
you can use spread operator for destructuring array also.
medicalRecords: [ ...state.medicalRecords, newRecord ],