@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 24 мая 2016 г.

07:46:39 ДП
User 202047214
В редаксе нельзя подписываться на какой-то фрагмент стора? Судя по тому, что находится в гугле - это нормальная практика следить за всем подряд, но на первый взгляд выглядит как оверхед
07:47:15 ДП
User 23384802
mobx используй)
07:47:52 ДП
User 202047214
С этим могут возникнуть проблемы в виде дедлайна)
07:53:00 ДП
User 108543364
User 202047214
В редаксе нельзя подписываться на какой-то фрагмент стора? Судя по тому, что находится в гугле - это нормальная практика следить за всем подряд, но на первый взгляд выглядит как оверхед
MapStateToProps, фактически работает как подписка на фрагменты
07:57:05 ДП
User 202047214
subscribe позволяет делать dispatch при изменении стейта
07:57:38 ДП
User 108543364
User 202047214
subscribe позволяет делать dispatch при изменении стейта
Не понял)
07:58:35 ДП
User 202047214
У меня форма, при изменении полей я сохраняю их значения в стейт и тут же надо ее засабмитить и получить данные
07:58:51 ДП
User 202047214
и соответственно их тоже в стор положить
07:59:39 ДП
User 202047214
из mapStateToProps я не дотянусь до dispatch, из mapDispatchToProps до стейта, поправь, если что-то не так)
08:02:18 ДП
User 775925
есть еще третий метод в коннекте
08:02:44 ДП
User 775925
mergeProps
08:03:03 ДП
User 775925
в нем есть все (:
08:03:16 ДП
User 202047214
там же только переданные пропсы в нем?
08:03:25 ДП
User 202047214
ни диспатча, ни стейта всего
08:04:43 ДП
User 775925
ничто ведь не мешает выделить нужные кусочки из стейта и методы, и передать их в mergeProps
08:05:52 ДП
User 202047214
ох и да) пальцы заплетаются, когда надо диспатч передавать в mergeProps )
08:06:05 ДП
User 202047214
попробую)
08:09:49 ДП
User 108543364
User 202047214
У меня форма, при изменении полей я сохраняю их значения в стейт и тут же надо ее засабмитить и получить данные
Делаешь сабмит, передаешь в этот сабмит локальный переменные стейта компонента, сабмит дергает dispatch, экшены пишут в стор через редьюсеры. Твоя задача решается классическим redux-way
08:10:38 ДП
User 202047214
Ну вот меня интересует пункт - делаешь сабмит)
08:11:20 ДП
User 202047214
Хочется сабмит не руками делать для каждого поля
08:12:05 ДП
User 108543364
Так сделай экшен, который будет принимать тип и значение поля
08:12:17 ДП
User 108543364
Или как там у тебя
08:13:08 ДП
User 202047214
И положить его в каждый компонент с филдом?)
08:13:32 ДП
08:13:39 ДП
User 108543364
Не понял )
08:14:13 ДП
User 202047214
Я не понимаю где тогда экшн диспатчить
08:14:53 ДП
User 202047214
В идеале хотелось, чтобы в одном месте этот диспатч лежал и тригерился при изменении определенных полей стейта
08:15:18 ДП
User 108543364
У тебя каждый филд - отдельный компонент ?
08:16:41 ДП
User 202047214
да, у каждого своя логика и формат их фрагмета в стейте
08:16:53 ДП
User 202047214
фрагмента*
08:17:40 ДП
User 202047214
какие-то саджестят, какие-то панельки открывают с дополнительным функционалом и т.д.
08:18:11 ДП
User 108543364
Ну это хреново)
08:18:27 ДП
08:19:41 ДП
User 108543364
Получается твои компоненты не реюзабельны
08:20:41 ДП
User 202047214
Ну у меня есть глупые реюзабельные компоненты, которым пофиг на стейт вообще. А контейнеры завязаны на определенные кейсы.
09:21:48 ДП
User 117372400
Вчера мне никто так и не подсказал как переопределить имена классов в Draft.js, так что если вдруг что вспомниться прошу сюда: https://github.com/facebook/draft-js/issues/413
github.com/facebook/draft-js/issues/413
src/component/base/DraftEditor.react.js uses a special class names, for example: DraftEditor/root DraftEditor/editorContainer public/DraftEditor/content etc But how we can see at facebook.com, ...
09:28:23 ДП
User 63637623
User 117372400
Вчера мне никто так и не подсказал как переопределить имена классов в Draft.js, так что если вдруг что вспомниться прошу сюда: https://github.com/facebook/draft-js/issues/413
github.com/facebook/draft-js/issues/413
src/component/base/DraftEditor.react.js uses a special class names, for example: DraftEditor/root DraftEditor/editorContainer public/DraftEditor/content etc But how we can see at facebook.com, ...
у фейсбука в общем-то легко может быть своя система сборки/парсинга, которая модифицирует именна классов и которая к draft.js никак не относится.

