пишу коды на css

Всем привет. Наверное мой вопрос уже много раз поднимался. Но все же. Есть компонента, у нее в componentWillMount и в componentWillReceiveProps код, который смотрит на props.params.userId и стреляет экшен на фетчинг юзера. Потом экшен грузит юзера и он появляется в сторе. Проблема в том, что этот экшен успевает выстрелится много раз. Я понимаю, что здесь 2 проблемы. Первая это то, что не нужно в componentWillReceiveProps делать таих вещей, но где тогда? как контейнер должен отреагировать на то, что в params появился новый юзер и зафетчить его? Вторая это то, что нужно как-то помечать юзера как того, который загружается. Как мне лучше всего быть в этой ситуации? Спасибо

debounce?

Всем привет. Наверное мой вопрос уже много раз поднимался. Но все же. Есть компонента, у нее в componentWillMount и в componentWillReceiveProps код, который смотрит на props.params.userId и стреляет экшен на фетчинг юзера. Потом экшен грузит юзера и он появляется в сторе. Проблема в том, что этот экшен успевает выстрелится много раз. Я понимаю, что здесь 2 проблемы. Первая это то, что не нужно в componentWillReceiveProps делать таих вещей, но где тогда? как контейнер должен отреагировать на то, что в params появился новый юзер и зафетчить его? Вторая это то, что нужно как-то помечать юзера как того, который загружается. Как мне лучше всего быть в этой ситуации? Спасибо

почему он у тебя выстреливается много раз?

сравнивай новые и старые параметры в componentWillReceiveProps

ну да, можно проверить новый и старый айди юзера, и фетчить только если они разные

Кстати, насчёт хантинга, у меня тут в дельта окрестности очень агрессивно пылесосит Атлассиан. Задело кого?

в дельта?

в дельта?

Δ-окрестность

Кстати, насчёт хантинга, у меня тут в дельта окрестности очень агрессивно пылесосит Атлассиан. Задело кого?

Меня не задело, я сижу в эпсилон-окрестности

почему он у тебя выстреливается много раз?

Получается, что там паралельно меняется состояние стора ( подгружается другая инфа асинхронно) , контейнер подписан на это состояние и у него выстреливает componentWillReceiveProps

А код в componentWillReceiveProps ничего не знает про то, ресурс загружен или нет. И повторно дергает экшен

у меня колллега-джавист в атлассиан в прошлом году уехал

но он вроде сам инициативу проявил

А код в componentWillReceiveProps ничего не знает про то, ресурс загружен или нет. И повторно дергает экшен

ты можешь проверять пропсы

Да, но что я там могу проверить? Я там вижу только props.params.userId

Да, но что я там могу проверить? Я там вижу только props.params.userId

void componentWillReceiveProps( object nextProps )

Да, но что я там могу проверить? Я там вижу только props.params.userId

текущие пропсы и nextprops

но компонента ничего не знает про юзера. Она не подписана на него.

я не понимаю короче

получается, мне нужно чтобы компонента или проверяла, что user существует в сторе и не вызывала экшен или помечать юзера как loading и чтобы экшен не выстреливал загрузку внутри себя

ну хоть так

У меня есть компонента AppLayout. она смотрит, что params.userId от раутера получена и триггерит загрузку юзера.

Это корневой лэйаут

Я бы с удовольствием засунул бы загрузку юзера еще куда-нибудь выше

Я бы с удовольствием засунул бы загрузку юзера еще куда-нибудь выше

redial и засунешь в роут

redial и засунешь в роут

https://github.com/ifokeev/ticket-api/blob/master/client/src/components/pages/TicketPage.jsx#L28

Воу! https://github.com/markdalgleish/redial . Это то что нужно

Спасибо огромное :)

смотри код

Да, вижу. То что мне и нужно. Подгрузить юзера перед тем как все отрендерится.

Спасибо :) !

А тут есть активность? Кто как решает такую проблему: Когда рендеринг делается на клиенте, вместе с <div id=«app»></div> нужно отправлять данные для рендеринга. Я это делаю путём прогона их через JSON.stringify и помещения в layout-шаблон в <script>window.app = {data}</script> Вроде ок, но проблема дальше, Когда добавляется рендеринг на сервере, то получается дублирование пересылаемых по каналу данных

O_o

А тут есть активность? Кто как решает такую проблему: Когда рендеринг делается на клиенте, вместе с <div id=«app»></div> нужно отправлять данные для рендеринга. Я это делаю путём прогона их через JSON.stringify и помещения в layout-шаблон в <script>window.app = {data}</script> Вроде ок, но проблема дальше, Когда добавляется рендеринг на сервере, то получается дублирование пересылаемых по каналу данных

https://github.com/ifokeev/ticket-api/blob/master/client/src/utils/ClientRender.jsx#L105

А тут есть активность? Кто как решает такую проблему: Когда рендеринг делается на клиенте, вместе с <div id=«app»></div> нужно отправлять данные для рендеринга. Я это делаю путём прогона их через JSON.stringify и помещения в layout-шаблон в <script>window.app = {data}</script> Вроде ок, но проблема дальше, Когда добавляется рендеринг на сервере, то получается дублирование пересылаемых по каналу данных

https://github.com/ifokeev/ticket-api/blob/master/client/src/server.js#L30 JSON.stringify у тебя сломается рано или поздно

Или например такая проблема: нужно в тексте заменить переносы строки на <br/> но так сделать нельзя и приходится оборачивать в div’ы, что сильно увеличивает размер трафика и захламляет content.split(/\n/).map(line => <div>{line}</div>) может быть есть хитрости как это обойти?

оно незначительно увеличивает размер трафика

