title: How to dispatch multiple actions in react redux?
body: <p>Here is a simple flow of what I want to achieve:</p>
  <p><a href="https://i.stack.imgur.com/w9Ivo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w9Ivo.png" alt="enter image description here" /></a></p>
  <p>And here is the components executions:</p>
  <p><strong>onClick function:</strong></p>
  <p><code>this.props.FetchQueryData({dateRange: this.props.dateData.dateRange, selections: selections});</code></p>
  <p><strong>Redux FetchQueryData function:</strong></p>
  <pre><code>export const fetchSidebBatData = (sideBarData) =&gt; {
      return dispatch =&gt; {
          dispatch(fetchSidebBatDataBegin()); //For turning on isLoading
          console.log(&quot;Started&quot;);
          //For fetching the data
          Object.keys(data).forEach(element =&gt; { //Here Data is an object to get the right endpoint
              axios.post(`${ApiEndPoints.getDropDownHeadersByAdvertiserId}${element}`, sideBarData)
             .then(response =&gt; {
                 data[element] = response.data;
                 //Once the action is completed turning off isLoading
                 dispatch(fetchSidebBatDataEnd());
             })
             .catch(e =&gt; {
                 console.log(e);
                 //If there's an error turning off isLoading
                 dispatch(fetchSidebBatDataEnd());
              });
         },console.log(data));
         console.log(&quot;Ended&quot;);
      };
  
  };
  </code></pre>
  <p>Here is my reducer:</p>
  <pre><code>const reducer = ( state = initState, action ) =&gt; {
      switch ( action.type ) {
  
          case actionTypes.FETCH_SIDEBAR_DATA: return fetchSideBarData(state, action);
          case actionTypes.FETCH_SIDEBAR_DATA_START: return fetchSideBarDataBegin(state);
          case actionTypes.FETCH_SIDEBAR_DATA_END: return fetchSideBarDataEnd(state);
          default: return state;
      }
  };
  </code></pre>
  <p>and here is my <code>fetchSideBarDataBegin</code> and <code>fetchSideBarDataEnd</code> functions:</p>
  <pre><code>const fetchSideBarDataBegin = (state) =&gt; {
  
      const newState = state;
      newState.isFetching = true;
      return newState;
  };
  
  const fetchSideBarDataEnd = (state) =&gt; {
  
      const newState = state;
      newState.isFetching = false;
      return newState;
  };
  </code></pre>
  <p>I know I am missing something critical as I am not at all dispatching the data but I am totally new to redux and don't have a good context of how do you dispatch <code>multiple actions</code> within a reducer. Your help is highly appreciated. If you feel this is kind of complex example you can pick your own and just demonstrate the flow as I have shared in image which would be extremely helpful for me in understanding what to do next.</p>
  <p>Note my major problem is that I want to set isLoading to true before fetching the data and that change should reflect in component and once the process is over then I want to turn it back to false.</p>
  <p>Thanks in Advance</p>