Re-rendering the component after dispatching action from non-component JS file - reactjs

Question

I'm dispatching the action from a non-component JS (utils/index.js) file using store.dispatch(), but after the reducer state change, the component in which that reducer state is connected using mapStateToProps is not being re-rendered,
What am i doing wrong?
Any help would be appreciated
Thanks in advance
I tried searching through out and i went to all the questions and articles which are dispatching the action from a component file.
All the related files
/store/index.js
import { createStore } from "redux";
import rootReducer from "reducers";
store = createStore(rootReducer);
/utils/index.js
import store from './store';
import { toggleShowAlert } from "reducers/alert";
export const customAlert = msg => {
store.dispatch(toggleShowAlert(msg));
}
/views/Nav/index.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
class Nav extends Component {
render() {
....
// component code
....
}
}
const mapStateToProps = state => {
return {
showAlert: state.alert.showAlert
}
}
export default connect(mapStateToProps)(Nav);
/reducer/alert.js
const TOGGLE_SHOW_ALERT = "TOGGLE_SHOW_ALERT";
export const toggleShowAlert = msg => {
return dispatch => {
dispatch({
type: TOGGLE_SHOW_ALERT,
msg
});
};
};
const initialState = {
showAlert: false,
alertMsg: ""
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case TOGGLE_SHOW_ALERT:
return {
...state,
showAlert: !state.showAlert,
alertMsg: state.showAlert ? "" : action.msg
};
default:
return { ...state };
}
}
export default reducer;
another reducer from which that customAlert is being called
/reducers/user.js
import { customAlert } from 'utils';
...other codes...
export const updateAgeGender = (userId, age, gender) => {
return dispatch => {
dispatch(updateButtonLoading());
callAPI("post", `${COMM_BE_URL}/users/update-age-gender`, {
userId,
age,
gender
})
.then(res => {
if (res.status === "SUCCESS") {
dispatch(updateAgeGenderAction(age, gender));
customAlert("Your info has been updated, now u can join");
}
})
.catch(err => {
console.log(err);
dispatch(updateError(SERVER_ERROR_MSG));
});
};
};
After change of showAlert, the Nav Component should re-render, but it's not happening