title: how to handle error in redux reducer
body: <p>I am not sure how to handle errors of api request in a reducer using redux.</p>
  
  <p>i have the following in my reducer</p>
  
  <pre><code>export default function(state = {}, action) {
      switch (action.type) {
      case APPROVE_COMMSMATRIX_SOX:
      case FETCH_COMMSMATRIX:
          if (action.payload.data.header.error) {
  
              return Object.assign({}, state, {
                  error: {
                      code: "INVALID ACTION",
                      message: action.payload.data.header.message,
                      action
                  }
               });
  
         } else {
             return { ...state, [action.payload.data.body.recordset.record[0].id] : action.payload.data.body.recordset.record[0] };
         }
      default:
          return state;
      }
  }
  </code></pre>
  
  <p>My api call is returning a valid error but how can i display this to the user?
  This is how i have it in my component to handle reducer errors. i am checking if error exists in the state object that is returned by the reducer and rendering the message onto the page by setting the state</p>
  
  <pre><code>class Approve extends Component {
      constructor(props) {
          super(props);
          this.runOnce = false;
          this.initConfirm = this.initConfirm.bind(this);
          this.state = {
                  message : &lt;div&gt;Confirming...&lt;i className="fa fa-spinner fa-spin"&gt;&lt;/i&gt;&lt;/div&gt;
          }
      }
  
      componentDidMount() {
          const id = this.props.match.params.id;
          this.props.approveCommsmatrixSox(id);
      }
  
      initConfirm(){
          this.runOnce = true;
          if(this.props.approvecommsmatrix.error){
              this.setState({ message: this.props.approvecommsmatrix.error.message}); 
          }
      }
  
      render() {
  
          const { approvecommsmatrix } =  this.props ;
  
          if(!this.runOnce &amp;&amp; approvecommsmatrix !== undefined &amp;&amp; Object.keys(approvecommsmatrix).length &gt; 0 ){
              this.initConfirm();
          }
  
          return (
              &lt;div className="container-fluid"&gt;
                  &lt;div className="row-fluid top-buffer"&gt;{this.state.message}&lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps({ commsmatrices }, ownProps) {
      if(commsmatrices.error){
          return { approvecommsmatrix : commsmatrices };
      }
      return { approvecommsmatrix : commsmatrices[ownProps.match.params.id] };
  }
  
  function mapDispatchToProps(dispatch) {
      return bindActionCreators(
          { approveCommsmatrixSox },
          dispatch
      );
  }
  
  export default connect(mapStateToProps, { approveCommsmatrixSox })(Approve);
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>i have updated the component to display error message and returning the error in the reducer.</p>
  
  <pre><code>initConfirm(){
          this.runOnce = true;
          if(this.props.approvecommsmatrix.error){
              this.setState({ message: this.props.approvecommsmatrix.error.message}); 
          }else{
  
          }
      }
  </code></pre>
  
  <p>In my reducer i do not understand how to call another <code>error case</code> as you mentioned in answer.</p>
  
  <p><strong>actions</strong></p>
  
  <pre><code>import axios from 'axios';
  
  export const FETCH_COMMSMATRIX = 'fetch_commsmatrix';
  
  export function fetchCommsmatrix(id) {
      const request = axios.get(`/api/user/comms/matrices/id/`+id+`/format/json?quiet=1`);    
      return {
          type: FETCH_COMMSMATRIX,
          payload: request
      };
  }
  
  export const FETCH_COMMSMATRICES_BY_SERVICE = 'fetch_commsmatrices_by_service';
  
  export function fetchCommsmatricesByService(service_id) {
      const request = axios.get(`/api/user/comms/matrices/format/json?quiet=1&amp;service_id=`+service_id);   
      return {
          type: FETCH_COMMSMATRICES_BY_SERVICE,
          payload: request
      };
  }
  
  export const APPROVE_COMMSMATRIX_SOX = 'approve_commsmatrix_sox';
  
  export function approveCommsmatrixSox(id) {
      const params = 'approve=1';
      const request = axios.post(`/api/admin/rename/comms/matrices/id/`+id+`/format/json?quiet=1`,params);    
      return {
          type: APPROVE_COMMSMATRIX_SOX,
          payload: request
      };
  }
  </code></pre>