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

Морока в том, что redux-form пытается выполнить destroy при unmount компонента. А если указывать флаг, чтоб не дестроил, то приходится очищать вручную. И с предзаполнением были сложности, если значения для ввпадахи например подгружаются динамически

Не надо использовать redux-form, если ты точно не представляешь зачем это тебе нужно. Это я не тебе ^ конкретно, а вообще

Как раз связанные поля на redux-form неплохо получились

Ну потому что redux

Ну и вообще удобно следить в redux extension, что именно там в сторе

Мне бы понять зачем это другим людям нужно?:) Что бы не писать бойлер плейт для контактной формы?)

Не надо использовать redux-form, если ты точно не представляешь зачем это тебе нужно. Это я не тебе ^ конкретно, а вообще

Мне бы понять зачем это другим людям нужно?:) Что бы не писать бойлер плейт для контактной формы?)

хайп

ну если так, то грустно :(

спасибо :)

; не возможно НЕ писать если нет линтера, который спасёт от тупейших ошибок автоинвокации, которые _конечно_ же будут. С линтером все окей, но это значит что ; должно быть в правилах линтинга так как спасает от ошибок. Но тот же Абрамов совсем недавно наезжал на стандарт.js(там эпичный тред), а теперь сам без точек с запятой.

; не возможно НЕ писать если нет линтера, который спасёт от тупейших ошибок автоинвокации, которые _конечно_ же будут. С линтером все окей, но это значит что ; должно быть в правилах линтинга так как спасает от ошибок. Но тот же Абрамов совсем недавно наезжал на стандарт.js(там эпичный тред), а теперь сам без точек с запятой.

esint-config-atomix-react

никаких ошибок не будет

к тому же вебпак ставит ;

Это с линтером. А без него?

к тому же вебпак ставит ;

Js их сам ставит. В том и смысл.

Что плохо, вся redux дока без ;

Если у кого то есть опыт с этими библиотеками, больше чем контактная форма. Поделитесь ощущениями.

Использую react-redux-form. Из плюсов - из этой либы можно не использовать ни одного компонента, только создавать редьюсеры, и руками триггерить в полях ввода соответствующие экшены. Есть все для создания кастомных компонентов, в общем относительно гибкая либа. Состояние отдельного элемента формы разумное (фокус, валидность, и тд). Из минусов (на проекте используются компоненты всех видов, от масок до автокомплита) - если апи компонента не соответствует стандартному onChange/value, а как в react-autosuggest к примеру в отдельных коллбэках меняется значение поля ввода - могут быть трудности с интеграцией

Но это если встроенный control компонент юзать. С другой стороны, без него слишком много работы руками надо делать

Но это если встроенный control компонент юзать. С другой стороны, без него слишком много работы руками надо делать

спасибо:) Наверное я не буду использовать её в своих проектах. У нас очень большой пул компонентов, который меняется от проекта к проекту.

спасибо:) Наверное я не буду использовать её в своих проектах. У нас очень большой пул компонентов, который меняется от проекта к проекту.

попробовать в любом случае стоит, как минимум если писать что-то свое, оттуда можно подчерпнуть много хороших идей)

React final form

попробовать в любом случае стоит, как минимум если писать что-то свое, оттуда можно подчерпнуть много хороших идей)

Это да, мне понравилась реализация валидации у библиотеки :)

всем привет. Вставляю url в styled-components и в итоге выходит вместо /url/url1 -> url.url1 т.е в стилях слеши на точки какого то хрена заменились

babel поддерживает fetch или нужно использовать isomorphic-fetch?

babel поддерживает fetch или нужно использовать isomorphic-fetch?

Нет, не поддерживает. Используй whatwg-fetch.

Нет, не поддерживает. Используй whatwg-fetch.

спасибо

Изоморфик иногда криво в IE работает. А остальные браузеры уже имеют нативную поддержку этой функции.

