React Redux 2つの異なるコンポーネントで2つの同様のアクションに対して1つのレデューサーを使用する方法は？

Question

私は2つの "スマート" コンポーネントを持つページがあります。

• PageChildrenTabs
• 静的ページ

私はアクション機能があります。

function fetchPage(slug) { 
    return { 
     type: 'FETCH_PAGE', 
     payload: axios.get(PAGE_ENDPOINT + slug); 
    } 
} 

をそして、私は減速を持っている：

を

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; 
} 

PageChildrenTabsはthis.props.fetchPage('about');を呼び出し、StaticPageはthis.props.fetchPage('about/history');を呼び出します。これらの関数は、両方とも親コンテナコンポーネントの下でレンダリングされるため、同時に発生します。

ここに私の問題があります。両方のコンポーネントには、1つのアクション応答のデータのみが表示されます。私は両方が私がそれが他を取り除くのでかもしれないことを理解する。達成したいことを達成するための正しい方法は何ですか？単一のレデューサーを使用して、同じアクションを2つの別々のコンポーネントで同時に2回ロードするにはどうすればよいですか？

EDIT：問題の原因を明確にしました。

Answer 1

Redux状態は、アプリケーション全体のすべてを1つのツリーに保存します。何かを格納する必要がある場合は、配列またはハッシュを作成するだけです。この場合、おそらくこのデータをslugで保存することになります。

アクション作成者：

function fetchPage(slug) { 
    return { 
     type: 'FETCH_PAGE', 
     slug, 
     payload: axios.get(PAGE_ENDPOINT + slug); 
    } 
} 

リデューサー：

function singlePageReducer(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; 
} 

export function pageReducer (state = {}, action) { 
    if (["FETCH_PAGE_PENDING", "FETCH_PAGE_FULFILLED", "FETCH_PAGE_REJECTED"].indexOf(action.type) !== -1) { 
    return { ...state, [action.slug]: singlePageReducer(state[action.slug], action) }; 
    } 
    return state; 
} 

あなたはデータの交響曲を作るために一緒に複数の減速機を構成することができます。簡単なインスピレーションのためにtodos exampleを見てください。