Привет всем?

combot.org/chat/-1001032883247

Перешли на реакт с моего толчка

Я очень долго думал, при чём тут толчок

Парни, кто как оптимизирует загрузку приложения?

Я очень долго думал, при чём тут толчок

Так же ?

Видимо, думается лучше)

Парни, кто как оптимизирует загрузку приложения?

reselect юзаю, слежу что бы функции все забинжены были, пропсы без надобности не изменялись. Ну и Perf использую для тестирования.

Загрузка в смысле бутстрап (старт) или нагрузка в процессе работы?

Парни, кто как оптимизирует загрузку приложения?

бандлы\чанки, асинк скрипты, прелоадинг

прелоадинг больше всего интересует) Стартовой лоадер, если есть, делается на чистом JS, а потом в фоне подтягивает картинки, реакт и прочие зависимости? Или все как-то проще/сложнее?

Объясните простому смертному. Какой смысл создавать константу с таким же значением? const GET_PHOTO_REQUEST = 'GET_PHOTO_REQUEST' const GET_PHOTO_SUCCESS = 'GET_PHOTO_SUCCESS'

(redux)

Объясните простому смертному. Какой смысл создавать константу с таким же значением? const GET_PHOTO_REQUEST = 'GET_PHOTO_REQUEST' const GET_PHOTO_SUCCESS = 'GET_PHOTO_SUCCESS'

Чтобы IDE ее автодополняла) => исключаются опечатки + легко переименовать в случае необходимости

Объясните простому смертному. Какой смысл создавать константу с таким же значением? const GET_PHOTO_REQUEST = 'GET_PHOTO_REQUEST' const GET_PHOTO_SUCCESS = 'GET_PHOTO_SUCCESS'

https://stackoverflow.com/questions/34965856/what-is-the-point-of-the-constants-in-redux

Объясните простому смертному. Какой смысл создавать константу с таким же значением? const GET_PHOTO_REQUEST = 'GET_PHOTO_REQUEST' const GET_PHOTO_SUCCESS = 'GET_PHOTO_SUCCESS'

Когда не завезли redux-act

ВСем привет! Неподскажете, почему в react-bootstrap создавая дропдаун, не работает выпадающий список, а кнопка генерится? <DropdownButton bsStyle='default' id='dropdown-btn-menu' className='btn btn-primary dropdown-toggle' data-toggle='dropdown' title='Filter' > <MenuItem key={'1'}>Action</MenuItem> <MenuItem divider={true} /> <MenuItem key={'3'}>Another action</MenuItem> </DropdownButton>

ВСем привет! Неподскажете, почему в react-bootstrap создавая дропдаун, не работает выпадающий список, а кнопка генерится? <DropdownButton bsStyle='default' id='dropdown-btn-menu' className='btn btn-primary dropdown-toggle' data-toggle='dropdown' title='Filter' > <MenuItem key={'1'}>Action</MenuItem> <MenuItem divider={true} /> <MenuItem key={'3'}>Another action</MenuItem> </DropdownButton>

className='btn btn-primary' тебя не смущает?

хз, пока вроде нет

Или ты имеешь в виду, что кнопка есть, а поведение при нажатии не работает?

Именно так

Так react-bootstrap тебе это поведение и не даёт

Ты должен сам писать

js бутстрапа же написан на jQuery

подскажи куда копнуть, или почитать где

Да никуда не надо копать, тебе react-bootstrap не даёт js

Ты должен всю логику сам писать

всеравно не пойму, что тогда делать то, что бы появилось это окошко от дропдауна?

всеравно не пойму, что тогда делать то, что бы появилось это окошко от дропдауна?

Написать руками

Кстати, могу ошибаться, я особо не юзал react-bootstrap

Что значит в тутуриале реакта по крестика-ноликам "Display the move locations in the format "(1, 3)" instead of "6"."

Что значит в тутуриале реакта по крестика-ноликам "Display the move locations in the format "(1, 3)" instead of "6"."

Мы тут все, конечно, знаем, что такое "туториал реакта по крестикам-ноликам"

на офсайте

фейсбука

?

Лично я его ни разу в жизни не видел. Ты не мог бы, блять, предоставить ссылку?

https://facebook.github.io/react/tutorial/tutorial.html#wrapping-up

x, y?

https://facebook.github.io/react/tutorial/tutorial.html#wrapping-up

Предлагают таргетить квадраты не по номеру, а по координатам x, y

Спасибо

