私は2つの "スマート" コンポーネントを持つページがあります。React Redux 2つの異なるコンポーネントで2つの同様のアクションに対して1つのレデューサーを使用する方法は?
- 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:問題の原因を明確にしました。