Redux ComponentDidMount not firing - reactjs

Question

I'm having trouble getting the Component to re-render after an action. I understand that I must return a new object in my reducer, so I'm returning an entirely new state, but its still not triggering a componentDidMount() or render()
My Component:
class AppTemplate extends React.Component {
constructor(props) {
super(props);
if(!this.props.settings.user){
this.props.dispatch(userActions.get());
}
}
componentDidUpdate(prevProps, prevState) {
console.log(prevProps, this.props);
//do some stuff
}
render() {
return (
<SomeComponent/>
);
}
}
function mapStateToProps(state) {
const { registration, role, settings } = state;
console.log(role);
return {
registration,
role,
settings
};
}
const connectedAppTemplate = connect(mapStateToProps)(AppTemplate);
export { connectedAppTemplate as AppTemplate };
My Reducer:
export function role(state = { role : null, loading: true }, action) {
switch (action.type) {
case 'USER_GET_PENDING':
return {
role:null,
loading: true
}
case 'USER_GET_FULFILLED':
const role = action.payload.data.roles[0];
const newState = {
role: role,
loading: false
}
console.log(state, newState);
console.log(state == newState);
return newState;
default:
return state
}
}
The action is getting fulfilled with no problem, and even the mapToState is logging with the new role, but the componentDidMount is never fireing. Any thoughts?
Thanks!

Answer 1

componentDidMount is only called ONCE. Which is when the component finishes loading for the first time. If you're updating the redux store, then you will get calls to the componentWillReceiveProps and IF you trigger a render there, you will see componentDidUpdate will fire.
EDIT: While the component will render again when new props are received via redux...componentDidMount will still only be called once. You are better off using componentWillReceiveProps and componentDidUpdate for what you're trying to accomplish.
Credit to Dan O in the comments below (that rhymed) for pointing out my error.