Привет! Столкнулся с, возможно, очень очевидным и банальным вопросом:
как передавать данные компоненту?
Я пока вижу 2 способа: через
props (с App к моему компоненту) и
redux (mapStateToProps, mapDispatchToProps) (Context пока упустим).
Случай 1 (props (с App к моему компоненту))
Например, у меня есть список товаров на сайте. Для того чтобы мой список с товарами получил все данные, я должен пропустить все данные через
App, Main, SomeWrapper, SomeOtherWrapper, GoodsList (пример образный), нигде не ошибиться и только тогда вывести. Теперь представим, что мне нужно добавить onClick к GoodsItem => мне нужно опять через все компоненты передать
onGoodsItemClick, а после поправить тесты, потому что PropTypes будет ругаться, и сам PropTypes. Не кажется ли это немного сложным, рутинным и не очень технологичным?
Случай 2 (redux (передавать компоненту только то, что нужно через mapStateToProps, mapDispatchToProps))
Хорошо, рассмотрим 2-ой случай: компонент для сортировки предложений. Я написал connect для моего компонента, функции смотрятся так:
const mapStateToProps = (state, ownProps) => ({
...ownProps,
sortType: state.sortType,
allOffers: state.allOffers // allOffers нужен только для mapDispatchToProps
});
const mapDispatchToProps = (dispatch) => ({
onSortChange: (allOffers, sortType) => {
dispatch(ActionCreator.changeSortType(sortType));
dispatch(ActionCreator.sortOffers(allOffers, sortType)); // allOffers используются только тут
}
});
Здесь мне приходится получать allOffers только для того, чтобы потом передать в mapDispatchToProps для сортировки предложений (возможно, на этом этапе и ошибка. Насколько я знаю, ActionCreator не имеет доступа к store и должен работать только на параметрах). А зачем мне получать данные, которые даже на странице не рендерятся?
Как поступают в таком случае React программисты? Используют только один способ? Используют 2, но в разных случаях? Идут посередине с доработками? Используют 3 способ?
Средний
