Поясню. Есть страница, на ней допустим три раза вызывается компонент, который должен каждый из трех раз показывать разный набор однотипных данных. Допустим, это будет три разных списка компаний. Компонент приконекчен локально, в смысле, что управление его состоянием происходит на уровне этого компонента, через декоратор
connect. Код родительского компонента примерно такой:
<main className="main">
<Promo />
{/* Наш компонент */}
<Companies
type="type1"
/>
<News />
<Testimonials />
<Benefits />
{/* Наш компонент */}
<Companies
type="type2"
/>
<Sections />
{/* Наш компонент */}
<Companies
type="type3"
/>
</main>
Соответственно, у компонента есть свои собственные actions, свой state, свой reducer и все это три раза вызывается при каждом вызове компонента с главной страницы, при этом в каждом таком вызове передается параметр, задающий тип компаний (в коде выше он называется type). Этот параметр, в свою очередь, используется в самой компоненте вот так:
componentWillMount () {
this.props.actions.getCompanies(this.props.type);
}
Тут происходит вызов action данного компонента, который должен фетчить нам компании определенного типа и возвращать их в state через reducer. Но это порождает следующую ситуацию: когда код нашего родительского компонента три раза вызывает наш компонент,
то в итоге мы фетчим на самом деле не три разных типа компаний, а тот тип компаний, который был передан в последнем вызове нашего компонента, и в итоге все три вызова компоненты получают один и тот же набор данных.
Код экшна выглядит вот так:
export function getCompanies (type) {
return (dispatch) => {
dispatch({ type: FETCH_COMPANIES_DATA });
CompaniesController.fetchCompanies(type) // код данной функции не привожу, он просто возвращает нам json от API
.then((answer) => {
dispatch({
companies: {
items: answer.data.items,
type,
},
type: GET_COMPANIES,
});
});
};
}
А редусер выглядит вот так:
case GET_COMPANIES: {
const oldCompanies = state.companies;
const newCompanies = { [action.companies.type]: action.companies.items };
return {
...state,
companies: { ...oldCompanies, ...newCompanies },
isFetching: false,
CompaniesDataFetched: true,
};
}
Как видно в последнем куске кода, мы учитываем, что у нас разные типы компаний, и сохраняем их в props каждую отдельно, но толку пока что в этом ноль, так как мы каждый раз пишем туда одни и те же данные. Выглядит в итоге то, что нам возвращает в props наш reducer, примерно вот так (замазаны типы компаний):
Вопрос: как сделать так, чтобы наш action и reduser получали для каждого из вызовов компонента нужный нам набор данных?
Средний
