React и Redux 3. Структура приложения, combineReducers, контейнеры.

Предыдущее видео: • React и Redux 2. Подкл...
Redux: redux.js.org/
Flux: facebook.github.io/flux/
React: facebook.github.io/react/

[@alexovs6226]

Нужен четвертый урок про redux-saga) Я думаю меня большинство поддержит (лайками и не только)

[@davronsherbaev9133]

согласен

[@ecroFeGushKa]

kzbin.info/www/bejne/enico4uMZtB8ZtE

[@cybersystem5137]

Полтора года назад я бы тоже поддержал. Да только вот спустя это время я как-то перестал понимать накой черт эта сага вообще, как и сам редакс! Глобальный стор это круто, конечно, да только в большинстве случаев он не нужен.

[@ArturZalewski]

@@cybersystem5137 Понятно, но что делать, если проект окажется не самым свежим. Любому джуну, хотелось бы понимать и иметь возможность минимально поддерживать код. Классы, Редакс, возможно, на новых проектах не имеет смысла поддерживать, но есть куча старых, которые никто ради меня, такого ленивого переписывать не станет )))

[@cybersystem5137]

@@ArturZalewski удивлю, но так всегда и везде происходит. А еще происходит так, что если ты понемногу отрефакторишь код и перепишешь его на более современные вещи (аккуратно, конечно), премию не дадут, но и возражать не будут. А работать тебе будет проще.

[@yevheniirachkovan8101]

Спасибо за хороший и понятный урок) не зря год ждал

[@alekseytsibulnikov3447]

Прекрасный скринкаст. Спасибо! Все ясно и понятно. P.s. Было бы хорошо если бы ты выложил конечный код на гит.

[@necelentano]

Спасибо за отличный контент по Редаксу. Жаль, что выходит раз в году)

[@serhii.chernenko]

первое из многих видео, благодаря которому наконец-то понял о связке и правильной структуре и что для чего. спасибо

[@rib0385]

спасибо, благодаря уроку начал понимать оф документацию, лучшие уроки, которые видел

[@andreyq9179]

АВТОР у тебя талант! Записывай пожалуйста уроки чаще. Людям нравится!

[@user-rk9ky9qf9j]

Сегодня с часу дня сидел за технической документацией Redux, что-то писал, вроде как получалось, но в итоге получилась какая-то ..., посмотрел Ваш урок и все заработало! Спасибо большое! Желаю успехов и не оставляйте это дело, Вы делаете огромное добро другим людям

[@ArturZalewski]

Концентрированно, полезно и ёмко. Несколько раз пересмотреть, один раз повторить и можно сказать, что в принципе, эта концепция усвоена. Спасибо за Ваш труд!

[@Stan9326]

У тебя талант! Продолжай)

[@nazarposhta]

Отлично! Все понял и начал использовать redux в нашем проекте. Спасибо.

[@Polite_person_]

Блин. Я 4 туториала по редаксу посмотрел и окончательно разобрался только после просмотра данного видео. Спасибо! Лайк и подписка.

[@homovespertilio]

Офигенный туториал! Я штук 30 перебрал и ютубовских и текстовых, только в этом смог четко понять что происходит!

[@Kreator321RG]

отличный урок! спасибо

[@blackoutworks]

Спасибо. Планируешь продолжать? Интересно про асинхронность с редаксом (thunk/saga) и совмещение редакса с роутером.

[@saskirakosyan5268]

the best video about redux, good explanation))

[@chillchill5254]

Спасибо большое, все очень доходчиво!

[@igrman]

Спасибо большое. Классный ролик!

[@user-tq3ip9iu9x]

Легко и понятно объяснил!

[@dobrinyanicitich7514]

Очень доходчиво, спасибо =)

[@yuriyfedechko]

Спасибо!! самым понятным языком показал!)

[@artemviliutich8801]

очень круто!!! продолжайте

[@yaolegoleynik]

Спасибо было бы круто посмотреть видеоурок по созданию интернет магазина или другого сайта на react/redux

[@alagunoff]

Огромное спасибо!

[@Nikitosss91]

Норм традиция, раз в год видос по редаксу)) Ждем продолжение в 2к20

[@ecroFeGushKa]

Следующий видос будет не про редакс))

[@Nikitosss91]

@@ecroFeGushKa расскажи по каким ресурсам учил реакт-редакс, а то от обилия видосов, курсов и статей аж тошнит, не получается на чем то сконцентрироваться... Спасибо!-)

[@ecroFeGushKa]

@@Nikitosss91 redux.js.org/ react-redux.js.org/

[@Nikitosss91]

@@ecroFeGushKa спасибо тебе, добрый человек. удачи по жизни)

[@Mr-Xxx228]

Лучший!)

[@user-ej2oe4fu1b]

