@react_js
Nikolai16.07.2018
17:36:02
17:36:02
добрый вечер. нужна помощь сообщества. собираюсь переписывать приложение, ранее написаное на чистом js + jquery. Приложение управляется полностью с клавиатуры (есть и кликабельные элементы, но их по минимуму, и их функционал так же доступен через клавиатуру). То есть кликаем допустим на f1, и появляется модальное окно с инпутами, заполняем их, и далее идет ajax на api. По сути все приложение - это набор модальных окон, вызываем и управляемых клавой. В окнах множество инпутов зависящих друг от друга (заполняемое значение в одном влияет на значение в другом). Переход между инпутами также управляется клавой. Приложение ориентировано на высокую скорость работы с ним, поэтому и было решено работать через клаву.
Сейчас в коде получился полный бардак.
Поэтому и было принято решение привести все в порядок.
И ближе к сути. Поможет ли здесь реакт ? И если да, нужен ли здесь redux ? Точнее, нужно ли вообще для такого приложения единое хранилище?
Для форм рекомендую посмотреть на Redux-Form или Formik. Redux дает прозрачность, можно всегда узнать кто и зачем изменил любое из полей формы, плюс можно получить/задать сотояние любого компонента приложения.Kendr16.07.2018
17:36:28
17:36:28
Redux form забудьте как страшный сон и не имейте такую наглость тащить его в проект
Google
REJUv16.07.2018
17:37:21
17:37:21
Kendr16.07.2018
17:37:23
17:37:23
Daniyar16.07.2018
17:37:38
17:37:38
на самбит кидай это в редукс
вешать на сабмит все не получится. потому как пользователь мгновенно должен видеть результат. допустим заполняем фамилию Иванова, а в поле Пол уже должно заполниться Женский. и таких связанных полей куча
Dmitry16.07.2018
17:38:13
17:38:13
просто на контексте
Artyom16.07.2018
17:38:18
17:38:18
Что с гитхабом...
Kendr16.07.2018
17:38:19
17:38:19
Daniyar16.07.2018
17:38:52
17:38:52
окей, получится куча action'ов. Но видимо в моей случае этого не избежать
либо куча экшенов для redux, либо куча логики будет в представлениях
GoogleArtyom16.07.2018
17:39:34
17:39:34
Kendr16.07.2018
17:39:43
17:39:43
окей, получится куча action'ов. Но видимо в моей случае этого не избежать
Динамически в пейлоаде у объекта определять ключ и кучи экшенов не будетDaniyar16.07.2018
17:40:33
17:40:33
всем спасибо ребята, что откликнулись
Kendr16.07.2018
17:41:23
17:41:23
ок, спасибо, щас почитаю
{ [event.target.name]: event.target.value }
У инпута должен быть определен name, но можно определить его через дополнительный вызов функцииhandleChange('name')
handleChange = (name) => (event) =>
Daniyar16.07.2018
17:42:54
17:42:54
а переход между инпутами через ref сделать? и последний вопрос, для каждого модального окна мне нужно каждый раз переопределять коллбеки для клавиш от f1 до f10. это мне в hoc лучше сделать?
Kendr16.07.2018
17:43:31
17:43:31
а переход между инпутами через ref сделать? и последний вопрос, для каждого модального окна мне нужно каждый раз переопределять коллбеки для клавиш от f1 до f10. это мне в hoc лучше сделать?
Хз, на корневой в app js повесить хенлдер onKeyDown/Press быть можетDaniyar16.07.2018
17:45:02
17:45:02
Переход между инпутами?
мне нужно между инпутами передвигаться стрелками Вверх и Вниз, а так же enter'ом
Yakov16.07.2018
17:50:11
17:50:11
гитхабчик чтоли прилег?
Varyen16.07.2018
17:50:54
17:50:54
да, ему не очень
Kendr16.07.2018
17:51:00
17:51:00
мне нужно между инпутами передвигаться стрелками Вверх и Вниз, а так же enter'ом
Хранить неймы инпутов в массиве, хранить значение актуального инпута, хендлер на лист инпутов для клавиш и вешать фокус на следующий элемент или предудыщий массива
Spaider16.07.2018
17:51:34
17:51:34
>Сейчас в коде получился полный бардак.
>Поможет ли здесь реакт ?
Конечно
ржу) жаль сдесь нет стикеров, в одном чатике видел чуваки смешные фразы приврещали в стикерыDaniyar16.07.2018
17:51:50
17:51:50
Ок, большое спасибо!
Yakov16.07.2018
17:51:51
17:51:51
почему?
Kendr16.07.2018
17:52:47
17:52:47
ржу) жаль сдесь нет стикеров, в одном чатике видел чуваки смешные фразы приврещали в стикеры
Вот как раз здесь впишется функция с дополнительным аргументом, пихать в массив на каждый вызов функции на стадии nameВроде
GoogleKendr16.07.2018
17:53:21
17:53:21
Ну по рефам же фокус ?
Хз псевдорешение только описал
Artem16.07.2018
17:56:46
17:56:46
парни кто нить пробивался в jest enzyme когда тестишь компонент с жесткой привязкой к ридаксу? ищу способ менять просы и стейт, но это работает только для root компонента, а root это connect
One16.07.2018
18:11:48
18:11:48
чтоб не дублировать код
https://screencast.com/t/Mk1SLxCAQFFg
мне в нижний компонент нужны стили верхнего - styled(HeaderLink)` - вот такое я юзать не могу, потому что я уже использовала это когда импортнула компонент из либы
почему нельзя так (ну примерно)?
const NumberForm = CustomInput
если ты что-то присвоила одному массиву/обьъекту, почему не можешь присвоить другому. в твоем коде кстате нет никаких styled(HeaderLink). почему нельзя текстовую песочницу вместо скриншотовRedux form забудьте как страшный сон и не имейте такую наглость тащить его в проект
The best way to manage your form state in Redux.Kendr16.07.2018
18:23:13
18:23:13
Andrew16.07.2018
18:26:45
18:26:45
Redux form забудьте как страшный сон и не имейте такую наглость тащить его в проект
Ты ещё с rff не работал ?
Sergey16.07.2018
18:30:46
18:30:46
я делаю ... пытаюсь сделать чат (react + express)
и хочу чтобы регистрация и авторизация шла как обычно по http с jwt токеном, а когда юзер залогинился открывается сам чат на сокетах
Sergey16.07.2018
18:30:46
18:30:46
постгрес подключил, бд я создал, модели и роуты написал. Могу залогинится ... осталось впихнуть туда сокеты, а как не знаю )) (и походу никто не знает)
Айнур16.07.2018
18:32:50
18:32:50
Ты пишешь так не понятно что никто не знает в чем тебе надо помочь дядь
Kendr16.07.2018
18:34:06
18:34:06
постгрес подключил, бд я создал, модели и роуты написал. Могу залогинится ... осталось впихнуть туда сокеты, а как не знаю )) (и походу никто не знает)
(и походу никто не знает)
Хуя, профессиональный способ тянуть "на слабо"Sergey16.07.2018
18:35:49
18:35:49
я не знаю как это работает и могу глупость писать,
но если я правильно понял, там во всех этих псевдо-примерах сокет соединение создается сразу при старте сервера, Я хочу, что соединение шло после того когда юзер залогинился,
Kendr16.07.2018
18:36:07
18:36:07
я не знаю как это работает и могу глупость писать,
но если я правильно понял, там во всех этих псевдо-примерах сокет соединение создается сразу при старте сервера, Я хочу, что соединение шло после того когда юзер залогинился,
Соединение создается тогда когда ты соединишьОпа-па, вот так поворот
Andrew16.07.2018
18:38:30
18:38:30
че-то ты не знаешь что говоришь)
Тебе показать список багов которые я там нашел ? + документация на уровне пойти и почтить сорцыfrom16.07.2018
18:38:48
18:38:48
Тебе показать список багов которые я там нашел ? + документация на уровне пойти и почтить сорцы
список багов одно, идеология и удобство использования — другоеGooglefrom16.07.2018
18:39:08
18:39:08
я rff не пользовался, но подход одобряю, и он ничего общего с редакс-форм не имеет
Andrew16.07.2018
18:39:47
18:39:47
Ну падажи, с подходом я более чем согласен
На обсерверах все намного приятней работает и тд
Sergey16.07.2018
18:40:22
18:40:22
Соединение создается тогда когда ты соединишь
вот юзер прислал мне email и пароль,
я его авторизовал и послал ему токен, на клиенте открывается компонент чата - в этот момент надо включить сокеты - хз я не могу найти примера.Rustam16.07.2018
18:40:29
18:40:29
я пользовался и rff и formik, для себя выбрал на текущий момент именно rff
Andrew16.07.2018
18:40:57
18:40:57
я пользовался и rff и formik, для себя выбрал на текущий момент именно rff
А насколько глубоко ты туда лазил ?Писал свои мутаторы ?
Rustam16.07.2018
18:41:22
18:41:22
так-как есть подписки, мутаторы, декораторы и нет перерендера всей формы при изменении любого поля
да, но потом нашел другой способ
AdminERROR: S client not available
Andrew16.07.2018
18:41:37
18:41:37
А вот я писал и в доке об этом вообще не единого слова
А если значения поля зависит не от поля в форме вообще
А от другого источника
Andrew16.07.2018
18:43:59
18:43:59
Мне надо заполнить несколько полей
Я заранее не знаю какие поля будут заполнены
Rustam16.07.2018
18:44:45
18:44:45
https://github.com/final-form/final-form#batch-fn---void--void
Andrew16.07.2018
18:47:29
18:47:29
Иии ?
это надо инстанс формы закинуть в компонент
я не говорю что они говно, просто много возможностей и они все не очень хорошо описанны
GoogleAndrew16.07.2018
18:50:50
18:50:50
вот допустим https://github.com/final-form/react-final-form-arrays/issues/35
до сих пор висит
Sergey16.07.2018
18:51:33
18:51:33
(и походу никто не знает)
Хуя, профессиональный способ тянуть "на слабо"
я ж говорил никто не знает )Sergey16.07.2018
18:54:14
18:54:14
С таким посылом конечно не знают
ну а как мне делать, если я даже не знаю кого и как об этом спросить ? )
ArthurSergey16.07.2018
19:07:12
19:07:12
https://socket.io/get-started/chat/
ок они подключили
var io = require('socket.io')(http);
io.on('connection', function(socket){ .... });
я смогу потом сделать это? в обработчике маршрута express ?
Влад16.07.2018
19:07:37
19:07:37
Какие либы сейчас на фронте must have кроме lodash/moment.js?
Andrew16.07.2018
19:07:48
19:07:48
ну в роуте наверное надо писать
Влад16.07.2018
19:07:57
19:07:57
Не фреймворки, а вот подобные библиотечки
Andrew16.07.2018
19:08:06
19:08:06
Andrew16.07.2018
19:08:51
19:08:51
moment - luxon, date-fns или вообще системная дата
lodash я ток тротл и дебаунс от туда брал
RomanAndrew16.07.2018
19:10:05
19:10:05
для всего остального хватает js ну или есть прям так хочешь то бери ramda, учи монады, смотри аниме
flutten есть системный
Открыть в Telegram