Я немного не об этом, меня просто убил подход, что он, вместо всего приложения (там есть шапка, менюшка и прочее), врубает loading. Мне же, хотелось бы сделать так, чтобы шапка и прочее UI было видно, пока данные фетчатся. И я не уверен, в каком месте мне нужно вызвать этот диспатч, в каком "лайфцикле" компонента и прочее...

Я немного не об этом, меня просто убил подход, что он, вместо всего приложения (там есть шапка, менюшка и прочее), врубает loading. Мне же, хотелось бы сделать так, чтобы шапка и прочее UI было видно, пока данные фетчатся. И я не уверен, в каком месте мне нужно вызвать этот диспатч, в каком "лайфцикле" компонента и прочее...

В компоненте который будет показывать данные в ComponenDidMount запустить процедуру, которая данные за фетчит

Я немного не об этом, меня просто убил подход, что он, вместо всего приложения (там есть шапка, менюшка и прочее), врубает loading. Мне же, хотелось бы сделать так, чтобы шапка и прочее UI было видно, пока данные фетчатся. И я не уверен, в каком месте мне нужно вызвать этот диспатч, в каком "лайфцикле" компонента и прочее...

Нормальный подход, ускоряет старт приложения. Запрос данных не дожидаясь готовности UI. Никто тебе не мешает потом уже в UI посмотреть есть ли они реально и нарисовать прогресс бар, если они все еще pending.

Хм. Хорошо. Суть уловил. А теперь еще вопрос... Сейчас я беру эти данные из initialState, то есть они у меня лежат как fixtures. Сейчас у меня есть компонент, который я обернул в compose, в котором я использую connect и branch, и если у меня приходят неправильные данные, я через branch вывожу другой компонет, который говорит о том, что лист пустой... И вот теперь я не совсем понимаю, как мне сделать так, чтобы во время fetching мне выводить какой нибудь спинер, и вот если уж он реально оказался пустым, вывести то, что я вывожу через branch... https://gist.github.com/demidborodin/d9a7f8a09ce81be0a54d55555b96c67a

Нормальный подход, ускоряет старт приложения. Запрос данных не дожидаясь готовности UI. Никто тебе не мешает потом уже в UI посмотреть есть ли они реально и нарисовать прогресс бар, если они все еще pending.

.

Про compose не подскажу, не юзаю его :)

Но по сути, завести в сторе переменную-признак готовности данных, наверное

Хм. Хорошо. Суть уловил. А теперь еще вопрос... Сейчас я беру эти данные из initialState, то есть они у меня лежат как fixtures. Сейчас у меня есть компонент, который я обернул в compose, в котором я использую connect и branch, и если у меня приходят неправильные данные, я через branch вывожу другой компонет, который говорит о том, что лист пустой... И вот теперь я не совсем понимаю, как мне сделать так, чтобы во время fetching мне выводить какой нибудь спинер, и вот если уж он реально оказался пустым, вывести то, что я вывожу через branch... https://gist.github.com/demidborodin/d9a7f8a09ce81be0a54d55555b96c67a

{this.props.fetching && <Spinner />} {!this.props.fetching && <List data={this.props.data} />}

{this.props.fetching && <Spinner />} {!this.props.fetching && <List data={this.props.data} />}

А, и уже в лист дата потом проверку делать, что пришло и в зависимости от этого выводить или показывать "список пуст".

Ну как нибудь так, да

Либо просто проверять на null эти данные, если для них нет начальных значений в сторе.

Понял, принял) Всем спасибо, пойду пробовать) Вроде как понятнее стало)

Но тогда вопрос индикации при повторной загрузке/обновлении. Либо скидывать вручную в null, либо все же завести переменную-флаг

Но тогда вопрос индикации при повторной загрузке/обновлении. Либо скидывать вручную в null, либо все же завести переменную-флаг

Я обычно добавляю fetching и error в сторе. Просто одним data не обойтись.

Имхо

Нужно переренерить 1 компонент из другого, они ничего друг о друге не знаю

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

lifting state up

мне нужно обновить сайдбар через кнопочку

