@react_js
React — русскоговорящее сообщество

Обсуждаем React.js и экосистему. См. также: @reactnative_ru, @apollo_ru, @protonnative_ru, @nodejs_ru, @js_ru, @uiux_ru Вакансии и поиск работы: @javascript_jobs Правила: http://bit.ly/our_etiquette Sponsored with ❤️ by www.axept.co

5822 members

Архив канала @react_js 27 мая 2016 г.

04:54:03 ДП
User 9451818
Всем привет! Кто-нибудь может мне помочь разобраться с Redux - капец какой-то, ни как не могу въехать
04:55:33 ДП
User 9451818
уже кучу скринкастов просмотрел, последний от Дэна Абрамова был. Но нифига не вкуриваю
04:57:22 ДП
User 9451818
Может оно мне и не надо? Я сейчас юзаю react в качестве апп для дополненой функциональности php сайта
04:58:44 ДП
User 143141567
А что именно не понимаешь?
04:58:54 ДП
User 143141567
Саму концепцию? Или как использовать? Или зачем использовать?
05:02:12 ДП
User 9451818
Зачем? И как?
05:02:25 ДП
User 9451818
Ну про как в целом можно разобраться
05:05:02 ДП
User 9451818
Что мне мешает у моего App создать единственый state в root и туда же все хендлеры засунуть и далее через пропсы компонентов передавать root как app=this и в любом компоненте иметь доступ к глобальному state?
05:05:27 ДП
User 9451818
Чем этот подход отличается от redux?
05:09:16 ДП
User 143141567
Ну по идее ни чем) Redux делает почти тоже самое) Выносит state в одно место и обеспеивает однонаправленный поток данных
05:11:26 ДП
User 143141567
Но в Reduxe есть какое-то логическое разделение, между экшенами, редьюсерами и константами
05:11:41 ДП
User 143141567
у тебя же это будет все в один файл впихнуто
05:18:55 ДП
User 143141567
Плюс, допустим у тебя есть такая композиция компонентов App  -> View -> SomeComponent, и вот SomeComponent должен выполнять какие то действия с главным стэйтом,  а View нет, но тебе все равно придется пробрасывать по всему пути нужные пропсы, что бы твой SomeComponent мог выполнять свои функции
05:19:06 ДП
User 143141567
а это опять же какая-то каша получается
05:19:30 ДП
User 9451818
ну да
05:20:36 ДП
User 143141567
В reduxe этого не надо, ты подключаешь стейту глобальному, только те компоненты, которые должны с ним работать
05:21:20 ДП
User 143141567
От сюда и разделение на компоненты и контейнеры (иногда называются глупые и умные компоненты, но не всем нравится такая терминология)
05:22:01 ДП
User 143141567
Контейнеры - это те компоненты, которые работают с редуксовским стэйтом, а обычные компоненты работают с пропсами и своим стейтом
05:23:02 ДП
User 143141567
Например, Button - будет компонент, его можно где угодно использовать, все что он делает, например выполняет обработчик onClick из props
05:23:28 ДП
User 143141567
А вот какая-нить сферическая кнопка VoitButton - которая отправляет запрос на сервер, при нажатии - это уже контейнер
05:24:48 ДП
User 143141567
и если Button вообще может быть ф-цией ( stateless компонент)
const Button = ({onClick, children}) => (
    <button onClick={onClick}>{children}</button>
)
05:26:03 ДП
User 143141567
То VoitButton будет чуть сложнее, хотя бы потому, что будет обращаться к state, вызывая нужные экшены, но в функции render мы используем наш компонент Button
05:27:17 ДП
User 143141567
class VoitButton extends Component {
    handleClick() { /* вызываем экшены */}
    render() {
        return (
             <Button onClick={this.handleClick}>
                 Голосовать
             </Button>
        )
   }
}
Вот как то так
05:32:45 ДП
User 9451818
хм, интересно
05:34:23 ДП
User 143141567
Как побочный эффект, очень структурирует проект, потому что тебе за ранее приходится думать
05:34:31 ДП
User 143141567
как будет выглядеть структура состояния проекта
05:36:49 ДП
User 9451818
ну по сути проект уже есть, поэтому переписать его под редукс думаю будет проще, главное понять ))
05:38:08 ДП
User 9451818
может есть возможно проконтролировать или помочь?
05:38:29 ДП
User 9451818
правильно архитектуру нарисовать
05:38:59 ДП
User 143141567
Не знаю, что за проект, но попробовать можно будет)
05:56:37 ДП
User 23384802
смотри сразу mobx. Тем более недавно там вышел очень крупный апдейт
05:56:37 ДП
User 23384802
Всем привет! Кто-нибудь может мне помочь разобраться с Redux - капец какой-то, ни как не могу въехать
05:59:22 ДП
User 23384802
с redux в последствие одна боль и страдание )
06:02:20 ДП
User 23384802
Во первых чистый redux еще больше требует кода, во вторых в redux ducks можно смело дропать константы и сэкономить еще несколько строк кода. Но проблема остается.
Вот простейший пример - представь тебе надо открыть хеадер и закрыть хеадер. Ты не можешь это хранить в стейте,т.к. данные требуются разным компонентам.
И вот ты пишешь action creator'ы на открытие, на закрытие хедера или toggle, потом слушаешь это в редюсере и меняешь showHeader. далее валидириуешь все экшены в proptypes, достаешь их из this.props. 
В итоге имеет 20-30 строк кода на 2 строки действия
06:02:31 ДП
User 23384802
через полгода работы с редаксом поймешь :D
06:04:43 ДП
User 23384802
>далее
забыл еще про константы. Тогда точно 20 строк выходит
06:08:23 ДП
User 130174893
User 23384802
смотри сразу mobx. Тем более недавно там вышел очень крупный апдейт
а для полного новичка подойдет ? или лучше с redux'а начать ?
06:08:33 ДП
User 23384802
mobx намного проще redux'а
06:10:21 ДП
User 23384802
у него только один минус - он стал популярен не так давно и нет норм бойлерплейтов с серверным рендерингом и прочими плюшками (только самому писать).
06:12:20 ДП
User 130174893
User 23384802
у него только один минус - он стал популярен не так давно и нет норм бойлерплейтов с серверным рендерингом и прочими плюшками (только самому писать).
я с такими понятиями еще не знаком )
06:12:46 ДП
User 23384802
возможно и не потребуется никогда)
06:16:21 ДП
User 656567
мне вот показалось, что mobx это какой-то разворот к mvc или чему-то подобному
06:16:27 ДП
User 656567
нет? действительно показалось?
06:16:28 ДП
User 775925
mobx + typescript + vscode - норм заходит)
06:18:58 ДП
User 775925
mobx - позволяет делать биндинг компонент к данным. Каким образом ты будешь строить само приложение уже зависит от тебя. Это может быть mvvm, может быть flux/redux/elm или что тебе задумается
06:21:08 ДП
User 775925
Чтобы перерисовать компоненту с новыми данными:

подход реакта

this.setState({value: newValue})


подход mobx+react

value = newValue
06:48:07 ДП
User 9451818
ну не наверно еще и на изучение mobx меня не хватит
06:49:07 ДП
User 9451818
хорошо бы redux без болезненно прикрутить, либо отказаться от этой затеи и прокидывать пропсы ))
06:51:00 ДП
User 202047214
Кмк лучше не отказываться
06:52:08 ДП
User 150513139
такой вопрос
<img src={'./images/icons/' + props.icon + '.svg'}>
вот если у меня компонента тянет иконки таким образом, можно ли как-то в вэбпаке описать что бы он их находил и тянул в dist?
06:54:20 ДП
User 150513139
или я не правильно подхожу к решению?
06:55:19 ДП
User 143141567
что бы иконки подтягивались, нужен же file-loader для вебпака
06:55:22 ДП
User 143141567
а там можно указать директорию
06:57:22 ДП
User 150513139
ну да, только я так понял что он срабатывает для стилей или для статично указаных путей
07:09:27 ДП
User 9451818
ой а разве так можно?
07:11:23 ДП
User 150513139
User 9451818
ой а разве так можно?
я вот уже начал сомневатся
07:12:33 ДП
User 130174893
даже корейцы в чате )
07:20:25 ДП
User 3681453
Есть у кого опыт интеграции управления с клавиатуры в приложение на реакте? Примерно такое https://github.com/artpi/Reactive-Compass
github.com/artpi/Reactive-Compass
Reactive-Compass - React mixin and focus controller for navigation using arrow keys, TV remote, etc..
07:23:31 ДП
User 4274761
User 150513139
такой вопрос
<img src={'./images/icons/' + props.icon + '.svg'}>
вот если у меня компонента тянет иконки таким образом, можно ли как-то в вэбпаке описать что бы он их находил и тянул в dist?
Я у себя делал в вебпаке алиасы $img для такой статики, т.е. будет <img src={`$img/${props.icon}.svg`} />
07:25:02 ДП
User 150513139
User 4274761
Я у себя делал в вебпаке алиасы $img для такой статики, т.е. будет <img src={`$img/${props.icon}.svg`} />
хм.. не понимаю как это реализовать, в смысле что такое алиасы для вэбпака
07:25:21 ДП
User 4274761
webpack resolve alias
07:25:35 ДП
User 4274761
Ну и лоадеры для svg надо прикрутить
07:26:14 ДП
User 4274761
Я пользовался каким-то react-svg или что-то вроде, оно инлайнило свг в компонент, вроде было норм) но мало пробовал
07:26:32 ДП
User 4274761
Ну и можно просто file-loader
07:27:06 ДП
User 150513139
ага ок посмотрю, спс
07:27:10 ДП
User 52803760
Можно иконки складывать внутрь папки компонента, писать:
<img src={require('./assets/icons/' + props.icon + '.svg')}>

file-loader сложит куда надо и вставит правильный путь
07:28:22 ДП
User 52803760
Но удобнее для иконок запилить отделный компонент, как мне кажется
07:28:54 ДП
User 86922735
парни, пробую на 'whatwg-fetch' перейти, он почему то GET запросы не отправляет...

return (dispatch) => fetch(API_URL, {
    method: 'GET',
    body: query
  })

POST, PATH выполняются, а GET нет, почему?
07:29:25 ДП
User 4274761
Их вообще в network нет?
07:29:52 ДП
User 86922735
нет, GET запросы вообще не появляются
07:30:21 ДП
User 202047214
+1, у себя сделал компонент Icon, собрал свг спрайт из файликов и заинлайнил в начале body, а дальше через use вызывать
07:31:38 ДП
User 150513139
User 202047214
+1, у себя сделал компонент Icon, собрал свг спрайт из файликов и заинлайнил в начале body, а дальше через use вызывать
вот ничего не понял))
07:31:58 ДП
User 150513139
User 52803760
Можно иконки складывать внутрь папки компонента, писать:
<img src={require('./assets/icons/' + props.icon + '.svg')}>

file-loader сложит куда надо и вставит правильный путь
это ближе
07:34:24 ДП
User 52803760
Не надо инлайнить внутрь body, если это не SPA :) Кэш же
07:34:55 ДП
User 52803760
Лучше тогда через url-loader завернуть их в бандл
07:35:47 ДП
User 202047214
Ну у меня spa :) Есть еще вариант юзать use со ссылкой на файл спрайта, но там нужен полифил
07:36:49 ДП
User 52803760
Полифил для IE да, но он вроде маленький и срабатывает только в IE
07:39:30 ДП
User 52803760
Опять же с инлайном в body — html не всегда кэшируется, плюс меняется гет-параметр подключения стиля/скрипта для обхода кэша и весь спрайт тоже грузится заново
07:45:13 ДП
User 4274761
User 202047214
+1, у себя сделал компонент Icon, собрал свг спрайт из файликов и заинлайнил в начале body, а дальше через use вызывать
Нет лоадера, который это делает?)
07:46:03 ДП
User 202047214
Мне стыдно, но я пока впилил сборку спрайта галпом и подключил файлик хардкодом :)
07:57:59 ДП
User 166617281
User 23384802
Во первых чистый redux еще больше требует кода, во вторых в redux ducks можно смело дропать константы и сэкономить еще несколько строк кода. Но проблема остается.
Вот простейший пример - представь тебе надо открыть хеадер и закрыть хеадер. Ты не можешь это хранить в стейте,т.к. данные требуются разным компонентам.
И вот ты пишешь action creator'ы на открытие, на закрытие хедера или toggle, потом слушаешь это в редюсере и меняешь showHeader. далее валидириуешь все экшены в proptypes, достаешь их из this.props. 
В итоге имеет 20-30 строк кода на 2 строки действия
Попробуй это сделать вообще без всего. Нужно будет кидать событие чтоб другие понимали что хедер открыт закрыт, подписаться на них. Ок, глобальный EventManager, RX ? Тоже каша
08:20:33 ДП
User 103130177
было бы круто иметь чатам команду по которой можно например FAQ глянуть
08:20:44 ДП
User 128801948
А если в mobx фильтровать лист из N элементов в рендере, то сколько слушателей будет неявно зарегистрировано? Например отображается по 10 элементов из 10000.
08:25:45 ДП
User 108543364
User 23384802
Во первых чистый redux еще больше требует кода, во вторых в redux ducks можно смело дропать константы и сэкономить еще несколько строк кода. Но проблема остается.
Вот простейший пример - представь тебе надо открыть хеадер и закрыть хеадер. Ты не можешь это хранить в стейте,т.к. данные требуются разным компонентам.
И вот ты пишешь action creator'ы на открытие, на закрытие хедера или toggle, потом слушаешь это в редюсере и меняешь showHeader. далее валидириуешь все экшены в proptypes, достаешь их из this.props. 
В итоге имеет 20-30 строк кода на 2 строки действия
Не надо такие вещи в редаксе хранить. Там нужно хранить только данные которые должны шарится между компонентами
08:27:49 ДП
User 108543364
User 150513139
такой вопрос
<img src={'./images/icons/' + props.icon + '.svg'}>
вот если у меня компонента тянет иконки таким образом, можно ли как-то в вэбпаке описать что бы он их находил и тянул в dist?
Посмотри как у material-UI сделано, они вообще инлайнят иконку
08:29:45 ДП
User 108543364
User 128801948
А если в mobx фильтровать лист из N элементов в рендере, то сколько слушателей будет неявно зарегистрировано? Например отображается по 10 элементов из 10000.
Для 10к элементов используй react-list, а то браузер сдохнет
08:29:55 ДП
User 1340580
User 108543364
Не надо такие вещи в редаксе хранить. Там нужно хранить только данные которые должны шарится между компонентами
Ну он это шарит как раз.
08:30:47 ДП
User 108543364
Шарить состояние UI-компонента? Я в редаксе только бизнес-данные храню
08:31:51 ДП
User 108543364
User 108543364
Шарить состояние UI-компонента? Я в редаксе только бизнес-данные храню
Например нормализованный пользователь, чтобы аватарка во всех компонентах одна и та же была
08:32:28 ДП
User 143141567
User 108543364
Шарить состояние UI-компонента? Я в редаксе только бизнес-данные храню
если где то в другом месте есть кнопка  'скрыть хедер'
08:32:47 ДП
User 1340580
User 143141567
если где то в другом месте есть кнопка  'скрыть хедер'
Да.
08:33:25 ДП
User 152745946
а если сегодня нет, а завтра есть?)
08:39:05 ДП
User 128801948
User 108543364
Для 10к элементов используй react-list, а то браузер сдохнет
отображаться то будет мало элементов после фильтрации, не больше 10, но вот mobx придётся зарегистрировать N+1 слушателей, и каждый раз после инвалидации канселить всех слушателей в текущем контексте и на рендере опять создавать N+1 слушателей и регистрировать.
08:40:12 ДП
User 128801948
или может я просто плохо знаю mobx, и там есть какие-то костыли чтоб разруливать подобные кэйсы )
08:40:56 ДП
User 152745946
а в родителе не вариант подписку сделать?)
08:41:55 ДП
User 128801948
так в родителе и будет делаться подписка
08:47:08 ДП
User 152745946
хотя, если использовать react-list, или аналоги, можно делать подписку и в дочерних элементах. Они же по 10-20шт будут рендриться
08:47:38 ДП
User 128801948
а толку, если от изменения какого-то свойство может получиться что теперь нужно отобразить элемент после фильтрации
08:48:05 ДП
User 128801948
традиционно большинство проблем с производительностью в сложных приложениях на всяких дататэйблах, и традиционно системы с неявными подписками на них сосут
08:52:02 ДП
User 152745946
любой инструмент надо использовать прямыми руками)
08:52:51 ДП
User 128801948
ну так я и спрашиваю, как же такой типичный юзкэйс решать в mobx :)
09:16:52 ДП
User 143141567
Если у меня есть компонент, который обернут в connect, я этот connect получаю через refs в родительском компоненте. Я как то могу достучаться до самого компонента, который обернут в connect?
09:29:34 ДП
User 143141567
Нашел
09:30:31 ДП
User 143141567
При коннекте компонента надо в объекте options передать {withRef: true}, тогда можно получить нужный коммент методом getWrappedInstance
09:33:50 ДП
User 152745946
Народ, что вы думаете про использование контекстов для меню? Вот у меня есть выпадающий список, у него есть разделители и вообще произвольная структура. Нормально, если SelectList будет передавать свой контекст в SelectListItem, чтобы установить текущий активный элемент, например, по ховеру?
09:35:28 ДП
User 202047214
Может есть какое-то элегантное решение без использования редакс стейта? У меня есть компонент лейаута, которому можно передать хтмл для попапа. Они все отрисуются в доме обернув себя в оверлей. И внутри самого попапа мне нужно по скроллу менять его состояние, при этом оверфлоу скролл висит на оверлее и соответственно обработчик должен висеть на нем.
09:40:16 ДП
User 185980313
User 152745946
Народ, что вы думаете про использование контекстов для меню? Вот у меня есть выпадающий список, у него есть разделители и вообще произвольная структура. Нормально, если SelectList будет передавать свой контекст в SelectListItem, чтобы установить текущий активный элемент, например, по ховеру?
Подразумевается передача функции в компонент?
09:40:56 ДП
User 152745946
User 185980313
Подразумевается передача функции в компонент?
да и активный индекс элемента, например
09:42:21 ДП
User 152745946
<SelectList start={0} end={2}>
  <div>
    <SelectListItem index={0} />
    <SelectListItem index={1} />
    <SelectListItem index={2} />
  </div>
</SelectList>
09:42:33 ДП
User 152745946
вот так примерно выглядит API компонентов этих
09:46:07 ДП
User 185980313
Мы используем похожий подход, но тут спорно, хорошо ли это
09:46:41 ДП
User 152745946
согласен, и тут вопрос - какие еще есть варианты?)
09:57:06 ДП
User 39182759
<SelectList start={0} end={2}>
    <SelectListItem/>
    <SelectListItem />
    <SelectListItem/>
</SelectList>

SelectList::render(){
...
{props.children.map((c,i) => React.cloneElement(c, {index: i, isSelected: i==this.state.selected}))}
...
}
10:09:39 ДП
User 152745946
неа, я хочу внутри произвольную верстку
10:09:47 ДП
User 152745946
разделители, футер, например
10:13:02 ДП
User 39182759
<SelectList start={0} end={2}>
    <div>
    <SelectListItem isSelected={this.state.selectedId==1} onClick={e=>this.setState({selectedId: 1})}/>
    <SelectListItem isSelected={this.state.selectedId==2} onClick={e=>this.setState({selectedId: 2})}/>
   </div>
</SelectList>
10:13:57 ДП
User 39182759
и стало быть юзаешь компонент-враппер со стейтом:)
10:14:18 ДП
User 152745946
а это уже слишком явно :(
10:14:30 ДП
User 185980313
можно биндить тогда функцию и подставлять первый аргумент )
10:40:58 ДП
User 55678326
не вижу ничего криминального в связывании компонента с дочерними элементами через контекст
10:41:25 ДП
User 55678326
код получится явнее и прямолинейнее
10:44:40 ДП
User 152745946
API  получается чище внешнее. Но внутри наоборот запутаннее и неявнее все становится)
10:47:04 ДП
User 55678326
не соглашусь, сильно зависит от первоначального языка) в TypeScript с типизацией контекста нет проблем с тем, чтобы найти источник контекста
10:49:42 ДП
User 152745946
а тут дело не в источнике. У тебя контекст - это key-value, то есть вполне возможен конфликт, даже с типизацией
10:50:17 ДП
User 39182759
тесты писать зато на компоненты с моим подходом идеально просто
10:51:19 ДП
User 39182759
ну и вообще SelectListItem'ы могут быть pure functions
10:57:22 ДП
User 23384802
Ребят, никто не видел годный бойлерплейт с mobx, где есть серверный рендеринг?
10:58:01 ДП
User 88403602
mobx намного проще redux'а
10:58:01 ДП
User 88403602
у него только один минус - он стал популярен не так давно и нет норм бойлерплейтов с серверным рендерингом и прочими плюшками (только самому писать).
10:58:24 ДП
User 23384802
да) Но я подумал, пришло время спросить в конфе :D
11:05:29 ДП
User 309556
MobX не нужен когда есть rx  и most
11:22:35 ДП
User 164696606
User 23384802
mobx намного проще redux'а
Да, Дэн Абрамов говорил, что mobx фреймворк для тех кто не осилил redux
11:22:54 ДП
User 185980313
User 164696606
Да, Дэн Абрамов говорил, что mobx фреймворк для тех кто не осилил redux
он не так говорил )
11:23:03 ДП
User 164696606
Он это имел ввиду