; не возможно НЕ писать если нет линтера, который спасёт от тупейших ошибок автоинвокации, которые _конечно_ же будут. С линтером все окей, но это значит что ; должно быть в правилах линтинга так как спасает от ошибок. Но тот же Абрамов совсем недавно наезжал на стандарт.js(там эпичный тред), а теперь сам без точек с запятой.

а есть ссылка на тред?

; не возможно НЕ писать если нет линтера, который спасёт от тупейших ошибок автоинвокации, которые _конечно_ же будут. С линтером все окей, но это значит что ; должно быть в правилах линтинга так как спасает от ошибок. Но тот же Абрамов совсем недавно наезжал на стандарт.js(там эпичный тред), а теперь сам без точек с запятой.

Стандарт хорош только тем, что это стандарт. Можно спокойно плюнуть на то, что там идиотские правила.

Единообразие важнее.

Стандарт хорош только тем, что это стандарт. Можно спокойно плюнуть на то, что там идиотские правила.

Эээээ нет. Вот за что их гнобили и продолжают гнобить, так за то что они себя САМИ назвали стандартом. Никакой это не стандарт.

Эээээ нет. Вот за что их гнобили и продолжают гнобить, так за то что они себя САМИ назвали стандартом. Никакой это не стандарт.

Всему своё время)

Есть форк стандарта с семиколонами

И как у него дела?

Его автор вставляет липку на репу в каждый тред про стандарт и семиколоны. Наверное не плохо.

Его автор вставляет липку на репу в каждый тред про стандарт и семиколоны. Наверное не плохо.

ну если ему больше заняться нечем, то я не завидую ему

Всему своё время)

да, потом выпилят из стандарта)

друзья, есть странная проблема с сортировками. есть массив в рендере, и он периодически сортируется по определенному принципу (вверху списка появляется новый элемент). но почему-то первый элемент у меня никогда не меняется, новые элементы добавляются на вторую позицию. render() { var arr = this.arr; return ( <ul> {arr.map( (value, index)=>{ return( <li key={index}> <br /> <a href={value.link}>{value.title}</a> </li> ) })} </ul> ) }

друзья, есть странная проблема с сортировками. есть массив в рендере, и он периодически сортируется по определенному принципу (вверху списка появляется новый элемент). но почему-то первый элемент у меня никогда не меняется, новые элементы добавляются на вторую позицию. render() { var arr = this.arr; return ( <ul> {arr.map( (value, index)=>{ return( <li key={index}> <br /> <a href={value.link}>{value.title}</a> </li> ) })} </ul> ) }

сделай нормальный key

сделай нормальный key

можете подсказать, как лучше?

уникальный

не индекс массива

строку можно

строку можно

интересно, надо попробовать

интересно, надо попробовать

index+title

друзья, есть странная проблема с сортировками. есть массив в рендере, и он периодически сортируется по определенному принципу (вверху списка появляется новый элемент). но почему-то первый элемент у меня никогда не меняется, новые элементы добавляются на вторую позицию. render() { var arr = this.arr; return ( <ul> {arr.map( (value, index)=>{ return( <li key={index}> <br /> <a href={value.link}>{value.title}</a> </li> ) })} </ul> ) }

Сделай из массива массив объектов с полем id. И при добавлении элемента увеличивай id на единицу.

строку можно

та же проблема, дело не в key

та же проблема, дело не в key

Покажи код сортировки.

Покажи код сортировки.

componentWillReceiveProps(nextProps){ if (nextProps.newsList !== undefined){ this.arr = nextProps.newsList; this.arr.sort((a, b)=>{ new Date(a.date) - new Date(b.date); }) return this.arr; } }

componentWillReceiveProps(nextProps){ if (nextProps.newsList !== undefined){ this.arr = nextProps.newsList; this.arr.sort((a, b)=>{ new Date(a.date) - new Date(b.date); }) return this.arr; } }

Какой ты ключ во втором случае использовал?

Какой ты ключ во втором случае использовал?

index+title

разве твоя функция сортировки не возвращает undefined?

погоди, зачем ты в this.arr сохраняешь? реакт не следит за ним

