title: With Redux where are error messages best produced?
body: <p>I've been using Redux recently on a ReactJS project and I've come cross an interesting situation where I need to generate some type of error message that is shown to the user. These could be validation error types of messages or possibly messages that report on the state of the system. There may be no perscribed way to do this but what I'm curious about is whether to put the logic which determines the error message into my reducers or referenced by my reducers or whether to place it in my ReactJS components.</p>
  
  <h2>Transform error codes into messages</h2>
  
  <pre><code>const getIrsFormSubmissionErrorMessage = (errorCode) =&gt; {
      switch(errorCode) {
          case "server_error": return "Your submission failed because of a problem on the server";
          case "authorization_failure": return "You are not allowed to submit this form.";
          case "validation_error": return "One or more of the values entered are invalid.";
          case undefined: return undefined;
          default: return "Your submission failed, please contact support.";
      }
  }
  </code></pre>
  
  <h2>Ex. 1 Error messages derived in reducer and shown in component:</h2>
  
  <pre><code>function irsForm(state, action) {
    switch (action.type) {
  
      case "SUBMIT_IRS_FORM_FAILED":
        return {
          ...state,
          submitRequest: {
              executing: false,
              errorMessage: getIrsFormSubmissionErrorMessage(action.errorCode)
          },
        };
      default:
        return state;
    }
  }
  
  const FormError = (props) =&gt; 
      &lt;span className="form-error"&gt;{props.errorMessage)&lt;span&gt;
  </code></pre>
  
  <h2>Ex. 2 Error messages derived in component:</h2>
  
  <pre><code>function irsForm(state, action) {
    switch (action.type) {
  
      case "SUBMIT_IRS_FORM_FAILED":
        return {
          ...state,
          submitRequest: {
              executing: false,
              errorMessage: action.errorCode,
          },
        };
      default:
        return state;
    }
  }
  
  
  const FormError = (props) =&gt; 
      &lt;span className="form-error"&gt;{getIrsFormSubmissionErrorMessage(props.errorCode)}&lt;span&gt;
  </code></pre>
  
  <h2>Other options?</h2>
  
  <p>It's also possible that I'm missing some other pattern or way of going about this that is different from the two examples below. If that's the case and there is a compelling reason to do it that way then that would be great too.</p>