title: Best practices for displaying and managing error messages in React-Redux app
body: <p>I am building a React app (with <a href="https://redux.js.org/" rel="nofollow noreferrer">react-redux</a>, <a href="https://redux-saga.js.org/" rel="nofollow noreferrer">redux-saga</a>, and <a href="https://github.com/axios/axios" rel="nofollow noreferrer">axios</a>), and
  I need advice on how to arrange my project for displaying user-friendly error messages.</p>
  <p>(It is up to me to decide what and how I display to the user)</p>
  <h2>In particular, I would like to get answers to the following questions:</h2>
  <ol>
  <li>Should I display a message based on the status code?</li>
  <li>Should I break down the errors to <strong>client / server / other errors</strong> and what are the benefits of that? (based on <a href="https://github.com/axios/axios#handling-errors" rel="nofollow noreferrer">example</a> from Axios)</li>
  <li>Where should I keep the error messages, in the component itself, in a config file (I would like to see an example of such a file)?</li>
  <li>How would my redux state tree look?</li>
  <li>Should I dispatch an action for every error based on the status code?</li>
  </ol>
  <p>I would appreciate any suggestions or real-world examples.</p>
  <h2>Here are some examples of error responses from our backend:</h2>
  <pre><code>Request URL: https://example.com/api/call/123
  Request Method: POST
  Status Code: 400 Bad Request
  </code></pre>
  <pre><code>Request URL: https://example.com/api/call/123
  Request Method: PUT
  Status Code: 409 Conflict
  </code></pre>
  <pre><code>Request URL: https://example.com/api/user/me/
  Request Method: GET
  Status Code: 401 Unauthorized
  </code></pre>