title: React Redux how to use one reducer for two similar actions in two different components?
body: <p>I have a page with two "smart" components:</p>
  
  <ul>
  <li>PageChildrenTabs</li>
  <li>StaticPage</li>
  </ul>
  
  <p>I have an action function:</p>
  
  <pre><code>function fetchPage(slug) {
       return {
           type: 'FETCH_PAGE',
           payload: axios.get(PAGE_ENDPOINT + slug);
       }
  }
  </code></pre>
  
  <p>And I have a reducer:</p>
  
  <pre><code>export function pageReducer(state={
      pending: false,
      payload: {data: {}},
      error: null
  }, action) {
      switch(action.type) {
          case "FETCH_PAGE_PENDING": {
              return {...state, pending: true, payload: {data: {}}, error: null};
          }
          case "FETCH_PAGE_FULFILLED": {
              return {...state, pending: false, payload: action.payload, error: null};
          }
          case "FETCH_PAGE_REJECTED": {
              return {...state, pending: false, payload: {data: {}}, error: action.payload};
          }
      }
      return state;
  }
  </code></pre>
  
  <p>PageChildrenTabs calls <code>this.props.fetchPage('about');</code>, while StaticPage calls <code>this.props.fetchPage('about/history');</code>. Both of these functions happen at the same time because they are both rendered under a parent container component.</p>
  
  <p>Now, here is my problem. Only data for one action response is shown in both components. both  I understand that it might be because one removes the other. What is the proper way to achieve what I want to achieve? How can I load the same action twice in two separate components at the same time using a single reducer?</p>
  
  <p>EDIT: Clarified what the problem is.</p>