Если после сборки проекта — https://github.com/facebook/draft-js#examples — ты получаешь на выходе неизменённые классы, значит так и есть, переименование происходит не внутри этого модуля. Что логично и ожидаемо.

А о том, как в целом такие вещи делаются, вчера писали уже.
09:32:20 ДП
User 128823685
я так и не понял зачем их переопределять
09:32:46 ДП
User 117372400
Сборка (draft-js$ npm run build) собирает просто в один файл, имена классов при этом не меняются
09:33:17 ДП
User 117372400
Чтобы иметь несколько по-разному стилизованных редакторов на одной странице же
09:33:33 ДП
User 128823685
конечно не меняются! ты же собираешь build либы... а рандомные classNames - результат сборки проекта, использующего эту либу
09:35:05 ДП
User 128823685
когда ты делаешь nom run build ты получаешь сбилденную либу, на этом этапе имена классов должны остаться оригинальными... она же не знает как будет использоваться, вдруг её через script подключат и всё
09:35:45 ДП
User 117372400
так вопрос в том что нужно настроить в процессе сборки проекта, чтобы не менять оригинальные файлы либы
09:36:00 ДП
User 128823685
а, я понял
09:36:45 ДП
User 128823685
а у тебя сейчас css modules как я понимаю используются?
09:37:07 ДП
09:37:21 ДП
User 117372400
а они как я понял переопределяют этот файл во время сборки проекта: https://github.com/facebook/fbjs/blob/master/src/__forks__/cx.js#L12-L27
github.com/facebook/fbjs/blob/master/src/__forks__/cx.js
fbjs - A collection of utility libraries used by other Facebook JS projects.
09:39:32 ДП
User 128823685
{
        test: /\.css$/,
        exclude: /node_modules/,
        loader: "style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]"
      },
      {
        test: /\.css$/,
        include: /node_modules/,
        loader: "style!css-loader"
      },
09:40:10 ДП
User 128823685
ну или что-то в этом роде, создай для  node_modules отдельное правило
09:41:13 ДП
User 117372400
Со стилями нет проблем, добавили лоадер и готово, как заставить Draft.js использовать измененные имена классов)
09:42:46 ДП
User 128823685
видимо никак, ты же сам дал ссылку... они в коде прописаны
09:43:24 ДП
User 117372400
прописаны, но используют cx.js)
09:43:32 ДП
User 128823685
ну а если обернуть один эдитор в div.theme1 другой в div.theme2 и пиши в стилях как хочешь
09:43:59 ДП
User 128823685
переопределяй в зависимости от className родителя
09:44:29 ДП
User 63637623
User 117372400
Чтобы иметь несколько по-разному стилизованных редакторов на одной странице же
гм, а как насчёт по-старинке дать родителям разные имена классов и на основе этого "несколько по-разному" стилизовать редактор? :)
09:44:38 ДП
User 63637623
User 128823685
ну а если обернуть один эдитор в div.theme1 другой в div.theme2 и пиши в стилях как хочешь
да, вот так))
09:44:39 ДП
User 128823685
.theme1
  .DraftEditor/root
      ...