Кстати да.

погоди, зачем ты в this.arr сохраняешь? реакт не следит за ним

я потом передаю в arr, который в рендере

componentWillReceiveProps(nextProps){ if (nextProps.newsList !== undefined){ this.arr = nextProps.newsList; this.arr.sort((a, b)=>{ new Date(a.date) - new Date(b.date); }) return this.arr; } }

Убери фигурные скобки внутри сортировки.

лол

лол

var arr = this.arr; а что?)

var arr = this.arr; а что?)

омфг

резби , вопрос. Могу ли я как-то через екшн применять селектор?

var arr = this.arr; а что?)

Просто говнецо немного. Не обращай внимания.

var arr = this.arr; а что?)

const { arr } = this тогда уж

ERROR: S client not available

componentWillReceiveProps(nextProps){ if (nextProps.newsList !== undefined){ this.arr = nextProps.newsList; this.arr.sort((a, b)=>{ new Date(a.date) - new Date(b.date); }) return this.arr; } }

У тебя return'а нету в стрелке

Тебе сказали фигурные скобки убрать (ретур вычисляемого выражения тогда будет)

если используешь { всегда нужен return, даже если код из 1 строки}

componentWillReceiveProps(nextProps){ if (nextProps.newsList !== undefined){ this.arr = nextProps.newsList; this.arr.sort((a, b)=>{ new Date(a.date) - new Date(b.date); }) return this.arr; } }

Зачем ты в this.arr кладёшь?

Зачем ты в this.arr кладёшь?

А куда?

А куда?

Ну я предполагаю, что он рендерит потом с него

Или не?

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

Ну я предполагаю, что он рендерит потом с него

Верно.

Есть мнение, что рендерить не из state или props - плохая затея

Есть мнение, что рендерить не из state или props - плохая затея

Кешировать через стейт?

Зачем ты в this.arr кладёшь?

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

Кешировать через стейт?

Почему бы нет?

а setState для кого придуман?

Здравствуйте, а подскажите где можно почитать о особенностях разработки front-end на react в high load системах

Здравствуйте, а подскажите где можно почитать о особенностях разработки front-end на react в high load системах

Такой проблемы нет.

Тебе сказали фигурные скобки убрать (ретур вычисляемого выражения тогда будет)

я убрал, пока всё так же

я убрал, пока всё так же

Ну показывай

я убрал, пока всё так же

не надо мутировать какие-то переменные компонента напрямую. Отсортируй массив как надо и сделай setState

Почему бы нет?

Не особо нравится стейт загаживать. Мне кажется, что он должен быть как можно меньше.

Не особо нравится стейт загаживать. Мне кажется, что он должен быть как можно меньше.

Но концептуально, если ты из чего-то рендеришь, надо класть в стейт

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

Выложи компонент со своей сортировкой на codepen или тп что бы можно было поиграть. Я с удовольствием помог бы.

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

Дык это только readonly аргументы.

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

this.state

Ну показывай

componentWillReceiveProps(nextProps){ if (nextProps.newsList !== undefined){ this.arr = nextProps.newsList; this.arr.sort((a, b)=>{ return new Date(a.time) - new Date(b.time); }) } }

componentWillReceiveProps(nextProps){ if (nextProps.newsList !== undefined){ this.arr = nextProps.newsList; this.arr.sort((a, b)=>{ return new Date(a.time) - new Date(b.time); }) } }

Возьми сортировку из какого-нибудь lodash. sort() не создаёт новый объект, а надо бы.

componentWillReceiveProps(nextProps){ if (nextProps.newsList !== undefined){ this.arr = nextProps.newsList; this.arr.sort((a, b)=>{ return new Date(a.time) - new Date(b.time); }) } }

Ну и где ты убрал?

Ну он ретурн вставил

Ну и где ты убрал?

ой, нет, но ретурн же есть

Дык это только readonly аргументы.

Идея в том, что нет гарантии, что компонент обновится. Да и неочевидно, что там пропсы меняются и обновление происходит