эти компоненты встречаются только в мейн контейнере, который встраивается на страницу

устану поднимать. Лан, сделаю через редакс

устану поднимать. Лан, сделаю через редакс

Гугли react context

Подскажите пожалуйста почему React не может быть рассмотрен как MVC фреймворк. render это View, state это Model, а обработчики событий которые мы определяем это Controller ?

State это не модель, это состояние компонента

Подскажите пожалуйста почему React не может быть рассмотрен как MVC фреймворк. render это View, state это Model, а обработчики событий которые мы определяем это Controller ?

дата флоу односторонний

дата флоу односторонний

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

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

путаешь горячее с холодным

Народ всем привет такая тема есть три компонета 1 главные компонет и 2 внутри него, этим двум я передаю одну и ту же функцмю! Во встором компоненте идет подсчет в 3 действие и вот вопросс я могу вызвать функцию из 2 компонета когда происходит действме в 3?

Да

как не подскажите ?

Или генерить иветы, или проброс функции через пропсы в дочерний компонент

Народ всем привет такая тема есть три компонета 1 главные компонет и 2 внутри него, этим двум я передаю одну и ту же функцмю! Во встором компоненте идет подсчет в 3 действие и вот вопросс я могу вызвать функцию из 2 компонета когда происходит действме в 3?

напиши на русском для начала

напиши на русском для начала

что не понятно то ?

что не понятно то ?

Мб реализуешь логику на верхнем?

как вайрянт тоже можно спасибо

что не понятно то ?

Javascript исполняется в одном потоке, потому все исполняется последовательно. Если компонент 3 подвесит поток намертво, то все повиснет.

Имхо не получится вызвать из второго компонента метод

Javascript исполняется в одном потоке, потому все исполняется последовательно. Если компонент 3 подвесит поток намертво, то все повиснет.

спасибо я же сделал как посоветовали выше

Народ всем привет такая тема есть три компонета 1 главные компонет и 2 внутри него, этим двум я передаю одну и ту же функцмю! Во встором компоненте идет подсчет в 3 действие и вот вопросс я могу вызвать функцию из 2 компонета когда происходит действме в 3?

Можешь, но реакт будет очень громко возмущаться, в случае любых несостыковок

Офк логика вне view — это самый адекватный выход

Можешь, но реакт будет очень громко возмущаться, в случае любых несостыковок

благодарю )