вопрос по организации redux-лапши ducks использует кто-нибудь? а если нет, то почему? может какую особую организационную структуру реализовали у себя? https://medium.com/@scbarrus/the-ducks-file-structure-for-redux-d63c41b7035c#.ilcano822 https://github.com/erikras/ducks-modular-redux

Или например такая проблема: нужно в тексте заменить переносы строки на <br/> но так сделать нельзя и приходится оборачивать в div’ы, что сильно увеличивает размер трафика и захламляет content.split(/\n/).map(line => <div>{line}</div>) может быть есть хитрости как это обойти?

Если это надо тебе только для того, чтобы в html сохранить переносы, то white-space: pre-wrap; тебе поможет

И ничего не надо изменять в исходном тексте

ребят, а как правильно анимировать добавление в начало списка? пробую сделать с react-transition-group - работает только если давать элементам списка рандомный key

Вторую проблему решил с помощью createElement: React.createElement('div',null, poem.content.split(/\n/).reduce((a, l) => [...a, l, <br/>],[]))

Вторую проблему решил с помощью createElement: React.createElement('div',null, poem.content.split(/\n/).reduce((a, l) => [...a, l, <br/>],[]))

Ты видел мое сообщение? ) Одной строчкой в css. Если конечно я правильно понял твою задачу

нет, посмотрю на телефоне, telegram for mac видимо глючит(

Кстати, насчёт хантинга, у меня тут в дельта окрестности очень агрессивно пылесосит Атлассиан. Задело кого?

я там 4 этапа собеса прошел в Сидней, но потом чот я забросил это дело

нет, css-решение не подходит, я знаю о нём

нет, посмотрю на телефоне, telegram for mac видимо глючит(

юзай на маке telegram desktop

Австралия не нужна

версия для мака говно

я делаю жёсткую минификацию html

но это давно было и не на реакт

хорошо)

https://github.com/ifokeev/ticket-api/blob/master/client/src/server.js#L30 JSON.stringify у тебя сломается рано или поздно

> JSON.stringify у тебя сломается рано или поздно

почему? там json без html

почему? там json без html

легче ж заюзать сериалайз

в каком смысле легче? )

в каком смысле легче? )

в смысле что в будущем не сломается

друзься, а есть бабел лоадер что бы превращать yaml или json в react компоненты? Вместо jsx. Было бы интересно глянуть как это выглядело бы

json в react может БЭМ превращать, но это ещё не выпущено в опенсорс, но будет вот-вот

ну это наверно как-то завязано на всю это бэм методологию. Мне интересно просто что бы вместо XML based был YAML based синтаксис

не встречал, но ты можешь написать свой конвертор в React.createEvement, кажется не очень сложная задача если не учитывать разные корнер-кейсы

я понимаю что его можно написать))

А это никто проблемой не считает? > Когда добавляется рендеринг на сервере, то получается дублирование пересылаемых по каналу данных получается и в window.INITIAL_STATE добавляются данные и на странице их отображение.

ERROR: S client not available

А это никто проблемой не считает? > Когда добавляется рендеринг на сервере, то получается дублирование пересылаемых по каналу данных получается и в window.INITIAL_STATE добавляются данные и на странице их отображение.

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

если у тебя уже есть window.INITIAL_STATE, то второй раз оно не грузится

Да, но я не про повторную загрузку INITIAL_STATE, а про первичную. Думаю не делать передачу INITIAL_STATE если рендеринг делается на сервере

почитай код который я кинул

имеется ввиду, что в html странице, которую отдает сервер есть html с данными и json с ними же

да

я ему это кинул второй ссылкой

а если его не передать, то react не сможет подхватить рендеринг

воот, значит нужно не делать начальный рендеринг

тогда не будет событий

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

какие события?

ну там onClick например

ты в компоненте делаешь онклик при маунте?

при рендере

биндишь онклик или дергаешь онклик?

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

получается что в html который приходит с сервера содержится отрендеренный html с данными и плюс к этому еще json с теми же данными для первоначального рендеринга на клиенте

сложна и малопохоже на правду

пусть сережа рассудит

читай проект короче все равно там все это есть

В проекте по ссылке ровно такая реализация

Если не передавать initial state, то реакт перерисует все заново, придется данные перезапрашивать и все такое

На самом деле это дублирование - не такой большой оверхед, особенно если врубить гзип

Вопрос знатокам #Redux, почему если я в connect использую ownProps, то этот компонент всегда будет не pure?

if (pure && !this.doStatePropsDependOnOwnProps) { var haveStatePropsChanged = tryCatch(this.updateStatePropsIfNeeded, this); if (!haveStatePropsChanged) { return; } if (haveStatePropsChanged === errorObject) { this.statePropsPrecalculationError = errorObject.value; } this.haveStatePropsBeenPrecalculated = true; } кусок кода из react-redux

Вопрос скорее идеологический, т.к. видно что это было сделано специально

# Подумал как можно решить проблему с дублированием: заменять большие объёмы данных на специальную заглушку, которую должен начать понимать реакт, что-то типа new React.KeepContent() И клиентская перерисовка произойдёт как обычно но представления заглушенных данных не будут перерисованы Но потребуется учесть в коде что может придти заглушка, если перед отрисовкой в render делается какое-то преобразование, например если данные это текст, и в него вставляется br-ки как во втором моём кейсе

Gzip не поможет, если в представлении данные очень отличаются от оных в сыром сериализованном виде

А данных очень много, например статьи/тексты/книги как у меня

Вопрос знатокам #Redux, почему если я в connect использую ownProps, то этот компонент всегда будет не pure?

Проблема решена, надо было использовать такой connect @connect( (_state, ownProps) => (state) => { const comment = state.entities.comments[ownProps.commentId] const user = state.entities.users[comment.user] return { comment, user } }, commentActions )