Спасибо! В первой части звук был лучше.

[@Stan9326]

Супер!

[@StreeTraceuresvideos]

Very Helpful video :)

[@RomanKaras77]

Отличное видео! Но есть один нюанс, Вы в корне папки store создали файл actions.js. Он походу лишний в данном примере.

[@OrangeBox33]

Спасибо!

[@StudioWebDev]

Отличный пример! Лайк и подписка) только можно было не биндить в конструкторе ф-ции, а использовать arrow function и еще не понятно из видео, что ты написал в общий actions (store/actions) ?

[@enjoymtx]

Очень качественный контент. Получше того, что у меня были в платных курсах на эту тему. Подскажи пожалуйста, как в VSC сделать такое же отображение папок и файлов, без стандартных стрелочек?

[@cybersystem5137]

Первый раз вижу такое описание функций! Но в любом случае, имхо, короче, проще и понятнее просто использовать стрелочные функции, чем городить непонятный огород с конструктором!

[@userJakov]

Я думал недождемся)))

[@dcstrong8876]

Го уроки вообщем про реакт как на нем правильно строить преложения. Возможно что-то с Mongoose, MongoDB, React, Redux, Express. Какий нибудь урок на час. Как сделать авторизацию пользователей с сессией и все такое. Мало таких уроков , в основном по всему инету приходится по кусочкам собирать, что бы понять как и что делать

[@zoojs]

Исходники, пожалуйста!!!

[@axblue2947]

Учу реакт, открыл документацию, посмотрел пару роликов, написал туду лист и думаю - бля, круто, удобно и не особо сложно. Затем почитал что редакс это мастхэф для реакт, теперь смотрю этот ролик и чет ни черта не въезжаю. Принцип понимаю вроде как, но столько копипаста надо делать и т.д., какт жоска дается пока... Буду ломать голову дальше. Автор вроде все четко говорит, но дается сложно. Спасибо.

[@WolfzPain]

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

[@viktor8670]

@@WolfzPain я думал, что только у меня такое ощущение после опыта работы c vue + vuex, где все гораздо проще, все аккуратно скрыто под капотом

[@lomeat]

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

[@ivanPolozov148]

Подписался на канал, жду новых видосов

[@elnasurov6742]

Подскажите, пожалуйста, как называется этот плагин реакте.. Никак не могу найти..

[@dimitirpopovich4394]

Спасибо за отличное объяснение, но остался вопрос. Какая роль корневого файла actions.js?

[@Polite_person_]

Я в другом туториале видел что экшн-криэйторы и экшены разносят по разным файлам, наверное как раз в корневой экшн заносят только константы, но на видео он видимо забыл это сделать, я думаю что он появится рано или поздно в комментах и прояснит ситуацию = )

[@SergeyBaranov_ru]

Спасибо большое за понятный и логично структурированный урок! Есть вопрос про использование CombineReductors при дальнейшем разбиении на компоненты - как быть при увеличении уровня вложенности. Объясню на примере: если например в RegistrationComponent добавляем вложенный компонент, редуктор для него нужно добавлять в combineReductors компонента Registration или существующий combineReductors на самом верхнем уровне? Спасибо!

[@ecroFeGushKa]

Можно "стакать" combineReducers и класть их друг в друга, с этим нет проблем

[@callpack96]

АУФ

[@filcondrat]

ждем сагу

[@eugenegavrilov2618]

Разве удобно масштабировать приложение, когда части одного модуля лежат в кучи разных папок? Так же не удобно переносит что-либо в другой проект, когда приходится пройтись по десятку папкок чтобы собрать модуль воедино. Тоже самое касается и удаления.

[@lomeat]

пока не смотрел, че он там делает. Но я так понимаю, что делит components и containers? Если нет, то как совместить reducers и actions? Например тот же todolist, где будут экшоны (addTodo, updateTodo, removeTodo), но использоваться будут в разных 2 компонентах? Тут уже не разделить, или просто рендерить todo внутри todolist, но это некрасиво и в итоге файл будет срок на 1000

[@andreykostyuchenko3239]

Видео супер, но почему при использовании реакта и редакса столько бойлерплейта(

[@StreeTraceuresvideos]

Bro sdelai video kak pisat polnacenoye sap sredux :)

[@amatol2100]

Вот я недавно начал изучать react. Поэтому за вопрос не обессудьте. ) Зачем нужен redux? В смысле, зачем нужен глобальный state? Разве мы не можем просто создать глобальную переменную и туда что-то записать? Я чего-то ещё не понимаю?

[@oOIMAXIOo]

Конечно это все круто, а что делать если у нас вот такая ситация store => reducer и его надо разбить на еще новые редюсеры, и как получается сделать дочерний combineReducers?

[@ecroFeGushKa]