09:44:40 ДП
User 117372400
специфичностью селекторов то понятно что можно так сделать, хотелось бы узнать как они это делают на том же facebook.com
facebook.com
Create an account or log in to Facebook. Connect with friends, family and other people you know. Share photos and videos, send messages and get updates.
12:06:48 ПП
User 4627228
Парни, какие есть способы автоматизированного тестирования UI (можно даже без привязки к React) в web? Что есть для тестов даже на mobile devices и IE8?
12:09:25 ПП
User 31454711
selenium же
12:11:08 ПП
User 31454711
и gemini чтобы совсем круто было
12:11:33 ПП
User 31454711
https://github.com/gemini-testing/gemini
github.com/gemini-testing/gemini
Utility for regression testing of web pages using screenshots - gemini-testing/gemini
12:12:57 ПП
User 3681453
про gemini Миша Ларченко рассказывал на Frontend Union Conf, они как раз им реакт компоненты тестируют
12:13:51 ПП
User 3681453
хм, или не gemini у них, но про тестирование UI он точно рассказывал)
12:14:09 ПП
User 31454711
а мобилки и ie - selenium на browserstack можно поднять
12:14:22 ПП
User 31454711
Денис, всё верно, про гемини.
12:14:32 ПП
User 89478045
Nightwatch.js, тот же селениум и с browser stack  работает
12:14:56 ПП
User 153807368
да, у каждого своя логика и формат их фрагмета в стейте
12:14:56 ПП
User 153807368
фрагмента*
12:14:56 ПП
User 153807368
какие-то саджестят, какие-то панельки открывают с дополнительным функционалом и т.д.
12:15:17 ПП
User 153807368
у меня такая же ситуация, на формах куча самых разнообразных компонентов в разных вариациях
использую https://github.com/jquense/react-formal
довольно простой подход, компоненты оборачиваются в <Form.Field />, в каждый передается свой field name / value / onChange обработчик
вся обработка валидации/изменения значений/сабмита централизованно происходит в главном контейнере который рендерит <Form />
github.com/jquense/react-formal
Sophisticated HTML form management for React. Contribute to jquense/react-formal development by creating an account on GitHub.
12:16:56 ПП
User 31454711
найтвоч говорят хуже селениума, хотя название - торт.
12:17:19 ПП
User 3681453
https://github.com/galenframework/galen
github.com/galenframework/galen
galen - Layout and functional testing framework for websites
12:17:35 ПП
User 89478045
User 31454711
найтвоч говорят хуже селениума, хотя название - торт.
Почему, не говорят?
12:18:46 ПП
User 4627228
User 31454711
а мобилки и ie - selenium на browserstack можно поднять
Вот это уже хорошо :)
12:19:01 ПП
User 4627228
У нас BS никаких альтернатив?
12:21:29 ПП
User 38228256
Скажите пожалйста, а в react-router физически возможно передавать динамические пропсы в компонент Route? Или я вообще неправильно подхожу к решению вопроса?
12:21:51 ПП
User 38228256
в оф доке ничего не могу найти, в гугле информация противоречивая
12:24:59 ПП
User 38228256
вот такое только нашел, выглядит так себе
12:28:13 ПП
User 128823685
опиши use case
12:29:35 ПП
User 38228256
делаю совсем простой сайт, нужно зашарить между несколькими компонентами один объект, не хочу использовать redux/flux (слишком сложно для такой мелочи)
12:30:12 ПП
User 38228256
то есть объект — в стейте родительского компонента, в котором определяю руты
12:32:49 ПП
User 90246751
Может я чего-то непонимаю - но зачем это делать так?
12:32:52 ПП
User 156544965
по-хорошему через пропсы пробросить (cloneElement / createElement), но можно и через контекст вроде
12:32:53 ПП
User 128823685
по сути когда ты описываешь иерархию из <Route component={Cmp1} /> компонентов, на деле они превращаются в иерархию из Cmp1  компонентов. сам Cmp1 ты рендеришь через cloneElement(this.props.children)
12:33:07 ПП
User 128823685
и вторым параметром можешь туда передать всё что угодно  cloneElement(this.props.children, {dict: this.props.dict})
12:33:08 ПП
User 90246751
Почему просто не сделать объект в файле и потом менять его свойства?
12:33:43 ПП
User 156544965
глобальные объекты порой сложно тестировать)
12:33:50 ПП
User 90246751
Системы типа commonJs все равно всегда отдают ссылку на объект, экспортированный в перый раз
12:34:01 ПП
User 38228256
а, ну кстати да
12:34:08 ПП
User 38228256
я пожалуй усложнил, спасибо
12:37:03 ПП
User 38228256
@sbekrin тут настолько мелкий проект, что о тестировании особо думать не нужно
12:37:14 ПП
12:54:46 ПП
User 39182759
я для мелких проектов люблю недофлакс юзать:
http://codepen.io/anon/pen/oxKVMp
codepen.io/anon/pen/oxKVMp
...
12:55:33 ПП
User 39182759
но это должен быть реально маленький проект:)
01:20:24 ПП
User 153807368
User 38228256
делаю совсем простой сайт, нужно зашарить между несколькими компонентами один объект, не хочу использовать redux/flux (слишком сложно для такой мелочи)
роутер не нужен
нужно синглтон хранилище
01:21:18 ПП
User 38228256
да-да, уже все сделал и все работает, спасибо!
01:22:15 ПП
User 38228256
вот блин как исковеркало мышление привычка работать с флаксоредаксами, с ходу самое простое решение в голову не пришло)
01:23:54 ПП
01:25:06 ПП
User 4627228
User 38228256
делаю совсем простой сайт, нужно зашарить между несколькими компонентами один объект, не хочу использовать redux/flux (слишком сложно для такой мелочи)
Redux простой, как три рубля :) Что там сложного?
01:25:34 ПП
User 4627228
Вы сейчас навтыкаете своих недофлаксов, а людям потом после вас поддерживать :\
01:26:06 ПП
User 38228256
одно шаримое между компонентами значение
01:26:15 ПП
User 38228256
проект будет работать один день
01:26:31 ПП
User 38228256
если вдруг понадобится шарить два и больше — поменяю или другой поменяет на редакс
01:26:39 ПП
User 38228256
весь проект — 250 строчек
01:26:46 ПП
User 38228256
не считая бэка
01:27:59 ПП
User 38228256
так что я не вижу проблемы в этом
01:28:43 ПП
User 38228256
я вообще вначале думал без реакта делать, на html+jquery, но в итоге решил, что все-таки так будет проще, с учетом задач
01:28:51 ПП
01:29:01 ПП
User 38228256
html+vanilla
01:29:03 ПП
User 38228256
точнее
01:29:59 ПП
User 4627228
) Палишься
01:30:29 ПП
User 38228256
в чем же?)
01:30:32 ПП
01:30:33 ПП
User 38228256
ну да
01:30:34 ПП
01:30:35 ПП
User 38228256
по фрейду
01:30:39 ПП
User 775925
кто сказал jQuery? JO_O
01:32:36 ПП
02:03:37 ПП
User 143141567
User 38228256
проект будет работать один день
это что за проект такой?)
02:05:51 ПП
User 4274761
промо-страница какая-нибудь небось
02:06:12 ПП
User 143141567
бинарные опционы:D
02:13:41 ПП
User 1340580
User 775925
кто сказал jQuery? JO_O
А что не так?
02:15:19 ПП
User 39182759
User 4627228
Вы сейчас навтыкаете своих недофлаксов, а людям потом после вас поддерживать :\
сейчас есть куча проектов на backbone, и тоже поди заставь кого их поддерживать
02:19:22 ПП
User 56924675
а чо с backbone нет?) оттуда между прочим jquery выпили )
02:19:32 ПП
02:20:05 ПП
User 4274761
User 1340580
А что не так?
не нужен
02:20:06 ПП
02:20:25 ПП
User 171203444
бэкбон без джиквери? Риалли?
02:21:08 ПП
User 39182759
http://backbonejs.org/#View-$el как так?
02:21:51 ПП
User 39182759
https://github.com/jashkenas/backbone/wiki/using-backbone-without-jquery
github.com/jashkenas/backbone/wiki/using-backbone-without-jquery
backbone - Give your JS App some Backbone with Models, Views, Collections, and Events
07:22:45 ПП
User 117372400
Получил ответ по поводу имен классов в Draft.js: https://github.com/facebook/draft-js/issues/413#issuecomment-221361064
github.com/facebook/draft-js/issues/413
src/component/base/DraftEditor.react.js uses a special class names, for example: DraftEditor/root DraftEditor/editorContainer public/DraftEditor/content etc But how we can see at facebook.com, ...
07:23:36 ПП
User 162236709
Best OS family