Как меняете одно свойство в стейте? Есть ли в ЕС6 ЕС7 другой способ? switch (action.type) { case 'TOGGLE_LEFT_SIDEBAR': return Object.assign({}, state, { leftSidebarFolded: !state.leftSidebarFolded });

Как меняете одно свойство в стейте? Есть ли в ЕС6 ЕС7 другой способ? switch (action.type) { case 'TOGGLE_LEFT_SIDEBAR': return Object.assign({}, state, { leftSidebarFolded: !state.leftSidebarFolded });

es6 spread operator, это во-первых

es6 spread operator, это во-первых

Спредом копировать, а затем менять?

Как меняете одно свойство в стейте? Есть ли в ЕС6 ЕС7 другой способ? switch (action.type) { case 'TOGGLE_LEFT_SIDEBAR': return Object.assign({}, state, { leftSidebarFolded: !state.leftSidebarFolded });

Нет, вместо Object.assign

Что лучше react-toolbox или material-ui?

Как меняете одно свойство в стейте? Есть ли в ЕС6 ЕС7 другой способ? switch (action.type) { case 'TOGGLE_LEFT_SIDEBAR': return Object.assign({}, state, { leftSidebarFolded: !state.leftSidebarFolded });

return { ...state, leftSidebarFolded: !state.leftSidebarFolded, };

Да, собственно, и всё

return { ...state, leftSidebarFolded: !state.leftSidebarFolded, };

спасибо

Иногда проще разбить на N редьюсеров для каждого поля

И скомбайнить

Я так часто делаю

Имели: reducer(state, action) = case action.type of SetA -> { ...state, a: action.payload } SetB -> { ...state, b: action.payload } Clear -> { a: 0, b: 0 } _ -> state Стало a(state, action) = case action.type of SetA -> action.payload Clear -> 0 _ -> state b(state, action) = case action.type of SetB -> action.payload Clear -> 0 _ -> state reducer = combine({ a, b })

На таком простом примере профит конечно не особо очевиден, но такие простые редьюсеры можно еще и генерировать

ребят привет. Попал в руки проект, ни санок, ни саг, а https://github.com/Rezonans/redux-async-connect

что за дичь, кто-то трогал?

у меня было, выпилил сразу

да...тоже показалось редкой штукой) какой опыт был? можешь поподробнее сказать?

Ну у меня эта либа в одном месте только была)

Народ, я в оптимизацию пытаюсь. Мне нужно у одного дочернего компонента выполнить setState. Делать это на родительском и потом прокидывать props получается накладно. Вычитал что через this.props.children можно получить доступ к дочкам https://www.reactenlightenment.com/basic-react-components/6.8.html Ставлю бряк на каком-то родительском обработчике и вижу что this.props.children = undefined.

Как вообще можно из родителя избирательно влиять только на одного ребенка из полусотни?

Как вообще можно из родителя избирательно влиять только на одного ребенка из полусотни?

странное хочешь

Как вообще можно из родителя избирательно влиять только на одного ребенка из полусотни?

Из родителя не нужно влиять на ребёнка

можно например если mobx подрубить

Ну через global state это да

Код драг-н-дропа. Если перемещать тупо HTMLElement ребенка не трогая его пропсы и стейт, все работает быстро, но возможны сайд-эффекты (если кто-то другой в процессе днд изменит пропсы) Если честно делать через родительский setState - десять раз в секунду родитель пересчитывает пропсы всех детей и даже при по сути отсутствии изменений (кроме dx\dy одного ребенка) - тормоза Делать монитор перемещений на ребенке, чтобы там же дергать setState... Это вариант, но придется ему же из родителя спустить кучу колбэков, инкапсуляция ни к черту

сделай шину, прокинь через контекст

ридакс какой в конце концов

Код драг-н-дропа. Если перемещать тупо HTMLElement ребенка не трогая его пропсы и стейт, все работает быстро, но возможны сайд-эффекты (если кто-то другой в процессе днд изменит пропсы) Если честно делать через родительский setState - десять раз в секунду родитель пересчитывает пропсы всех детей и даже при по сути отсутствии изменений (кроме dx\dy одного ребенка) - тормоза Делать монитор перемещений на ребенке, чтобы там же дергать setState... Это вариант, но придется ему же из родителя спустить кучу колбэков, инкапсуляция ни к черту

Debounce может какой-то сделай

Про шину не очень понял. Контекст пугает тем что его официально называют экспериментальным API который в любой момент может стать deprecated. Редакс нужен только для хранения данных приложения и максимум шареных свойств компонент (и то их хранить может общий предок). Дебаунс приводит к тому что палец/мышь и двигаемый элемент начинают жить разной жизнью, move\dragenter\dragleave события будут генериться таки пальцем/мышью.

Ладно. Заведу еще один монитор на детях, все равно логика на других событиях срабатывает (drop/dragenter/dragleave), а dragmove можно и детям отдать, он не влияет ни на что, кроме физического перемещения

Парни, всем привет! Как тестировать дочерние компоненты при помощи jest?

Заранее спасибо

Редаксом нужно пользоваться даже когда вводишь значении в полях формы? setState плохая практика?

Парни, всем привет! Как тестировать дочерние компоненты при помощи jest?

Enzyme

Редаксом нужно пользоваться даже когда вводишь значении в полях формы? setState плохая практика?

Нет, использовать стейт компонента это нормально

Плохая практика - это использовать только редакс, это значит что ты вообще не понимаешь, чем различается стейт приложения и стейт компонента

Окей, понял

Но если удобен именно метод работы с данными в редаксе, то есть hoc withReducer в recompose, свой миниредакс для компонентов (бойлерплейт меньше, так как все локально)

Привет, кто подскажет, почему в инпут не показывается значение value?

Уже решал такую проблему, но забыл как)

Значение изменяеться в state, при помощи default Value

Можно конечно сделать при помощи value и onChange. но хочеться разобраться в проблеме.

Скрин просто 10/10 Где вообще твой input находится?

Хоть бы мышкой навёл туда

понаберут материалов лал

Значение изменяеться в state, при помощи default Value

Дефолт будет работать только при первой отрисовке элемента