title: How to dispatch an action on page load in react-redux?
body: <p>I have to display a table with lot of data. There is a pagination button which display 10 record per page. I have one button called "FETCH" on-click of it table is populating. How do load my table on load of the page.</p>
  
  <p><strong>action.js</strong></p>
  
  <pre><code>import fetch from 'isomorphic-fetch';
  export const ADD_BENEFICIARY = 'ADD_BENEFICIARY';
  export const REMOVE_BENEFICIARY = 'REMOVE_BENEFICIARY';
  
  export const ADD_PLAN_TO_COMPARE = 'ADD_PLAN_COMPARE';
  export const REMOVE_PLAN_FROM_COMPARE = 'REMOVE_PLAN_COMPARE';
  export const SHOW_PLAN_COMPARE = 'SHOW_PLAN_COMPARE';
  
  export const NEXT_PAGE_PLAN_LIST = 'NEXT_PAGE_PLAN_LIST';
  export const PREV_PAGE_PLAN_LIST = 'PREV_PAGE_PLAN_LIST';
  export const REQUEST_PAGE_PLAN_LIST = 'REQUEST_PAGE_PLAN_LIST';
  export const RECEIVE_PAGE_PLAN_LIST = 'RECEIVE_PAGE_PLAN_LIST';
  
  export const showNextPageOfPlans = () =&gt; {
  
    return {
      type: NEXT_PAGE_PLAN_LIST
    }
  }
  
  export const showPreviousPageOfPlans = () =&gt; {
  
    return {
      type: PREV_PAGE_PLAN_LIST
    }
  }
  
  export const requestPageOfPlans = (startIdx, pageSize) =&gt; {
  
    return {
      type: REQUEST_PAGE_PLAN_LIST,
      start: startIdx,
      pageSize: pageSize
    }
  }
  
  export const receivePageOfPlans = (startIdx, json) =&gt; {
  
    return {
      type: RECEIVE_PAGE_PLAN_LIST,
      start: startIdx,
      plans: json
    }
  }
  
  
  export const fetchPlans = (startIdx, pageSize) =&gt; {
  
      var str = sessionStorage.getItem('formValue'); //JSON.stringify(formValues);
  
    return function (dispatch) {
      dispatch(requestPageOfPlans(startIdx, pageSize));
      return fetch('http://172.16.32.57:9090/alternatePlans/plans/list/', {method: 'post', body: str, headers: new Headers({'Content-Type': 'application/json'})  })
        .then(response =&gt; response.json())
        .then(json =&gt;
          dispatch(receivePageOfPlans(startIdx, json))
        )
    }
  }
  </code></pre>
  
  <p><strong>reducer.js</strong></p>
  
  <pre><code>import { REQUEST_PAGE_PLAN_LIST, RECEIVE_PAGE_PLAN_LIST,
           NEXT_PAGE_PLAN_LIST, PREV_PAGE_PLAN_LIST } from './actions';
  
  const initialPaging = {
  
    startIndex: 0,
    lastIndex: 0,
    pageSize: 10
  }
  
  const paging = (state = initialCurrentPage, action) =&gt; {
  
    switch (action.type) {
  
      case NEXT_PAGE_PLAN_LIST:
  
        if (state.startIndex+state.pageSize &lt;= state.lastIndex) {
  
          return { ...state, startIndex: state.startIndex+state.pageSize };
        }
        else {
  
          return state;
        }
  
      case PREV_PAGE_PLAN_LIST:
  
        if (state.startIndex-state.pageSize &gt;= 0) {
  
          return { ...state, startIndex: state.startIndex-state.pageSize };
        }
        else {
  
          return state;
        }
  
      case REQUEST_PAGE_PLAN_LIST:
  
        return { ...state, isFetching: true };
  
      case RECEIVE_PAGE_PLAN_LIST:
  
        return { ...state, isFetching: false };
  
      default:
        return state;
    }
  
  }
  
  var initialPlans = [];
  
  const plans = (state = initialPlans, action) =&gt; {
  
    switch (action.type) {
  
      case RECEIVE_PAGE_PLAN_LIST:
        return action.plans.plans;
  
      default:
        return state;
    }
  }
  
  
  const allReducers = (state = {}, action) =&gt; {
  
    let items = plans(state.plans, action);
    return {
      plans: items,
      paging: paging({ ...initialPaging, ...state.paging, lastIndex: items.length-1 }, action)
    }
  }
  
  export default allReducers;
  </code></pre>
  
  <blockquote>
    <p>P.S. I am new to react-redux. Official Documentation is good but very less explanation is given.</p>
  </blockquote>