update the state slice in redux lwc from the action payload - react-redux

Question

below is my code to update the state.customer slice. However when this runs, I see that the next state is not updated with the payload dispatched from the action. can some one please point out what I'm missing?
reducer:
const initialState1 = {"customer":{}};
const customer = (state = initialState1, action) => {
console.log('state:', state);
switch (action.type) {
case 'INIT_CUSTOMER_INFO':
return {
...state,
customer: action.payload
}
case 'UPD_CUSTOMER_INFO':
console.log(action);
return { ...customer, firstname: action.firstname }
default: return state;
}
}
export default customer;
action
export const initCustomer = customer => {
return {
type: 'INIT_CUSTOMER_INFO',
payload : customer
}
}
dispatch from LWC
import { LightningElement, track } from 'lwc';
import { connect } from 'c/connect';
import { updateCustomer, initCustomer } from 'c/actions';
import getJSONData from '#salesforce/apex/RGClass.getCartSummary';
const mapStateToProps = (state, ownProps) => ({
customer: state.customer
})
const mapDispatchToProps = (dispatch, ownProps) => ({
initCustomer : customer => dispatch(initCustomer(customer)),
updateCustomer : customer => dispatch(updateCustomer(customer))
})
export default class DigiForm extends LightningElement {
#track firstname;
showfirstname;
connectedCallback() {
//add the hook
connect(mapStateToProps, mapDispatchToProps)(this);//connects the
//api call
getJSONData()
.then(result => {
console.log('result:',result);
this.initCustomer(result);
})
.catch(error => {
console.log(error);
});
}
onContinue = () => {
let fn = this.template.querySelector('lightning-input').value;
console.log('firstname:', fn);
this.updateCustomer({ firstname : fn});
if(fn != null){
this.showfirstname = true;
}
}
}
Tried a couple of options but none worked. any help would be much appreciated!