Should component re-render after form submit and action dispatches? - reactjs

Question

I have a component, which has a form, when a user clicks the submit button and after the validation is successful, an action dispatches (this all happens within the submit event).
Should the component re-render after the action dispatches?
Currently, I don't see this happening, what could be the reason?
Let me add, what's happening here.
1) form is submitted;
2) the validation is run;
3) the action dispatches (it sends the data to backend to save it into the database);
In the reducer, I have defined:
const messages = (state = INITIAL_STATE, action) => {
switch (action.type) {
case ADD_MESSAGE_SUCCESS:
return { ...state, message: action.message, error: null, isMessageLoading: false };
case ADD_MESSAGE_FAILURE:
return { ...state, message: null, error: action.error, isMessageLoading: false };
default:
return state;
}
};
And in the console log, I can clearly see that the state has changed.
But no re-render occurs at this stage.
const mapStateToProps = (state) => {
return {
message: state.messages.message,
isMessageLoading: state.messages.isMessageLoading
}
};
So when the action dispatches, the props gets updated.
This is the code of an action
export const addMessage = (message) => {
return (dispatch) => {
dispatch({ type: ADD_MESSAGE });
return fetch(`http://localhost:8080/api/contacts`, {
credentials: 'include',
method: 'POST',
body: JSON.stringify(message),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
}).then(response => {
return response.json();
}).then((data) => {
dispatch(addMessageSuccess(data));
}).catch(error => {
console.log(`An error occurred while adding contact message: ${error}`);
dispatch(addMessageFailure(error));
});
};
};

Answer 1

Connected components will re-render if the state changes (and the changed state is being selected in mapStateToProps)
In your case, both message or isMessageLoading can trigger the update.
Note that if the message is a string and you dispatch the actions that contain the same message string, your component will not re-render. For example, the current message state is success, and you dispatch another action which also contains message: success:
{
type: ADD_MESSAGE_SUCCESS,
message: 'success'
}
Then your component won't update. That's because there are some optimization in React-Redux's connect
A simple example here: https://jsfiddle.net/njk5teoh/ (I also add error to the component), you can click the submit button several times and see the console log.
If this doesn't solve your problem, you may need to provide a reproducible jsfiddle/codepen or repo.