title: Using axios or async network call in the actions of the redux, updating the initial state
body: <p>I am developing a Web application using React + Redux. What I am doing now is I am making a API request using the Axios network library. I do not want to make the asyc API call in the component. As a book I am reading recommended, I am making the call in the actions. </p>
  
  <p>This is my actions.</p>
  
  <pre><code>export const EVENT_START_FETCHING_LIST = "(EVENT) request list start";
  export const EVENT_COMPLETE_FETCHING_LIST = "(EVENT) request list completed";
  export const EVENT_THROW_ERROR_FETCHING_LIST = "(EVENT) request list throw error";
  import { getHttpClient } from '../memento/getHttpClient';
  
  export const startFetchingEvents = (data) =&gt; {
      return (dispatch) =&gt; {
          getHttpClient().get('event/list').then((response) =&gt; {
              dispatch(completeFetchingEvents(response.data));
          }).catch((error) =&gt; {
              dispatch(throwErrorFetchingEvents({ message: "Error in fetching events from the server", styleClass: "alert alert-danger" }));
          })        
      }
  }
  
  export const completeFetchingEvents = (data) =&gt; {
      return {
          type : EVENT_COMPLETE_FETCHING_LIST,
          payload : data
      }
  }
  
  export const throwErrorFetchingEvents = (data) =&gt; {
      return {
          type : EVENT_THROW_ERROR_FETCHING_LIST,
          payload : data
      }
  }
  </code></pre>
  
  <p>If I want to make the call, I just trigger the action like this in the component.</p>
  
  <pre><code> this.props.startFetchingEvents()
  </code></pre>
  
  <p>The problem I am having is that updating the state. I have a property in the state, called "loading.". This is my reducer.</p>
  
  <pre><code>import * as EventListActions from '../actions/event.list.actions';
  
  const DEFAULT_STATE = {
      loading: false,
      message: null,
      events: []
  }
  
  export default function (state = DEFAULT_STATE, action) {
      switch (action.type) {
          case EventListActions.EVENT_START_FETCHING_LIST:
              {
                  //TODO: this event is not triggerd
                  return { ...state, loading: true, events: [], message: null };
              }
  
          case EventListActions.EVENT_COMPLETE_FETCHING_LIST:
              {
                  return { ...state, loading: false, events: action.payload };
              }
  
          case EventListActions.EVENT_THROW_ERROR_FETCHING_LIST:
              {
                  return {
                      ...state,
                      loading: false,
                      message: {
  
                      }
                  }
              }
      }
      return state;
  }
  </code></pre>
  
  <p>As you can see in my reducer, I am updating the loading value to true, when the API called is made. But as I commented, that function is not triggered. Other functions are triggered. What is wrong with my code and how can I fix it?</p>