Chihayafuru ну, внутри редюсера у тебя будет свич-кейс, для разных action type. можно под каждый action type свой редюсера написать и тупо передать в него текущий стейт и payload. это самый простой вариант. вариант посложнее: в объекте, который передается в combineReducers, в одно из желаемых полей положить не редюсер, а ещё раз вызвать combineReducers

[@Kra6on]

Подскажи плз, как правильно записать в стор значения, которые мы получаем от запроса к API?

[@ecroFeGushKa]

Создать экшен, который кладет нужные данные в стор; запрос к API запустить внутри redux-thunk или redux-saga (они были созданы для того, чтобы держать в себе стороннюю логику) и там же дернуть этот созданный экшен

[@Kra6on]

@@ecroFeGushKa окей, спасибо, пошел тогда искать что такое saga и thunk:)

[@Kra6on]

@@ecroFeGushKa есть еще один вопрос!) Если у меня есть, допустим, 2 редьюсера(как тут , на видео), то когда я в один из них буду посылать экшен - то во втором редьюсере же тоже могу посмотреть, что пришло? просто мы с помощью switch-case используем только то, что нам нужно для конкретного редьюсера?

[@Nikitosss91]

.а что за тема вс кода?

[@Kra6on]

А где лучше записывать PropTypes? в Контейнерах описывать для всех или уже внутри, в компонентах?

[@ecroFeGushKa]

Лучше использовать TypeScript :) Ну, а PropTypes - в компонентах, т.к. все-таки пропсы характеризуют, в первую очередь, функциональность компонента, а контейнер - это просто обертка.

[@Kra6on]

@@ecroFeGushKa спасибо!)ждем новых видео!

[@elnasurov6742]

@@ecroFeGushKa подскажи, что за плагин у тебя для реакта стоит, плез

[@aleksandrzhilkin4800]

Не понял, почему бы вместо AuthContainer не использовать сразу Auth: export default connect(mapStateToProps, mapDispatchToProps)(Auth); вместо export default connect(mapStateToProps, mapDispatchToProps)(AuthContainer);

[@snd5543]

Круто) только вот вопрос, если у нас будет гигантский стор, не лучше ли хранить onChange в стэйте компонента, а в стор отправлять только по сабмиту? На сколько это критично в плане быстродействия?

[@ecroFeGushKa]

Само собой, в 90% случаев нет смысла класть данные из onchange сразу в стор. Про производительность - сложно сказать, она слабо зависит от размеров стора

[@ivanpoberezhniuk9694]

Метод debounce из lodash.js Вам поможет

[@ROX2]

не показано как из одного компонента через редакс вытащить стейт другого

[@mrGenius996]

Держи царский лайк и подписку!

[@user-my2yg4tb8o]

Воу что со звуком? До этого лучше было

[@VSsoviet]

какая же клавиатура у тебя ахуенная, у меня механника не так приятно звучит даже))

[@ecroFeGushKa]

NodeJS Developer Ненавистная всеми Макбуковская "бабочка"))

[@VSsoviet]

@@ecroFeGushKa хз хз мне прям в кайф с каждого отклика и да, спасибо за уроки)

[@sergeyzaycev3733]

Вот это как раз для больших приложений не подходит. Если у вас действительно большое приложение, вы будете тупо весь день копипастить одинаковые файлы...

[@Kolabrod]

Исходники ? не не слышал

[@andriiukraine6697]

Хм... А в реальной жизни вообще имеет смысл сторить поле при каждом изменении в глобал стейт. Вот тебе жизненный кейс. Форма с 256 полями. Разбить ее на меньшие не выходит из-за требований бизнеса. Представь себе кол-во экшенов которые нужно прописать.

[@ecroFeGushKa]

Ну, достаточно сделать какой-то один дженерик экшен и в качестве payload передавать айдишник\ключ\название поле и класть его значение в стор по этому полученному ключу

[@HPMuwa]

Мне не понравилось, что в видео у меня полосы слева и справа и сверху и снизу. Мой экран 16:10

[@anatoliitytarenko4926]

Гду бл**ь ссылки на код?!! А так урок хороший , но за ссылки дис

[@unlike777]

Ребята учите Vue, серьезно, не нужно вам все это....

[@ecroFeGushKa]

Мы тут в первую очередь про Редакс говорим, причем тут Вуе) Вуе не панацея и в нем также не решена проблема управления данными (как, собственно, и везде)

[@solovladik]

@@ecroFeGushKa о какой проблеме речь? можно источник, чтобы разобраться в этом вопросе по-лучше?

[@ecroFeGushKa]

@@solovladik blog.logrocket.com/why-use-redux-reasons-with-clear-examples-d21bffd5835, раздел "Why you need a state management tool". redux.js.org/introduction/motivation