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

Question

[hellcaster]

Привет! Столкнулся с, возможно, очень очевидным и банальным вопросом: как передавать данные компоненту?
Я пока вижу 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 способ?

Answer 1

[Alexandr N]

Забыть про тяжёлый и громоздкий redux, взять mobx посмотреть видео на ютубе и пользоваться им. Все операции производить в сторе и выводить только результат в компоненте. Объём кода маааааксимально мал. компонент обернуть в observer, он с лёгкостью будет всё отслеживать

Comments

[hellcaster]

Возможно я даже с Вами соглашусь, но сегодня во всех вакансиях требуют Redux, про MobX ни слова

[Alexandr N]

hellcaster, Зачастую да, но вот два прошлых собеседования были как раз с Mobx, скоро все там будем )
НО, если стоит задача реализовать не опираясь на будущие собеседования и требования на гипотетические вакансии, то такая реализация выигрывает.
Определённо стоит изучать мобых, и это тот самый третий способ))

[Alexandr199]

Alexandr N, бегло глянул на туториалы по mobx, почему везде используется классовый компонент, чё за фигня?)

И хотел узнать, там есть аналог Thunk?

[hellcaster]

Alexandr199, мне кажется, что можно самому написать Thunk для MobX (если там все так гладко и просто), потому что Thunk для React занимает всего 14 строк кода code

[Gary_Ihar]

Alexandr199, могу ошибаться , но там вроде санки не нужны

[Alexandr N]

Gary_Ihar, Совершенно верно, они там не нужны

[Alexandr N]

Alexandr199, сам mobx состоит из классов, а какие компоненты по проекту - без разницы, абсолюно

[Denioo]

Alexandr N, Не вижу сложностей и препятствий использовать редакс. Достаточно просто понять его 1 раз и все. Автор использует такие вещи как mapState, mapDispatch, хотя уже давно есть хуки и можно использовать хуки useSelector, useDispatch.

[Alexandr N]

Denioo, я же и не говорю что он сложный)) он просто более объёмный в плане кода

Answer 2

[Denioo]

Забудь про mapState, mapDispatch, это уже довольно устаревший способ. Используй хуки редакса: useSelector, useDispatch. Там довольно просто все.

Comments

[hellcaster]

Меня интересует насколько это правильно, ведь тогда компонент сам решает какие данные получать и что с ними делать. Но я теперь понимаю, что использовать Redux оптимальный способ (с mapState/useSelector и mapDispatch/useDispatch)