GNU/Linux – 80
👍👍👍👍👍👍👍 40%

OS X – 62
👍👍👍👍👍 31%

MS Windows – 37
👍👍👍 19%

BSD – 5
▫️ 3%

Haiku – 4
▫️ 2%

GNU/Hurd – 3
▫️ 2%

CP/M – 2
▫️ 1%

NeXTSTEP – 2
▫️ 1%

OS/2 – 2
▫️ 1%

BeOS – 2
▫️ 1%

👥 199 people voted so far.
07:36:59 ПП
User 309556
пролистал тут ваш чятик
изоморфный релей не нужен
мобикс норм
бекбон збс
07:37:25 ПП
User 309556
винда фтв
07:55:54 ПП
User 104477
User 3681453
хм, или не gemini у них, но про тестирование UI он точно рассказывал)
Galen
08:00:17 ПП
User 164870167
Чуваки, сори, что опять с таким вопросом, может кто-то посоветовать на гитхабе опенсорс проект (было бы круто, если бы это был какой-то небольшой сайт по типу инет-магаза) у которого можно было бы подсмотреть всякие бест практисес, структуру приложения и т.д. Хотелось бы, что б в нём юзался redux. Смотрю на этот проджект пока что https://github.com/lynndylanhurley/redux-auth, может кто-то ещё что-то подскажет?
github.com/lynndylanhurley/redux-auth
Complete token authentication system for react + redux that supports isomorphic rendering. - lynndylanhurley/redux-auth
08:02:36 ПП
User 185980313
музыкальное приложение видел ?
08:04:14 ПП
08:05:29 ПП
User 185980313
https://github.com/andrewngu/sound-redux
github.com/andrewngu/sound-redux
A Soundcloud client built with React / Redux. Contribute to andrewngu/sound-redux development by creating an account on GitHub.
08:09:07 ПП
User 4627228
Супер
08:17:08 ПП
User 164870167
User 185980313
https://github.com/andrewngu/sound-redux
github.com/andrewngu/sound-redux
A Soundcloud client built with React / Redux. Contribute to andrewngu/sound-redux development by creating an account on GitHub.
100/10, спасибо огромное
08:19:47 ПП
User 4627228
Кажется я снова вернулся к SoundCloud от MixCloud :)