Есть json объект следующего вида: [ {data: "string", anotherData: {however:'lol'}}, ... ]```Мне нужно отрендерить таблицу, делаю следующее: slice - чтобы выбрать объекты от n до m значения (используется для "пагинации") Затем рендерится таблица: ```json2table = json => { const cols = Object.keys(json[0]); const headerRow = cols.map(col => <th key={col}>{col}</th>); const bodyRows = json.map(row => ( <tr key={row}> {cols.map(col => <td key={row[col]}> {row[col]} </td>)} </tr> )); return ( <table> <thead> <tr>{headerRow}</tr> </thead> <tbody>{bodyRows}</tbody> <tfoot> <tr>{headerRow}</tr> </tfoot> </table> ); };Проблема: 1) Во время пагинации (значения от и до в slice меняется и массив режется соответственно этим значениям) окуда-то появляются новые cols, я не пойму, откуда 2) Объект в объекте может содержать не только текст, но и массив, как лучше всего это отображать? [ {date: "string", anotherData: ['string', ...], oneMore:[{omg:'really?'}]} ] Буду рад любой помощи, правки приносят быстрее, чем я успеваю обрабатывать все :( UPD: Возможно-ли, что новые колонки появляются из за slice? Мне кажется именно здесь кроется корень проблемы, чем лучше всего заменить? UPD: Не понимаю, рендерится 30 VNode элементов (tr), в которых 19 childrens (cols/td), но в таблице откуда-то появляются в некоторых строках (tr) лишние столбцы (td) Ну вот и какого.. UPD: Проблема решена Решение: НИКОГДА не забывать смотреть, что передается в key внутри map, потому-что null - вообще не годится как ключ Всем спасибо за внимание и помощь! (Знаю, у вас еще очень рано, спите сладко ❤ )

Доброе утро коллеги! У меня вопрос по редюсерам. Я изменяю стор в зависимости от экшена следующим способом: case FETCH_CONTENT.success: return { ...state, [payload.viewName]: { ...state[payload.viewName], data: [...payload.data], receivedAt: Date.now(), isFetching: false, error: null } }; У контейнера несколько вью, а во вью еще есть разные разделы и данные для них тянутся разными запросами, но обрабатываются одинаковыми экшенами-сагами-редюсерами Как думаете, норм так данные в стор класть или есть варианты получше? Работает прекрасно, но хочется лучше

ERROR: S client not available

Кто-нибудь проходил этот курс http://professionalreactapp.com/ ? Что можете сказать? Может кто подсказать годный курс по react/redux не для самых новичков, чтобы там было про архитектуру, паттерны и т.д?

Доброе утро коллеги! У меня вопрос по редюсерам. Я изменяю стор в зависимости от экшена следующим способом: case FETCH_CONTENT.success: return { ...state, [payload.viewName]: { ...state[payload.viewName], data: [...payload.data], receivedAt: Date.now(), isFetching: false, error: null } }; У контейнера несколько вью, а во вью еще есть разные разделы и данные для них тянутся разными запросами, но обрабатываются одинаковыми экшенами-сагами-редюсерами Как думаете, норм так данные в стор класть или есть варианты получше? Работает прекрасно, но хочется лучше

redux-symbiote

Кто-нибудь проходил этот курс http://professionalreactapp.com/ ? Что можете сказать? Может кто подсказать годный курс по react/redux не для самых новичков, чтобы там было про архитектуру, паттерны и т.д?

если ориентируешься, то проще разбей свой вопрос на подвопросы и каждый из них в отдельности найди в статьях. Если хочется все в одном - не подскажу, но из прочитанного недавно, понравилась книжка Human Redux, там в первом разделе основы, а во втором всякие полезные техники так же, Wes Bos все собирается выпустить свой advanced redux курс

доброе утро, всем.

Кто-нибудь проходил этот курс http://professionalreactapp.com/ ? Что можете сказать? Может кто подсказать годный курс по react/redux не для самых новичков, чтобы там было про архитектуру, паттерны и т.д?

сколько у него цена в итоге? по содержанию выглядит вкусно

реакт только изучаю, и до конца еще не разобрался с props, не подскажите, в чем у меня ошибка тут

реакт только изучаю, и до конца еще не разобрался с props, не подскажите, в чем у меня ошибка тут

текст ошибки-то каков?

реакт только изучаю, и до конца еще не разобрался с props, не подскажите, в чем у меня ошибка тут

Что за idx?:)

Что за idx?:)

индекс, но вот не пофиг? в переменных все ок)

текст ошибки-то каков?

без ошибки. просто компонент не отображается.

без ошибки. просто компонент не отображается.

значит проблема не на скриншоте

индекс, но вот не пофиг? в переменных все ок)

webstrom подсветил - стало интересно?

я понял. спасибо.

сколько у него цена в итоге? по содержанию выглядит вкусно

Спасибо! Wes bosa как-то в самом начале пробовал смотреть, сложно на слух воспринимать. У него есть там субтитры английские, не помнишь? Ценник сам ещё не нашел, но выглядит вкусно, да

Спасибо! Wes bosa как-то в самом начале пробовал смотреть, сложно на слух воспринимать. У него есть там субтитры английские, не помнишь? Ценник сам ещё не нашел, но выглядит вкусно, да

я покупал react beginners, там просто архив был с видео, без сабов.

В бесплатных видео у него вроде есть субтитры) если на courses.wesbos смотреть

В бесплатных видео у него вроде есть субтитры) если на courses.wesbos смотреть

мне тоже кажется были, это и смутило. Думаю в онлайне если смотреть - то будут. Просто если оффлайн скачать - не будет.

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

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

точняк! https://github.com/wesbos/Wes-Bos-Captions /сс @pitsingh

значит проблема не на скриншоте

вы были правы.