title: React Redux correct way to handle error / success messages unique to each component
body: <h2><strong>Problem outline</strong></h2>
  
  <p>Below is a standard way for dispatching <strong>error / success</strong> messages, at least that's what the tutorials recommend:</p>
  
  <pre><code>{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }
  { type: 'FETCH_POSTS_SUCCESS', success: 'yay', response: { ... } }
  
  { type: 'FETCH_POSTS', status: 'error', error: 'Oops' }
  { type: 'FETCH_POSTS', status: 'success', response: { ... } }
  </code></pre>
  
  <p>However,  the problem I'm experiencing with this, is that these <strong>error / success</strong> messages will show inside <strong>EVERY</strong> component listening to the specific <strong>reducer</strong> that's handling these actions.  </p>
  
  <p><strong>Example scenario:</strong> </p>
  
  <p>Image you have a <strong>todo</strong> application which has three actions <strong>add</strong>, <strong>edit</strong> and <strong>delete</strong> however all three of those actions are performed from separate pages in terms of UI.  And they're all handled by the same <strong>todo reducer</strong>.</p>
  
  <p>Also all components that provide UI for triggering these actions are listening to this <strong>todo reducer</strong> via <strong>mapStateToProps</strong> to receive <strong>todo changes</strong> <em>(not relevant in this example)</em> and <strong>success &amp; error</strong> messages:</p>
  
  <pre><code>function mapStateToProps(state) {
      return { 
          success: state.todo.success,
          error: state.todo.error,
      }; 
  }
  
  {!!this.props.success &amp;&amp; &lt;p&gt;{this.props.success}&lt;/p&gt;}
  {!!this.props.error &amp;&amp; &lt;p&gt;{this.props.error}&lt;/p&gt;}
  </code></pre>
  
  <p><strong>Issue with above</strong>
  The problem is that  there’s <strong>no way to distinguish</strong> between <strong>add todo errors</strong>, <strong>edit todo errors</strong> and <strong>delete todo errors</strong>. </p>
  
  <p>So if  <strong>add todo</strong> triggers an error this error will now also show up next to <strong>edit todo</strong> and <strong>delete todo</strong>, because all 3 actions are  listening for the same: <strong>state.todo.error</strong>.</p>
  
  <p>Below are the 2 solutions I came up with. Any feedback / critique as well as new suggestions would be more than welcome.</p>
  
  <hr>
  
  <h2><strong>What I came up with so far</strong></h2>
  
  <p><strong>1: Global status reducer that handles errors / successes of each action</strong></p>
  
  <p>Setup a global <strong>status reducer</strong> that handles <strong>errors / successes</strong> of each action - <strong>keys</strong> on the <strong>reducer</strong> would consist of small specialised <strong>sub-reducers</strong> <strong>unique to each action</strong>, i.e.:</p>
  
  <pre><code>const status = combineReducers({
    add_todo,     // handles error/success for add_todo
    edit_todo,    // handles error/success for edit_todo
    delete_todo,  // handles error/success for delete_todo
    …
    update_bio,   // handles error/success for update_bio
    etc...
  });
  </code></pre>
  
  <p>Then you can simply listen for these <strong>success / error</strong> messages in your components and render them as follows:</p>
  
  <pre><code>function mapStateToProps(state) {
      return { 
          error: state.status.add_todo.error,
          success: state.status.add_todo.success
      }; 
  }
  
  {!!this.props.error &amp;&amp; &lt;p&gt;{this.props.error}&lt;/p&gt;}
  {!!this.props.success &amp;&amp; &lt;p&gt;{this.props.success}&lt;/p&gt;}
  </code></pre>
  
  <p>etc...</p>
  
  <pre><code>function mapStateToProps(state) {
      return { 
          error: state.status.edit_todo.error,
          success: state.status.edit_todo.success
      }; 
  }
  
  {!!this.props.error &amp;&amp; &lt;p&gt;{this.props.error}&lt;/p&gt;}
  {!!this.props.success &amp;&amp; &lt;p&gt;{this.props.success}&lt;/p&gt;}
  </code></pre>
  
  <p>The downside of this is that it would force you to create a sub-reducer for each action that an application provides, which I'm not sure is a correct way of doing it?</p>
  
  <hr>
  
  <p><strong>2: Use locally unique error / success keys inside of each reducer that manages more than a single action</strong></p>
  
  <p>i.e. we could modify the <strong>todo reducer</strong> as follows:</p>
  
  <pre><code>ADD_TODO_FAILED:
      return {...state, error_add_todo: action.error }
  
  EDIT_TODO_FAILED:
      return {...state, error_edit_todo: action.error }
  
  DELETE_TODO_FAILED:
      return {...state, error_delete_todo: action.error }
  </code></pre>
  
  <p>Then you can simply listen for these <strong>success / error</strong> messages in your components and render them as follows:</p>
  
  <pre><code>function mapStateToProps(state) {
      return { 
          error: state.todo.error_add_todo,
          success: state.todo.success_add_todo
      }; 
  }
  
  {!!this.props.error &amp;&amp; &lt;p&gt;{this.props.error}&lt;/p&gt;}
  {!!this.props.success &amp;&amp; &lt;p&gt;{this.props.success}&lt;/p&gt;}
  </code></pre>
  
  <p>etc...</p>
  
  <pre><code>function mapStateToProps(state) {
      return { 
          error: state.todo.error_edit_todo,
          success: state.todo.success_edit_todo
      }; 
  }
  
  {!!this.props.error &amp;&amp; &lt;p&gt;{this.props.error}&lt;/p&gt;}
  {!!this.props.success &amp;&amp; &lt;p&gt;{this.props.success}&lt;/p&gt;}
  </code></pre>
  
  <p>The downside of this is would be that you would have to make sure that each <strong>error / success</strong> <strong>key</strong> inside of a given reducer is <strong>locally unique</strong> inside of that reducer.</p>
  
  <p>And it would also make referring to <strong>keys</strong> inside of <strong>stateMapToProps</strong> more verbose as instead of saying <code>state.todo.error</code> your would have to refer to that <code>error</code> by using the specific name that you gave it.</p>
  
  <h2><strong>Question</strong></h2>
  
  <p>So my question is, based on all of the above, did I completely miss something out of the equation in my above observations, or were my observations correct in which case what is the standard way of achieving this desired outcome? </p>
  
  <p>And are the 2 solutions I proposed legit or too naive for a real world application? </p>
  
  <p>Thanks a lot!</p>