web_Developer_Victor
@web_Developer_Victor
Что такое google?

Как правильно передавать данные к компоненту?

Привет! Столкнулся с, возможно, очень очевидным и банальным вопросом: как передавать данные компоненту?
Я пока вижу 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 способ?
  • Вопрос задан
  • 77 просмотров
Пригласить эксперта
Ответы на вопрос 2
wooly
@wooly
Делаю фронт, пока не соскучусь за бэком
Забыть про тяжёлый и громоздкий redux, взять mobx посмотреть видео на ютубе и пользоваться им. Все операции производить в сторе и выводить только результат в компоненте. Объём кода маааааксимально мал. компонент обернуть в observer, он с лёгкостью будет всё отслеживать
Ответ написан
@Denioo
Забудь про mapState, mapDispatch, это уже довольно устаревший способ. Используй хуки редакса: useSelector, useDispatch. Там довольно просто все.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы