ну по сути проект уже есть, поэтому переписать его под редукс думаю будет проще, главное понять ))

может есть возможно проконтролировать или помочь?

правильно архитектуру нарисовать

Не знаю, что за проект, но попробовать можно будет)

смотри сразу mobx. Тем более недавно там вышел очень крупный апдейт

Всем привет! Кто-нибудь может мне помочь разобраться с Redux - капец какой-то, ни как не могу въехать

с redux в последствие одна боль и страдание )

Во первых чистый redux еще больше требует кода, во вторых в redux ducks можно смело дропать константы и сэкономить еще несколько строк кода. Но проблема остается. Вот простейший пример - представь тебе надо открыть хеадер и закрыть хеадер. Ты не можешь это хранить в стейте,т.к. данные требуются разным компонентам. И вот ты пишешь action creator'ы на открытие, на закрытие хедера или toggle, потом слушаешь это в редюсере и меняешь showHeader. далее валидириуешь все экшены в proptypes, достаешь их из this.props. В итоге имеет 20-30 строк кода на 2 строки действия

через полгода работы с редаксом поймешь :D

>далее забыл еще про константы. Тогда точно 20 строк выходит

смотри сразу mobx. Тем более недавно там вышел очень крупный апдейт

а для полного новичка подойдет ? или лучше с redux'а начать ?

mobx намного проще redux'а

у него только один минус - он стал популярен не так давно и нет норм бойлерплейтов с серверным рендерингом и прочими плюшками (только самому писать).

у него только один минус - он стал популярен не так давно и нет норм бойлерплейтов с серверным рендерингом и прочими плюшками (только самому писать).

я с такими понятиями еще не знаком )

возможно и не потребуется никогда)

мне вот показалось, что mobx это какой-то разворот к mvc или чему-то подобному

нет? действительно показалось?

mobx + typescript + vscode - норм заходит)

mobx - позволяет делать биндинг компонент к данным. Каким образом ты будешь строить само приложение уже зависит от тебя. Это может быть mvvm, может быть flux/redux/elm или что тебе задумается

Чтобы перерисовать компоненту с новыми данными: подход реакта this.setState({value: newValue}) подход mobx+react value = newValue

ну не наверно еще и на изучение mobx меня не хватит

хорошо бы redux без болезненно прикрутить, либо отказаться от этой затеи и прокидывать пропсы ))

Кмк лучше не отказываться

такой вопрос <img src={'./images/icons/' + props.icon + '.svg'}> вот если у меня компонента тянет иконки таким образом, можно ли как-то в вэбпаке описать что бы он их находил и тянул в dist?

или я не правильно подхожу к решению?

что бы иконки подтягивались, нужен же file-loader для вебпака

а там можно указать директорию

ну да, только я так понял что он срабатывает для стилей или для статично указаных путей

ой а разве так можно?

ой а разве так можно?

я вот уже начал сомневатся

даже корейцы в чате )

Есть у кого опыт интеграции управления с клавиатуры в приложение на реакте? Примерно такое https://github.com/artpi/Reactive-Compass

такой вопрос <img src={'./images/icons/' + props.icon + '.svg'}> вот если у меня компонента тянет иконки таким образом, можно ли как-то в вэбпаке описать что бы он их находил и тянул в dist?

Я у себя делал в вебпаке алиасы $img для такой статики, т.е. будет <img src={`$img/${props.icon}.svg`} />

Я у себя делал в вебпаке алиасы $img для такой статики, т.е. будет <img src={`$img/${props.icon}.svg`} />

хм.. не понимаю как это реализовать, в смысле что такое алиасы для вэбпака

webpack resolve alias

Ну и лоадеры для svg надо прикрутить

Я пользовался каким-то react-svg или что-то вроде, оно инлайнило свг в компонент, вроде было норм) но мало пробовал

Ну и можно просто file-loader

ага ок посмотрю, спс

Можно иконки складывать внутрь папки компонента, писать: <img src={require('./assets/icons/' + props.icon + '.svg')}> file-loader сложит куда надо и вставит правильный путь

Но удобнее для иконок запилить отделный компонент, как мне кажется

парни, пробую на 'whatwg-fetch' перейти, он почему то GET запросы не отправляет... return (dispatch) => fetch(API_URL, { method: 'GET', body: query }) POST, PATH выполняются, а GET нет, почему?

Их вообще в network нет?

нет, GET запросы вообще не появляются

+1, у себя сделал компонент Icon, собрал свг спрайт из файликов и заинлайнил в начале body, а дальше через use вызывать

+1, у себя сделал компонент Icon, собрал свг спрайт из файликов и заинлайнил в начале body, а дальше через use вызывать

вот ничего не понял))

Можно иконки складывать внутрь папки компонента, писать: <img src={require('./assets/icons/' + props.icon + '.svg')}> file-loader сложит куда надо и вставит правильный путь

это ближе

Не надо инлайнить внутрь body, если это не SPA :) Кэш же

Лучше тогда через url-loader завернуть их в бандл

Ну у меня spa :) Есть еще вариант юзать use со ссылкой на файл спрайта, но там нужен полифил

Полифил для IE да, но он вроде маленький и срабатывает только в IE

Опять же с инлайном в body — html не всегда кэшируется, плюс меняется гет-параметр подключения стиля/скрипта для обхода кэша и весь спрайт тоже грузится заново

+1, у себя сделал компонент Icon, собрал свг спрайт из файликов и заинлайнил в начале body, а дальше через use вызывать

Нет лоадера, который это делает?)

Мне стыдно, но я пока впилил сборку спрайта галпом и подключил файлик хардкодом :)

Во первых чистый redux еще больше требует кода, во вторых в redux ducks можно смело дропать константы и сэкономить еще несколько строк кода. Но проблема остается. Вот простейший пример - представь тебе надо открыть хеадер и закрыть хеадер. Ты не можешь это хранить в стейте,т.к. данные требуются разным компонентам. И вот ты пишешь action creator'ы на открытие, на закрытие хедера или toggle, потом слушаешь это в редюсере и меняешь showHeader. далее валидириуешь все экшены в proptypes, достаешь их из this.props. В итоге имеет 20-30 строк кода на 2 строки действия

Попробуй это сделать вообще без всего. Нужно будет кидать событие чтоб другие понимали что хедер открыт закрыт, подписаться на них. Ок, глобальный EventManager, RX ? Тоже каша

было бы круто иметь чатам команду по которой можно например FAQ глянуть

А если в mobx фильтровать лист из N элементов в рендере, то сколько слушателей будет неявно зарегистрировано? Например отображается по 10 элементов из 10000.

Во первых чистый redux еще больше требует кода, во вторых в redux ducks можно смело дропать константы и сэкономить еще несколько строк кода. Но проблема остается. Вот простейший пример - представь тебе надо открыть хеадер и закрыть хеадер. Ты не можешь это хранить в стейте,т.к. данные требуются разным компонентам. И вот ты пишешь action creator'ы на открытие, на закрытие хедера или toggle, потом слушаешь это в редюсере и меняешь showHeader. далее валидириуешь все экшены в proptypes, достаешь их из this.props. В итоге имеет 20-30 строк кода на 2 строки действия

Не надо такие вещи в редаксе хранить. Там нужно хранить только данные которые должны шарится между компонентами

такой вопрос <img src={'./images/icons/' + props.icon + '.svg'}> вот если у меня компонента тянет иконки таким образом, можно ли как-то в вэбпаке описать что бы он их находил и тянул в dist?

Посмотри как у material-UI сделано, они вообще инлайнят иконку

А если в mobx фильтровать лист из N элементов в рендере, то сколько слушателей будет неявно зарегистрировано? Например отображается по 10 элементов из 10000.

Для 10к элементов используй react-list, а то браузер сдохнет

Не надо такие вещи в редаксе хранить. Там нужно хранить только данные которые должны шарится между компонентами

Ну он это шарит как раз.

Шарить состояние UI-компонента? Я в редаксе только бизнес-данные храню

Шарить состояние UI-компонента? Я в редаксе только бизнес-данные храню

Например нормализованный пользователь, чтобы аватарка во всех компонентах одна и та же была

Шарить состояние UI-компонента? Я в редаксе только бизнес-данные храню

если где то в другом месте есть кнопка 'скрыть хедер'

если где то в другом месте есть кнопка 'скрыть хедер'

Да.

ERROR: S client not available

а если сегодня нет, а завтра есть?)

Для 10к элементов используй react-list, а то браузер сдохнет

отображаться то будет мало элементов после фильтрации, не больше 10, но вот mobx придётся зарегистрировать N+1 слушателей, и каждый раз после инвалидации канселить всех слушателей в текущем контексте и на рендере опять создавать N+1 слушателей и регистрировать.

или может я просто плохо знаю mobx, и там есть какие-то костыли чтоб разруливать подобные кэйсы )

а в родителе не вариант подписку сделать?)

так в родителе и будет делаться подписка

хотя, если использовать react-list, или аналоги, можно делать подписку и в дочерних элементах. Они же по 10-20шт будут рендриться

а толку, если от изменения какого-то свойство может получиться что теперь нужно отобразить элемент после фильтрации

традиционно большинство проблем с производительностью в сложных приложениях на всяких дататэйблах, и традиционно системы с неявными подписками на них сосут

любой инструмент надо использовать прямыми руками)

ну так я и спрашиваю, как же такой типичный юзкэйс решать в mobx :)

Если у меня есть компонент, который обернут в connect, я этот connect получаю через refs в родительском компоненте. Я как то могу достучаться до самого компонента, который обернут в connect?

Нашел

При коннекте компонента надо в объекте options передать {withRef: true}, тогда можно получить нужный коммент методом getWrappedInstance

Народ, что вы думаете про использование контекстов для меню? Вот у меня есть выпадающий список, у него есть разделители и вообще произвольная структура. Нормально, если SelectList будет передавать свой контекст в SelectListItem, чтобы установить текущий активный элемент, например, по ховеру?

Может есть какое-то элегантное решение без использования редакс стейта? У меня есть компонент лейаута, которому можно передать хтмл для попапа. Они все отрисуются в доме обернув себя в оверлей. И внутри самого попапа мне нужно по скроллу менять его состояние, при этом оверфлоу скролл висит на оверлее и соответственно обработчик должен висеть на нем.

Народ, что вы думаете про использование контекстов для меню? Вот у меня есть выпадающий список, у него есть разделители и вообще произвольная структура. Нормально, если SelectList будет передавать свой контекст в SelectListItem, чтобы установить текущий активный элемент, например, по ховеру?

Подразумевается передача функции в компонент?

Подразумевается передача функции в компонент?

да и активный индекс элемента, например

<SelectList start={0} end={2}> <div> <SelectListItem index={0} /> <SelectListItem index={1} /> <SelectListItem index={2} /> </div> </SelectList>

вот так примерно выглядит API компонентов этих

Мы используем похожий подход, но тут спорно, хорошо ли это

согласен, и тут вопрос - какие еще есть варианты?)

<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}))} ... }

неа, я хочу внутри произвольную верстку

разделители, футер, например

<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>

и стало быть юзаешь компонент-враппер со стейтом:)

а это уже слишком явно :(

можно биндить тогда функцию и подставлять первый аргумент )

не вижу ничего криминального в связывании компонента с дочерними элементами через контекст

код получится явнее и прямолинейнее

API получается чище внешнее. Но внутри наоборот запутаннее и неявнее все становится)