title: Should component re-render after form submit and action dispatches?
body: <p>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).</p>
  
  <p>Should the component re-render after the action dispatches?</p>
  
  <p>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);</p>
  
  <p>In the reducer, I have defined:</p>
  
  <pre><code>    const messages = (state = INITIAL_STATE, action) =&gt; {
      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;
      }
  };
  </code></pre>
  
  <p>And in the console log, I can clearly see that the state has changed.
  But no re-render occurs at this stage.</p>
  
  <pre><code>const mapStateToProps = (state) =&gt; {
      return {
          message: state.messages.message,
          isMessageLoading: state.messages.isMessageLoading
      }
  };
  </code></pre>
  
  <p>So when the action dispatches, the props gets updated.</p>
  
  <p>This is the code of an action</p>
  
  <pre><code>    export const addMessage = (message) =&gt; {
      return (dispatch) =&gt; {
          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 =&gt; {
              return response.json();
          }).then((data) =&gt; {
              dispatch(addMessageSuccess(data));
          }).catch(error =&gt; {
              console.log(`An error occurred while adding contact message: ${error}`);
              dispatch(addMessageFailure(error));
          });
      };
  };
  </code></pre>