привет дорогие друзья сегодня у нас в бинар пому bags давайте мы сейчас чуть-чуть еще подождем вот а пока я вам по рассказываю кое-чего перед началом значит цель этого вебинара у нас познакомить петли у вас слушатели см и bags давно нас просили об этом сравнить его с ридак сам вот и собственно развеять эту магию ему бы ксо что нужно знать перед началом нужно знать перед началом что рида конечно покорил мир фронтэнда своей понятностью на мой взгляд то есть ридак сон очень понятный и если вы смотрели я не знаю какие то курсы объяснение видеоуроки редакция то часто там лекторы писали свою реализацию вот из-за этого как бы ридак с конечно потому что он понятный его понятно по непонятным баги понятны его нюансы вот и соответственно его легко и просто затащить в проект и его использовать с мамиксом как бы история чуть другая потому что мы bags часто говорят что он магический вот но при этом это тоже хороший вариант стоит менеджера вот и сегодня мы с вами его рассмотрим я буду говорить чисто с практической точки зрения вот потому что я затащил музыка в один из своих проектов вот успешно его использую вот я там собственно разобрался всю магию развеял и готов поделиться с вами своей версией так сказать объяснение а ну и прежде чем мы начнем нужно сказать что этот прекраснейший вы honor записан при поддержке прекраснейших карпов курса которые делают прекраснейшие курсы по веб-разработке где есть прекраснейший курс по frontend у который ведем мы в том числе я и еще двое талантливейших разработчиков вот этот с посвящен фронтэнда для middle of вот или джунов плюс которые хотят прокачаться и работать в топовых компаниях в больших и крутых проектах мы собственно сами оттуда поэтому знаем о чем говорим вот соответственно заходите если интересно и еще тут просят передать что в конце этого вебинара будет промо-код на скидку 10 процентов ладно давайте собственно начинать сегодня у нас будет такой формат life кодинга презентация не будет то есть мы с вами пола в коде мы пообщаемся замок x давайте покажу проект собственно значит проект супер простой на самом деле называется мой кошелек у нас есть список карточек которые мы не видим и историю операций который менее мы не видим давайте покажу с точки зрения как бы продукта так сказать что из себя представляет данный сайт значит есть плюсик мы нажимаем здесь у нас подставляются уже какие-то значения но это просто чтобы нам было удобнее тестирует чтоб я не тратил время на вот значит здесь но номер карты которые мы добавляем можем выбрать цвета войдет все не по умолчанию и баланс тоже рандомный подставляется я нажимаю сохранить карта сохранена где-то на бэг-энде где конкретно покажу чуть позже вот но мы уже видим проблему что соответственно у нас не отображаются до сохраненные данные я обновляю страницу и вот данные подгрузились да вот она наша карта которую мы с вами сделали дальше у нас история операций такая же история я нажимаю плюсик авто подстановку у меня идет рандомных названий вот соответственно у меня здесь авто здесь я выбираю карту карта у нас здесь подгружаются как я идет запрос на backend вот соответственно возвращается список карт и формируется номер карты ну и рандомная сумма собственно нажимаю сохранить та же история операция сохранена обновляю страницу ну и только тогда она все появляется то же самое с удалением и с изменением да то есть я могу удалять карточки изменять я изменяю баланс допустим с 2000 до 1000 сохраняю да ничего не меняется тут соответственно я там давайте удалю тоже ничего не меняется да вот только после обновления страницы давайте сейчас добавлю какую-нибудь транзакцию чтобы мы посмотрели как это выглядит на бэг-энде здесь компоненты компоненты сделаны с помощью библиотеки интерфейсов you a библиотеки on design да то есть много времени на компоненты я не потратил вот подключил уже готовую библиотеку а с точки зрения бэг-энда у нас подключен firebase вот у нас есть база данных собственно вот коллекция наших карточек и коллекция транзакций да то есть наши операции вот наша одна карточка да то есть вот сгинь явился идиш ник баланс цвет когда она была создана и номер или карта вот мой транзакции то же самое да то есть данные видно ну что продукт у нас вот такой проблема понятно да то есть нам нужно как то сделать так чтобы наши данные обновлялись без перезагрузки страницы давайте посмотрим что у нас в коде я использую в в шторм вот соответственно давайте посмотрим что у нас на фронте нди на всякий случай скажу я буду использовать горячие клавиши всякие вот и я подключил плагин который называется presentation что-то там презентация мод давайте посмотрим как называется хотя это не особо важно для нашего вебинара но коль уж начал презентация assistant вот и он соответственно внизу будет подсказывать какие клавиши я нажимаю да когда использую какие-то хоткеи да то есть вот для винды и для мака вот соответственно что у нас здесь происходит да идем с индексного файла сейчас быстренько посмотрим на наш проект значит все api у нас описано файлики api вот и здесь у нас собственно все что касается нашего pi здесь подключается firebase опрокидываются там все данные что все связалась собственно и методы да то есть давайте я сделаю вот так что было более наглядно то есть мы можем получить карту получить все карты обновить карту ну короче круто да create апдейт рид велит да то есть для крут у нас для карточек и крут для операций собственно для наших транзакций до получить все получить конкретную сохранить новую обновить конкретную и удалить на конкретную тоже что у нас есть еще у нас есть типы да где у нас typescript здесь в типах у нас описан тип скриптовые собственно api наших карточек и операций вот но еще вспомогательный типа да типа цветов и тип операции до доход или расход вот у нас есть еще утилиты где получаются рандомные числа да вот эта постановка где мы получаем рандомный баланс рандомный тип да вот продуктов то ну короче утилита для такого dev использования соответственно под капотом забыл сказать у нас крутится cry 3 акт об on design да то есть чтобы мы не занимайся из не занимались инфраструктурой до уже здесь как вы видите нет никакого в по конфига да то есть все максимально скрыта вот чтобы мы сосредоточились на нашем продуктовом коде ну и соответственно компоненты до компонент об да где у нас рендерится наш header это где написано мой кошелек да вот она шредер вот потом у нас cards лист и history до history это у нас история операций cards лист это вот это вот список карточек наш вот она собственно такой проект повторюсь в чем проблема значит проблема в том что у нас не обновляются данные да без перезагрузки страницы почему так происходит давайте разбираться вот смотрите вот у нас есть cards лист да это вот он наш компонент давайте я вам могу показать с точки зрения вот react компонентов да где там наш cards лист вот он cards лист да и history а вот они history records лист соответственно в чем собственно проблема в том что мы получаем наши карточки и записываем их в локальный state вот наши карточки мы их скачали папе и записали в локальный state дальше мы их от рендере ли в карт ой там и соответственно когда мы проваливаемся в наш карт этом и идем редактировать да через модальное окно вот у нас есть карт модель этот карт модель он у нас отвечает и за создание и за обновления да то есть вот это модальное окно технически и вот это модальное окно технически это на самом деле один компонент здесь просто подставляется заголовок да типа новые карты редактирования карты вот ну и соответственно подставляются уже данные и значит реализация этого компонента нам абсолютно не интересно здесь он дизайн вот нас интересует вот это вот функция он финиш да то есть когда уже прошла вся валидация и когда мы готовы сохранять да то есть мы собрали здесь данные и соответственно если айдишник мы передавали то есть это редактирование мы оба этим нашу карту да то есть поэтому идиш нику вот с такими данными потом закрываем моталку если это новая новая карта до сохранения то мы сохраняем эти данные все соответственно закрываем а даллку но поскольку у нас cards лист использовать локальный state соответственно мы никак здесь ничего не обновляем поэтому у нас ничего и не обновляются то есть в этом проблема с точки зрения кода у нас есть вот значит как один из очень правды мы эти компоненты вниз не прокидываем и значит естественно у нас ничего не обновляется какие решения у нас есть этой проблемы мы можем сделать с вами глобальный stor да протянуть через react контекст например да то есть у нас в нашем глобальном storie будут карточки и будут операции да и соответственно через контекст мы будем их вытаскивать вот и будем с ними работать у нас есть вариант подключить стоит менеджер например ли dax который примерно сделать то же самое у нас есть вариант прокидывать калмыки вот но поскольку мы здесь собрались соответственно чтобы изучить макс мы с вами будем подключать стоит менеджер вот и а за используем bags ну собственно вот такое видение и план нашей лекции какой мы с вами подключим об x вот просто посмотрим как он работает да то есть как его быстро не быстро там подключать вот и соответственно мы с вами разберём тонкости разберем вот эту магию вот и посмотрим плюсы-минусы да и сравним с редакциям конце после каждой секции можно задавать вопросы вы пишете всегда вопросы я после каждого такого блока крупного буду смотреть в youtube вот и осмотреть значит вопросики ну давайте собственно начинать подключаем bags что нужно сделать мы с вами открываем терминал вот и пишем yarn эт я подключаю мог бы косари of light это чтобы связать это дело с реактор на и подключаю библиотеку мобы с днем пока установится все оно установилось я открываю значит нашу консоль чтобы перезагрузить в пак вот в паб перезагрузили до чтобы изменение применились значит чтобы нам сделать моб x files мы просто описываем класс с нашими данными даст наша бизнес-логика я создаю новый файл который давайте давайте я создам лучший папку stores да типа наш из торы вот и здесь создан typescript файл который назову cards вот мы сейчас подключим наши карточки до чтобы наши карточки обновлялись значит в чем у нас здесь первое как бы отличие то что мы здесь с вами пишем классы да то есть если у реда ксо у нас такой более функциональный стиль а то здесь мы пишем клад мы можем по-другому на самом деле писать но без practice и во всех там туториалах и прочих вещах пишут класса значит что мы здесь объявляем мы здесь объявляем наш массивчик карт поскольку у нас typescript давайте я сразу буду описывать с типами да то есть у нас есть наш cort cort сопи ну и соответственно давайте мы опишем методы которые собственно сеть от их удаляют добавляю там наши карточки ну проводит короче операции с ними я пишу метод сетка ртс вот здесь мы значит принимаем на вход список карточек вот ну и собственно я делаю за из карт равняется карте да но таким вот простенькая этой все дела id card дату добавляю card карта пи вот соответственно из cards push push card вот и давайте мы еще будем сортировать наши карточки когда мы будем добавлять мы будем их сортировать по возрастанию то есть какая карточка создалась 1 такая и будет первый точнее какая карточка создалась последний такая будет первое в нашем списке вот то есть чтобы карточку добавили а наши дни в конец список улетела в начало да и будем сортировать по созданию значит здесь typescript не помогают сразу что вот можно сортировать по секундам вот и я соответственно это делаю вот id card так давайте я уберу чтобы тут не мешала нам дальше мы делаем апдейт карт принимаем айди до который нам нужно обновить айди карточке и новую карточку вот судя по карт модал мы здесь в дату передаем не совсем как бы к ardo pe да потому что карта пи есть еще поле а иди и поле crate и да мы здесь передаем дату поэтому в typescript те я напишу такую конструкцию которая называется амид здесь я укажу что типа карт api и что делает амид он принимает значит тип или интерфейс который мы туда передаем и вторым параметром он принимает поля которых в этом интерфейсе не будет то есть в нашем случае не будет а иди и не будет created да то есть в нашем случае карт это карт api да только без айди и без cry этот апдейт карт что мы здесь делаем да то есть как нам защитить нашу парту я предлагаю запретить ее с помощью map on да то есть мы будем возвращать новый массив вот и здесь будем проверять что если ой там айди айтен а этом айди значит равняется айди которыми передали тогда я возвращаю этот айди и возвращаю собственно нашу карту да вот иначе я просто возвращаю наш ой там да как он и был вот здесь он и отчёта ругается a cry that created значит created ему нужен time stop time time time stamp нал да то есть это is fair бейяза time 100 мб на а вот все хорошо так и давайте дальше сделаем дальше у нас риму в карт идет прямо в карт здесь мы принимаем о еде и вот и соответственно как вы уже наверное знаете мы будем фильтровать до фильтровать наш ой там и брать только те а это мы оставим которые не равняется наш нашему айдишник у да вот наш торт собственно готов да то есть вот здесь нет никакого муп xado по фактам и просто описали с вами классы вот и я хочу сделать из нашего сто раз синглтон то есть я хочу экспортировать карт стар уже за инициализирован эй да вот это у нас будет в экспорте соответственно вот cards top evod все методы доступны да окей соответственно что мы делаем дальше дальше мы с вами должны включить здесь собственному bags и чтобы bags у нас заработал сейчас просто делаем чисто практическое упражнение не поясняя кто за что отвечает что называется бросить мяч об стену до чтобы начать изучать физику да то есть идем с практической точки зрения и здесь мы вызываем такой на такую функцию которая называется мейк автообзор в оба и передаем из то есть сделать автообзор выбыл до то есть сделать значение наблюдаемым как какие-то значения будут у нас наблюдаемыми сразу скажу что наблюдать мы будем за изменением наших карточек нашего массива давайте подключим теперь это к нашему листу да собственно cards лист вот наш cards он нам больше не нужен что я делаю я просто подключаю сюда наш cards top вот и вместо сетка ртс я делаю cards top of cards да то есть сюда в зен у нас передается корр цепи да вот опять же typescript хорошо нам помогает и в шторм помогает что вот он говорит что вернется до то есть будет promise с массивом карт api и соответственно мы сразу его передаем то есть это то же самое что будет вот такая вот история card set карт а вот это тоже самое вот ну вот более такая лаконичная запись вот это первый шаг и второй шаг нам нужно эти карточки вывести да как мы это делаем cards top cards у нас ничего работать не будет сейчас да мы можем в этом убедиться он давайте обновим нашу страницу да то есть он скачал наши карточки он это браузер собственно мы скачали наши карточки добавили их cards и соответственно они у нас вывели но чтобы вся магия мобы ксо заработала чтобы было автообновления после обновления наших данных нам нужно нам с вами нужно обязательно сделать такой метод observer который называется значит что я здесь делаю я переименовываю наш cards лист в cards лист компонент я это делаю обычно так а экспортирую я уже cards лист то есть как вот наш компонент назывался до этого но я оборачиваю в наш обзор wear cards лист компонент дакар slice компонент он у нас берется из mop mop x3 act lite то есть музыка у нас он же не привязан ни кряк то нет amg angular некую ни к чему не привязано он может использоваться отдельно чтобы у нас были реакции именно с реактором мы используем отдельную библиотеку которая называется мог бы ему bags react light давайте смотреть значит у нас ничего не сломалось да все хорошо соответственно чтобы вызвать изменение наших карточек мы должны с вами собственно вызвать эти функции до которые меняют наши карточки у нас есть удаление карточки да вот а педаль id card и после а педаль id card я вызываю значит cards top вот и делаю риму в карт и передаю сюда айдишник до который я удаляю и в cards моду да то же самое значит у нас здесь возвращается наша карточка она может быть ну да то есть если было неудачное обновление или сохранения поэтому мы с вами здесь проверяем что если карточка это существует тогда мы делаем cards top здесь у нас апдейт карт айди карт мы передаем вот это же самое в сейф new car да то есть вот у нас новая наша карточка если она существует до и в карт тогда мы делаем cards top что у нас сейф new car да где у нас нет карт вот от карт а то есть мы добавляем нашу карточку что мы сейчас здесь делаем мы сейчас собственно добавляем экшенами данном добавляем наши карточки в створ да то есть мы сделали удаление добавление новый и значит патч до blade давайте смотреть что у нас получилось значит я добавляю новую карточку бирюзовый до рандомные данные сохраняю вот она у меня добавилось вот она дальше что я делаю давайте я ее там изменю до 2000 изменю на 5000 поменяю цвет давайте на розовые тоже вот все у меня обновилась ну и собственно давайте ее удалять долю на вот все работает то есть сейчас что мы с вами сделали мы подключили моб x давайте посмотрим как это произошло еще раз то есть мы с вами объявили класс с данными да то есть ничего сложного написали экшене до функция которые их обновляют ну и соответственно чтоб магия заработала чтобы значение стала наблюдаемым мы так подключили майк автообзор google и потом за в наблюдаемом значение мы обернули наш компонент в обзор лирда то есть вот именно наблюдаемое значение это наши карточки да то есть мы хотим следить именно не за экшенами мы хотим следить за карточками да то есть вот за вот этим массивом карт и соответственно мы про кинули все это дело все эти экшены опрокинули там куда надо их прокинуть собственно давайте ту же вещь сейчас сделаем с операциями вот можете в целом сейчас писать вопросы вот потому что после этого мы перейдём уже к следующему блоку с операциями я сейчас буду делать довольно все быстро значит с помощью f5 я копирую наш storm то же самое что с карточками да потому что тут тот же самый крут это у нас учебный проект и как бы он особо ничем не отличается кортес top мы с вами меняем на operations top вот здесь картер мы тоже меня operations вот соответственно cards мы меняем с вами давайте рефакторинг тут за используем operations вот соответственно ведь и вот удобненько то что он не везде все здесь поменял сразу же в шторм вот сетка ртс но давайте здесь я за используя не cards а карт лучше выделю на что больше у меня попала operations вот соответственно operations api вот operations на что папе у меня четко подхватился да здесь все тоже самое давайте быстренько проверим operations top массив операцией добавить все операции а здесь карту нас 1 шанс вот здесь у нас вместо карточки тоже рейхан вот здесь вместо карт тоже першин вот и айди фильтр да все четко теперь идем наш компонент history да вот он здесь все тоже самое здесь абсолютно все то же самое что и с карточками поэтому мы смело можем просто здесь удалять и по аналогии все наши дела это подставлять да то есть operations star-z operations здесь мы делаем operations top operations да дальше идем в лист ой там здесь у нас дэвид да то есть все то же самое operations to remove operations айди передаем дальше идем в нашем а даллку так здесь у нас будет api решен operations вот и здесь у нас будет 1 шин их operations тогда operations top а значит апдейт до першин айдида то вот и тут то же самое if a person operations top значит это первично вот подключили давайте проверим сейчас все работает значит ну давайте я добавлю что-нибудь новенькое вот а у нас здесь еще кстати карточки с вами по хочется да добавляю новые 5000 расход ничего не добавилось это хороший баг который мы разберем чуть попозже давайте проверим изменения 1000 и пусть это будет доход ничего не изменилось а так ничего не изменилось почему потому что обзор гор забыли я тут уже на баги все сваливаю значит history компонент экспорт const history сервер history компонент так давайте проверим изменить давайте 5000 и расход сделаем вот все поменялось на все круто соответственно все мы все подключили все хорошо и какой вывод мы можем из этого сделать подключается это все конечно довольно таки быстро вот и то есть мы просто заменить или класс сделали наблюдаемое значение майк автообзоров был какая-то магия значит сделали какие-то экшен и не понятно как это связано с обзор потому что вот в редакции например мы же делаем хотя бы какой-то общий провайдер вокруг всего нашего приложения и там хотя бы можно догадаться что это как это работает через контекст здесь мы никаких контекстов ничего не подключаем просто все работает как-то магически и здесь что какие вопросы значит нужно задать если мы подумаем об этом вопрос 1 как вообще работает этот миг автообзор рубл да как он понимает что зачем нужно наблюдать как вот это наблюдение происходит как происходит оповещения а значит подписанных компонентов да то есть cards лист у нас подписана на этот cards да и как так получается что именно этот компонент да тут важный нюанс что обновляется не все приложение обновляется только тот компонент который нужно обновить то есть если мы добавили что-то в карточке то тогда обновиться карте лист компоненты больше ни один компонент не обновится ну если только не ну список по дерево но это уже как бы особенности работы react а значит вот вот этот вопрос интересует и соответственно как обзор verde как вот этот обзор мир понимает что нужно следить за изменением именно карт вот и на эти вопросы мы сейчас будем с вами отвечать а пока мы готовимся я быстренько гляну нет ли у нас вопросов сортировка карточек не работает вроде возможно да надо посмотреть а что будет если вывести консоли лог cards top интересен вопрос так как мы майка автообзор был понял что делать обзоры на так но это мы сейчас будем все разбирать хорошо давайте перейдем к следующей секции следующая секция у нас под названием как это все дело работает под капотом и здесь мы обратимся к документации документация мы с вами видим что сейчас увеличу до что папа что было секциям бэк score да и у нас здесь есть четыре так сказать раздела обзор lable state actions компьютер reaction это вот корр на котором держится модекс и сейчас мы будем это все дела разбирать но прежде чем мы начнем это делать мы разберемся с не богам да то есть как же нам либо жить как нам как мы можем наблюдать за нашими значениями значит 3 а ну помимо dakedo вы можете это конечно почитать но я вам покажу 3 как бы метода которыми пользуюсь я первый метод называется trace да то есть в магиксе есть такая функция которая называется trace вот она импортирована из map x а вот и она в консоли видите показывает что мы bags trace значит racing включен до для вот этого компонента картель из компаний значит когда мы будем что-то менять здесь да вы давайте я поменяю цвет в консольном выдаст что обзор в обл обзор yorker стилист компонент у нас больше не валидный потому что поменялся cards top cards да то есть это такой дебаг метод который как бы показывает нам что почему перри рендерил со собственно наш компонент да из-за чего из-за какого метода из-за кого-то из-за какого свойства это первый момент второй момент это можно подключить еще спай есть такой метод называется spike спайк тоже он и смог бы ксо соответственно он у нас трека это все ивенты которые происходят до то есть которые происходят с нашему бык сам и тут интересно что что он трогает вообще все он трека it у нас и внутренне ивенты вот и внешние да то есть ну это вся внутрянка дату с какие-то отчеты значит и реакции это мы чуть позже разберем и прочее прочее вот нас интересует action и data есть type action вот type action это то что сделали мы поэтому мы можем сделать вот такую штуку if i went type равняется action вот тогда мы можем консоль лошадь до наш ивент вот видите произошел экшн икс actions and cards & the pirates до нюанс в том что он как бы треть от сразу по всему приложению поэтому спай как бы не очень удобен именно когда у нас не учебный проект сейчас а когда он с огромнейшее приложение потому что он будет трогать все вот и третий вариант который мы подключать не будем он называется библиотека любых slogger вот можете тоже использовать он будет использовать espai и trace то есть просто он все будет это вместе использовать все варианты доступны которые дает мы bags и будет значит в консоль выводить до что вот у нас случилась реакция в таком-то компоненте у нас там случился action у нас дома компьютер chill ся тоже разберем вот подключать мы не будем но просто чтобы вы имели в виду даму бык slogger можно для дебага использовать значит давайте собственно разбираться первый первый вопрос да который у нас был про made of the обзору был что это вообще такое как он понимает что зачем надо следить и что что вообще происходит соответственно значит смотрите map x должен каким-то образом понимать за какими значениями наблюдать а за какими собственно не наблюдать он должен понимать где из него action да потому что мы же видим да что мы вызвали какую-то функцию класса да ему бык с каким-то образом понял что это наш экшен что относится к нашему спору что значит он его ещё за лоббировал и вот это вот все да то есть и все это конечно же хранится вот в этой магия майк автообзор губу что у нас здесь под капотом то есть как мы бы ксу дать понять зачем надо наблюдать а где у нас action это делается если без мейка автообзор нубладо без маги это делается с помощью метод meyk обзор на бал с помощью функция майк обзор мама сюда мы также передаем зыс да то есть объект за которым мы наблюдаем до в нашем случае это наш класс и дальше мы с вами передаём конфиг до что есть что здесь мы говорим что cards это наш обзор в был да то есть это вот такой декоратор из муп x а значит есть у нас обзор на бал есть у нас компьютера который мы чуть позже разберем а есть у нас action вот причем экшен и есть разные есть экшн есть action bound есть flow который работает там с генераторами или там асинхронными функциями тоже можно вот но под капотом это работает так да что у нас мы добавляем декораторы к нашим методом и свойствам вот и соответственно опять же по best practice у по всем по всем вариантам вот как люди разрабатывают решили значит добавить метод майк автообзоров был потому что это конечно же бойлер plate и рутина это неудобно потому что у нас появляется новое наблюдаемое свойство нам нужно его добавлять там я не знаю card 2 например и говорит что это обзор рыбу добавляется новый экшен говорит что это экшен прячьтесь при том что надо понимать где обычный экшена где action bound action bound to those привязка контекста как боинг типа вот поэтому есть такая штука которая называется майк автообзор обл которая разруливает все эти дела сама значит мы можем опять же посмотреть сбоку но я сейчас скажу вам и так собственно все свойства помечаются как обзор был до когда мы используем aig автообзор обл все свойства помечаются как обзор lable все методы помечаются как экшен и вот а все гитары до get it aged там card 2 помечаются как компьютер да и мы тут должны что-то вернуть вот вот эта часть помечается как компьютер то есть вот таким образом работает майк автообзор в был вот соответственно здесь я рассказал опять же в большинстве кейсов нужно использовать и точнее майк автообзор обл да есть один нюанс с ним-то что его нельзя использовать когда у вас есть наследование да то есть когда вы решили по полной заюзать л.п. да и у вас есть какой-то парень класс вот и вы решили значит от него от наследоваться если вы используете майка автообзор был здесь а здесь что-то перри определяете то это работать не будет соответственно если у вас наследования тогда вам нужно использовать моих обзор бабл и есть такой декоратор который называется ну допустим мы там переопределили карт есть декоратор который называется overnight да то есть теперь следи не за карточками не в пенси а следи за карточками именно в этом классе вот но опять же для stora для большинства мне кажется frontend приложение лучше держать шторы максимально простыми без там всяких приколов без наследований и соответственно майка автообзоров был здесь идеально ложится и не нужно ни о чем думать добавили новый метод новых сам все про и не тилда добавили это новое свойство мог сам все про инете так идем вопросы так пах bags похож на объект меня привычно да действительно что-то в этом есть да хорошо вопросов нет идем дальше дальше идем в наш обзор в был да то есть вот начинаем разбирать по порядку вот эти наши core концепции что такое обзор на был state да что это такое как это вообще работает какому бы кс вообще понимает вот как вы работает короче вот это магия наблюдения до тушети редакции все понятно за dispatch election вернулся новый объект как бы все четко здесь magic давайте разбираться в этом собственно magic значит что здесь нужно знать значит что должен уметь наблюдатель да то есть что должны уметь наши карточки да то есть вот это вот свойство наблюдатель должен уметь две вещи первое это знать кто на него подписан то есть кто за ним наблюдает то есть обзор в балкарцы должен знать что за ним наблюдает cards лист вот это первая его задача автора его задача это уметь оповещать всех вот этих подписчиков об изменениях то есть перефразируя с карточками наш карт должен уметь понимать что cards лист за ним наблюдает или кто-либо ещё вот и он должен уметь оповещать наш cards лист о том что он изменился вот это две задачи который решает наш обзор в был как это работает мы бы xi да как это работает под капотом там довольно элегантное решение на мой взгляд это все работает через прокси прокси ну джесс прокси джесс прокси это такой объект который позволяет перехватывать другие объекты и переопределять их поведение до основные операции для этого объекта как это работает давайте я просто вот вам в консольки до отдельно покажу как это работает значит смотрите мы там делаем какой то объектом юзер например да юзер и у него есть name да там name дима вот и соответственно мы с вами хотим сделать прокси объект прокси юзер да например я вот так вот назову new прокси до сюда я перед юзера и сюда в во второй аргумент в объект я передаю ловушки да то есть какие операции основные я переопределяя я могу переопределить там геттер и сеттер например или там что-то еще могу переопределить там свойства этого объекта до то есть делать его не ну запретить его например расширять там коктейли еще или еще что но сама значит что полезно для нас в качестве музыка это то что можно переопределить геттер и сеттер значит давайте я вам покажу как вот перри определяется геттер на примере значит он принимает наш геттер это обжиг да то есть вот нашего юзеры да и property который он значит запрашивает и соответственно в большинстве случаев точнее не большинстве во всех случаях мы возвращаем по умолчанию возвращается обжиг проб да то есть мы запрашиваем наш username мы возвращаем собственно user name но мы можем это делать через прокси переопределять и возвращать например антон вот чтоб мы не запросили мы всегда будем возвращать антон вот соответственно я делаю прокси юзер нэйм вот видите он не говорит антон я вожу что то левая должен быть on define там не выводит антон то есть вот через прокси объект я переопределил собственно наш объект юзер и делаю с ним называется все что хочу вот и точно также у нас работает обзор в был в магиксе точно так же он реализован под капотом значит смотрите как это работает значит когда мы рендерим наш компонент да мы значит считываем внутри обзор вера вот этот важный тоже нюансы когда мы рендерим наш компонент внутри обзора когда запускается эта функция значит observer ставит флажок что типа функция запущена в этот момент когда мы из тора получаем какие-то значит не срабатывает guitar вот этот прокси гетто и он понимает какой компонент собственно внутри какого компонента он был запрошен и этот геттер соответственно записывает записывает собственно наш компонент да то есть карт наш обзор убил karth записывает что типа карт slice компонент за мной следит да давайте еще раз в момент запуска функции мы считываем доходим до сюда да cards тор и получаем акс значит свойства карт в этот момент срабатывает guitar что вот мы получаем обзор обл да и он в этот момент записывает что картель из компонент нас начина начал слушать вот я дает карт значит что происходит дальше когда мы через action вот здесь меняем наш сет cards вот здесь у карца срабатывает сеттер да то есть мы ставим сюда карточки и он срабатывает сеттер и сеттер у нас оповещает а все наши компоненты подписаны на него о том что он изменился на самом деле это довольно простая концепция но она интересная и как бы я когда про прокси узнал я всегда думал типа блин вот где его можно использовать да зачем мне проектировать мой же объект я смогу просто в этот объект чего-то самый дописать ну вот музыка сюда вот нашли применение прокси она реально очень клёво и очень элегантно и какое преимущество нам это даёт нам это даёт такое преимущество что когда мы знаем об этом это значит что мы можем менять наш cards без экшена да то есть если я сейчас уберу отсюда наш экшен я сделаю cards top cards равняется карт то есть присвою напрямую то это тоже сработает давайте проверим да то есть вот карточки выявились да сыт operations а action не за лагера вался но set a pirate's работал до и это вот довольно важный такой нюанс то есть когда мы знаем как это работает под капотом мы понимаем что вот такие вещи возможны но это конечно антипатр потому что нет экшена сложно отследить и вообще лучше так не делать конечно вот поэтому делать мы так не будем но это возможно это первый нюанс а второй нюанс заключается в том что у нас здесь появляется у компонентов оптимизации из коробки потому что если например мы с вами подключим например я не знаю сделаем еще какое-нибудь свойствам да там l l l да и он будет там фолз например вот lll фолз и соответственно допустим у нас здесь будет какой-нибудь не выполняемые условия да и мы сделаем cards top lll до выведем его в лоб ну например то при изменении этого l l l у нас компонент не перри рендерится это вот важное вот тонкий момент как раз производительность ему бык со как раз вот за счет этой магии почему я этого не произойдет почему если мы изменим lll перри рендеры этого компонента не будет потому что в момент первого рендера мы тупо сюда не дойдем то есть из за того что у нас здесь фолз мы в эту строчку кода не попадаем и и соответственно гетеро у нас не сработает а если гитары не сработает там об x не запишут что этот компонент за ним наблюдает и это вот очень на мой взгляд прикольно то есть это как не бака фича то есть это производительность из коробки то есть если в редакции например да вот мы через you селектор вытаскиваем комп вытаскиваем наш state до вытащили например там три значения и даже если используется среди них одно или не используется ни одно например то при значит обновление все равно а если используется одно из трех например дата при обновлении нашего объекта или render все равно произойдет вот даже если он и не должен был произойти а здесь за счет better off и сеттеров перри рендеры не будет это вот очень прикольный нюанс который дает нам это реализация так as обзор в объеме я закончил вывод такой что это обзор лабу наблюдаемое значение да это наши свойства реализованы наблюдения с помощью геттер и сеттер а с помощью гетеро он записывает кто его слушает с помощью cetera он уведомляет подписчиков о том что он изменился вот это единственный вывод который здесь можно сделать и дальше мы пойдем потоки и перейдём уже к экшеном да вот мы прошли обзору был stay'd и сейчас у нас на пути actions так а читаю ваши вопросы так вопросов пока нет у меня тут небольшая задержка вот поэтому я тут не в реал тайме так сказать за этим всем наблюдаю поэтому если что пишите вопросы я в конце соберу так а мы идем дальше дальше у нас экшены что нам дают экшены ну помимо структуризации кода и вот логирование что тоже на самом деле в большом проекте на мой взгляд огромнейший плюс да когда есть логирование action of action и еще выполняют функцию бочонка что это такое собственно допустим я сейчас сделаю такую штуку давайте я вот этот api fetch cards дааа пегед карт унесу тоже в наш штор да и назову это печка на то здесь мы будем со синхронной функция работать а вот и здесь мы будем получать собственно наши карточки const cards а в паппинге от cards & wise сетка ртс да вот мы их получили трой кетчер оставлять не будем у нас учебный проект да то есть заниматься этим не будем здесь значит и здесь у нас карт stor fetch карт и вот смотрите если бы я уносил вот эту движуху с и зло 1 gom и прочими вещами да давайте тоже сделаю из loading фаустом do is loading falls а вот здесь делаем dis is loading значит true датой загрузка идет вот а здесь зыс ыз loading force is loading давайте отсюда убирать тогда сет loader мы тоже закомментируем здесь у нас только будет течь картина так сейчас вот и здесь у нас будет cards top is loading да то есть мы унесли как бы все в наш стол значит смотрите что у нас происходит у нас с вами происходит а несколько так я еще хочу еще знаете что поесть я хочу повесить еще рендер да то есть сколько рендеров у нас произошло здесь так давайте так значит смотрите сколько рендеров у нас произошло это был первый render первоначальной потом у нас случился печь cards произошел render потом сет cars произошел render то есть три рендера первый первоначальный едва perrier эндера да давайте смотреть теперь в сам fetch карт до мы изменили стоит здесь да и по сути когда мы здесь сделали сеттер он должен был оповестить cards лист чтобы компонент обновился до 1 перри рендер должен быть потом мы сделали сетка ртс до обновили наши карточки должен был быть 2 перри render и соответственно сделали из laughing еще раз да и еще раз обновили и должен был быть 3 перри render но у нас произошло два пири рейдер а то есть у нас сет cards is loading они объединились вот тоже самое соответственно у нас если мы будем писать там любые экшены то есть если мы сделаем там сетка ртс вот например id-карту нас тоже у нас происходит один или рендер хотя мы два раза меняем собственно наш массив и соответственно мы можем здесь там is loading pace is loading true и вот это вот все там кучу раз намешать но перри render всегда будет один потому что action он собирает все наши перри рендеры собственно все наши изменения свойств одно и делает один перри render дату здесь такая производительность из коробки тоже происходит и поэтому экшена это прикольно но есть один нюанс мы bags у нас как вы видите начинает учета вардинге какие-то рассыпать и он пишет что когда strict морт strict мод у нас включен до строки режим то изменения обзор обзор значений без экшенов не разрешено до то есть он ругается на вот эту вот вещь после away the вот потому что если я сейчас сделаю сет loader и сюда буду передавать флаг вот флаг и добавлю этот сет loader сюда бесед lauder фолз то тогда давайте обновлю страницу и bags ругаться не будет а в чем здесь суть а здесь суть в том что когда мы работаем с асинхронными функциями у нас после а вы это уже как бы начинается другой action потому что почему потому что это прыгает привет иван клуб соответственно потому что у нас начинается новый тег и мы как бы не можем вернуться обратно мы не можем сдачи все это поэтому map x говорит что здесь мы как бы когда мы делали зыс ыз loading мы здесь как бы меняли без экшена меняли на штор напрямую поэтому здесь чтобы решить эту проблему мы что можем сделать мы можем либо сделать функцию как я сделал но можем сделать и по-другому мы можем сделать вот такую штуку которую назовем ran in action вот то есть запустить в экшене здесь уже писать собственно наши эти все приколы iran in action он также работает и внутри компонента да то есть это одинаково вот ведь им об x не ругается и вот у нас запустился a name action да опять же анонимной функции в таких вещах это довольно плохо поэтому нужно ее как-то назвать вот это то что касается экшенов то есть экшены у нас батчат все изменения поэтому экшена это хорошо экшен с action и у нас лакируется это тоже это хорошо ну и собственно в целом структурирует код а давайте я верну все как было fetch карте отсюда уберу is loading тоже это нам не нужно вот это я просто- показывал вам для примера надавать это так вот я это сделал но нет неправильно сделал давайте карт створ вот так вот значит что мы тут делали api все потерял но ничего страшного карт star-z cards to set loader вот тут laughing возвращаем вернули так смотрю на вопросы так а тут вопрос какой это был все понятно хорошо почему кстати вопрос тоже архи ладно давайте потом архитектурный вопрос почему is loading у нас здесь [музыка] давайте пройдемся пойдем по плану и пойдем дальше значит компьютер свойства компьютер свойства значит что это такое вообще хорошая аналогия компьютер свойств это с формулами в экселе да то есть компьютер свойства это что-то между обзор углами и реакциями да сейчас я вам покажу вот у меня из google таблица давайте я увеличу меня здесь просто числа 2 и 3 до то есть представьте что 2 и 3 это наша обзор бабло вот я делаю компьют свойства да то есть я делаю формулу надеюсь вы понимаете что еще сделаю то есть формула суммы суммы двух чисел я выбираю что число вот это плюс число вот это да и он мне выводят число 5 значит давайте вот на этом примере разберем компьютер свойствам что это такое компьютер свойства это свойство которое формируется из других обзор радлов да то есть мы можем сделать компьютер свойства например cards там отсортированные например карточки или вывести там какие-то другие данные из карточек или как-то их приобретал пря преобразователь и прочее прочее то есть компьютер зависит от обзор в облав это вот нюанс соответственно но при этом а почему это и тут нюанс еще такой что за обзор лбами точнее за компьютер свойствами мы можем наблюдать точно также как за обзорами сейчас мы на примере это разберем но почему это что-то между обзор лугами и реакциями потому что когда мы меняем обзор был значения у нас он должен отправить события на изменения вот сюда тоже поэтому это что-то между между обзор углами и собственно реакциями теперь давайте собственно разбирать это дело все на практике давайте что мы сделаем вот у нас есть сортировка которая кстати сделано неправильно как комментариях вам подсказали вот потому что надо вот так вот давайте что мы сейчас будем делать мы сейчас сделаем компьютер свойствам которая всегда будет возвращать отсортированные карточки давайте get started карт например да это делается вот так в компьютер свойства всегда нужно что-то вернуть и мы просто вот вот это сейчас применим да и соответственно вот эта штука нам уже не нужно и а что мы делаем мы идем наш cards лист и мы следим уже не за карточками а за отсортированы my карточками давайте смотреть что у нас происходит а у нас здесь происходит ошибка почему а что написано мобы кс значит обзор в blu-ray сорт то есть метод сорт мутирует массив где не должен этого делать inside деревенщин деревенщин это наша реакция это реакция это собственно наш компонент и наш компьютер значит you race light art instead то есть если я сейчас за использую и рэй слайс так если я сейчас сделаю здесь слайс сорт то тогда у меня все заработает чего вообще происходит вот вопрос который дал бы должен был сейчас у вас возникнуть а здесь вещь которую нужно знать про реакция да опять же повторюсь что реакция это наш компонент это side effect который происходит при изменении объема бландо side effect это наш компонент потому что он должен обновиться и side effect это наши наши компьютер свойства потому что оно должно перед считаться и у сайдов а значит наших реакций есть три правила значит никаких side эффектов это значит никаких там запросов на сервер никаких обновлений а наших значит обзор на был свойств как мы это сделали то есть когда мы делаем сорт сорт он же мутирует наш массив и соответственно здесь получается ошибка потому что мы заходим зацикленное состоянии то есть мы с вами здесь матируем cards да срабатывает сеттер и говорит что типа подписчики обновитесь а подписчики в данном случае это сорт id cards и значит наш cards лист и поэтому когда мы каждый раз значит в реакциях вызываем setter мы входим в бесконечный цикл поэтому так делать нельзя вот значит второе правило это про то что никаких запросов на сервер да то есть никаких сайт дефектов не должно быть и третье правило никаких зависимости от не обзора был значений то есть пересчет вот нашего компьютера свойства должно быть только от обзор бабло то есть мы можем писать там я не знаю за из карте ситом какое-то число умножить на 2 мы можем такое писать но мы не можем зависеть от какой-то другой переменной как за которой не наблюдаем это вот очень важные правила которые нужно соблюдать давайте sorted cards возвращать не будем да пусть будет так но мы сделаем другой компьютер а именно в операциях до помните я вам говорил что у нас до сорт карт сейчас поправлю значит карт до помните я вам говорил что в операциях у нас здесь когда мы создаем новую операцию здесь у нас делается запрос на сервер за карточками давайте в этом убедиться убедимся это у нас history модель вот и посмотрим ждут в компоненте вот card numbers карт намбер сетка от нам берс вот он у нас в эффекте видеть обидит cards получается наши карточки нам это не нужно потому что наши карточки уже доступна из компонента наших собственных карточек на вот опять же не в учебном проекте это довольно опасная история вот потому что мы могли не загрузить карточки вот значит что нам здесь нужно здесь у нас давайте посмотрим что мы там вообще запрашивали то есть мы делали cards map и мы вытаскивали номера этих карт давайте я сейчас зайду в operations на штор operations и сделаю компьюте свойства которая назову cards нам берс вот этим самым я покажу что в storie в компьютер свойствах 1 stora можно использовать значение из другого stora в этом нет никакой проблемы то есть что мы делаем мы берем cards тур карт значит нам это нужно вернуть мы мопи им и возвращаем а этом намбер да ой там набер вот да то есть никаких проблем а дальше мы идем ой там намбер вот и вот эту часть мы уже убираем убираем мы и вот эту часть тоже вот соответственно идем в card numbers и место card numbers мы берем а берёшь operations top cards нам берс да вот и соответственно все это дело выводим давайте проверять все работает вот вот наша карточка вот и никаких запросов на сервер добавляем новую карту синюю на вот она добавилось начала вот и вот у нас все обновилось да то есть все все круто вот тут божо чик это мы потом разберем значит что нужно еще сказать про компьютер свойством то что они кэшируются вот это вот самая офигенная вообще вещь и что значит кэшируется то что если у нас обзор бабл не изменился то есть одно от которого он зависит нашем случае мы зависим от карточек если обзор был не изменился то перри рендеры не будет пересчета даже если здесь у нас происходит перед эндри вот смотрите у нас сейчас я вам продемонстрирую что у нас render здесь происходит каждый раз да то есть вот смотрите рендер от рендерил теперь опять от 3 до 5 тренды вот и теперь я иду в operations и ставлю вот здесь тоже лог card numbers до logo вот смотрите вот у меня пересчет случился да теперь и рендерю повторно card numbers перри считался ее моим все сломалось он должен был кашира ваться но он не за кашира вался почему-то ребята на публичном в бинаре конечно такое непозволительно абсолютно короче я хотел вам сказать о том что у нас свойства кэшируется но он почему-то у меня не за кашира вался конечно de bajo сейчас я это не буду здесь сто процентов что я забыл какую-то маленькую штучку вот но сорян короче пусть будет на моей совести вот на моей так сказать плохой подготовки вот но знайте чуваки что все кэшируется это работает вот здесь я просто видимо что-то в процессе потерял значит и еще один нюанс то что почему опять же компьютер свойства это обзор google и не обзор был одновременно здесь также как с обзор в то есть смотрите мы card numbers используем нашим history моду вот и здесь вот очень тонкий момент если мы card numbers наш наш компьютер наша компьютер свойства не будем использовать в компоненте наша реакция то даже если карт изменится то наши компьютер свойства не пересчитается хотя по сути должно то есть смотрите мы меняем наш cards да и карт отправить две реакции он отправит реакцию в cards лист и он должен отправить реакцию вот сюда в cards нам берс компьютер свойства но если card numbers не используются то он реакцию сюда не отправит вот и это тоже довольно прикольная оптимизация подкапотная да то есть если не используется то пересчета не будет этого тоже к слову а оптимизации мобы к внутренней его магия так с этим мы закончили компьютер свойства клёвая тема кэшируется это важно это кэшируется вот и когда у вас сложные просчеты вот пожалуйста используйте компьютер свойства прикольная штука идем дальше но сначала вопрос а так а тут антон все тащат у меня компьютер не может менять стоит только на основе их что-то возвращать да все верно компьютер стоит у нас не меняет идем дальше дальше у нас реакции это наша последняя глава осталось чуть-чуть ребята держимся значит реакция что у нас здесь это последняя часть но она самая наверное мозга сшибать и льна поэтому соберитесь значит что такое реакция это место где наши места где происходит реакция на изменения наших обзор в углов и компьютер свойств да то есть это место где происходят сайт эффекты в нашем случае реакция это авторан ой авторан это обзор был да где он наш обзор был год cards лист вот observer observer это типичный пример реакции но обзор wear у нас предаст является библиотекой map x3 act lite да и он занимается тем что обновляют компоненты то есть вот такой side effect что же делает другие методы которые у нас есть давайте мы не будем их разбирать писать код чтобы не затягивать ну вот авторан давайте чуть увеличить что было покрупнее значит смотрите вот эта функция это реакция которая предоставляется мы бык сам собственно она срабатывает каждый раз когда меняется свойства до наблюдаемое свойство то есть тоже самое что обзор гор только автором значит смотрите что происходит давайте вот по картинке значит у нас есть наш авторан тут можете подставлять для понимания чтоб ассоциация была подставлять observer а здесь вместо функции функциональный компонент функциональный react компонент значит что происходит с обзором происходит тоже самое значит происходит 1 рендер авторан runs и нежели да то есть происходит 1 рендер в момент запуска автора на или обзор вера у нас выставляется флаг о том что эта вещь запущена да то есть наш наша реакция запущена в этот момент мы выполняем эту функцию и читаем наши наблюдаемые свойства да здесь в данном случае с hunter is hungry в нашем случае это cards внутри гетеро идет проверка что если наша реакция запущена тогда мы записываем что вот эта запущенная реакция соответственно вот она нас слушает да это наш подписчик их как бы все потом происходит action да то есть в нашем случае с сет cards at court апдейт картель id card или прочее а здесь у нас reduce energy меняется собственно наша cards данном случае с хангари и наш ганаш карт на тифа и авторан и авторан у нас ариран то есть он у нас перезапуска в случае с обзор в с обзором cards у нас делают натив ай да то есть уведомляет observer что я изменился обзор веру нас три рендерит компонент вот собственно так это работает здесь еще есть другие свойства внутри бокса которые я честно говоря не использовал потому что ну мы bags я использовал да именно для взаимодействия с реальным да то есть как для стоит менеджера с реактором вот из интересного что может пригодиться возможно это вот в на потому что здесь можно сделать и потратил здесь вот первые функции да перед срабатыванием здесь есть типа функции условия если выполняется тогда у нас срабатывает эффект здесь можно сделать throttle например да то есть какие-то условия дополнительные поставить и возможно этот в.н. он будет пригодится вам во front-end разработки но мне он не пригодился к счастью к сожалению не знаю вот а зная всю эту информацию я хочу еще раз вернуться компьютер свойствам и сказать что компьютер свойства где наша пирей шанс вот компьютер свойства это та же реакция вот почему потому что когда меняется наш cards этот cards должен уведомить значит наш компьютер что он изменился и компьютер должен пересчитать вот соответственно а про observer мы поговорили тоже проекта прав таран и здесь еще про обзор wear есть важный нюанс что observer автоматически оборачивает наш компонент react компонент а в react мимо да и тут тоже как бы ну можно сказать что-то производительность из коробки вот но все обзор wear компоненты у нас обернутый в react мимо можем в этом убедиться до опять же идем наш cars лист где там наш cards лист вот карт slice компонента видите мимо стоит да то есть мы обернутый в мимо вот это та же вещь которую стоит наверно учитывать вот особенно если вы будете сюда передавать какие-то проб и да у вас может быть там что-то не будет рендериться то знаете возможно это из-за того что у вас мимо и зация работает и у вас там проб они меняются например вот значит какие нюансы нужно проговорить какие нюансы нужно проговорить но в целом это все нюансы которые нужно проговорить и сейчас я хочу вернуться к багу с операциями которые уже с которым я уже полился несколько раз вот и давайте я спалюсь еще раз когда я завожу новую операцию она у меня не добавляется да то есть хотя action происходит вот это вот самое интересное вот это четкий бак на самом деле и тут просто тончайший момент который нужно учитывать с максом значит смотрите action сработал но ничего не изменилось давайте смотреть в кот кот у нас history да это место где мы слушаем наши операции смотрите во первых мы передаем а в наш operations в компонент лист который как бы все апатии до который у нас библиотечный компонент вот это первый нюанс который мы можем заметить если сравнивать scart листом потому что скажет листом все четко работает хотя реализации точно такая же вот здесь у нас происходит map да здесь у нас мама не происходит до в нашем history да то есть мы передаем просто наш массив datasource а лист он принимает массив datasource и там он типа сам должен все разруливать я должен перегревается но как мы видим из наших логов перри рендеры не происходит давайте я для примера еще здесь делаю рендер и мы еще раз в этом убедимся да то есть вот я создаю новую операцию выбираю карту до the section произошел рендер не произошло обновляю страницу до операции стало больше значит в чём здесь прикол и вот это вот опять же тончайший нюанс который просто супер кайфовый на мой взгляд все дело вот именно в подкапотной реализации мог бы xa и здесь я хочу с вами забрать наверное пройтись по доки все-таки значит дока у нас раздел называется анды стендинг reactivity значит что здесь говорится что мы bags реагирует на любой существующей обзор google на любой существующей на любое существующую свойства обзор бабло вот это вот важно значит которая прочитанного время значит выполнение нашего сайт эффекта да то есть трек фарша но это типа наша вторая там сервер и так далее и значит здесь есть у нас примерчик до что у нас есть массаж сюда передаются какие-то данные строка объекты массив да то есть тайтл автор и лайки вот и по этой картинке вот давайте мы сейчас ее разберем значит зелененькая это-то зачем наблюдает мы bags да то есть смотрите у нас здесь war месседж давайте вот он наш месседж класс message и у него есть три наблюдаемых свойства тайтл автор и лайки 3 наблюдаемых свойства обзору был объект тайтл автор и лайки и здесь вот написано что мы bags наблюдает за ссылками вот это тончайший просто сейчас соберитесь реально это самое важное что есть в этом вебинаре любое наблюдаемое свойство зелененькая которая получена через точку в значит функция в проект фанкшн это наш обзор лишь до в нашей реакция будет записано если это ссылка поменялось му бык среагирует а теперь простыми словами мы следим за тайтлом за автором и за лайками здесь у нас мы не следим за значениями да то есть мы следим именно за ссылками и которые были получены через точку до и здесь нюанс в чем что вот у нас есть наш массив вот здесь сейчас аналогия с апельсином что есть наш массив и у нас он следит не за значениями а за property за свойствами этого массива он следит за links из-за методами и поэтому вот этот рендер у нас не срабатывает потому что здесь мы сюда добавили operations мы сюда добавили обзору был array и он не следит за массивом он следит за методами и поэтому если мы сюда заметными за свойствами точнее поэтому если мы сюда добавим links например да но у нас не сработает компонент но я просто хочу показать по каким причинам перри рендерится наш компонент если мы сюда добавим links если мы сюда добавим слайс например да то есть мы превратим это все дело в обычный массив или мы сюда добавим map и как-то преобразуем и вернем обычный массив то тогда а сработает гетер а здесь просто геттер не срабатывает точнее он срабатывает но что он здесь зачем он здесь смотрит он смотрит здесь за ссылкой за стрелочкой да что такое смотреть за ссылкой то есть смотрите когда я делаю массив лет а потом я делаю лет b и присваиваю сюда а то а очевидно у меня равняется b но если я сделаю массив у так то будет falls да здесь опять же вот мы bags а в чем его магия потому что он использует как бы стандартные вещи java script а здесь нет никакой магии на самом деле но просто он пользуется как бы стандартными штуками фундаментальными почему вот эта вещь вообще не работает потому что когда мы присваиваем массив мы создаем на самом деле этот массив а значит мы записываем его в ячейку памяти и здесь у нас не как бы значение этого массива в переменной а ссылка на него это сделано в целях оптимизации и то есть если мы сейчас в а запушен там единичку мы в эту единичку тоже увидим то есть под капотом это значит что что под капотом у нас не произошло что типа мы сделали об уж 1 и b page 1 мы по ссылке запушили в массив то есть в ячейку памяти мы зашли взяли этот массив запушили туда значения и положили обратно а здесь мы имеем только ссылку и возвращаясь к нашей картинки сейчас мы наблюдаем за обзору blu-ray да то есть вот он operations это наш массив и наш массив перри рендерится ну то есть наш компонент перри рендерится сэт случится только тогда когда мы поменяем ссылку на этот массив вот а что у нас сейчас в operations когда мы делаем эту операцию мы пушем в наш массив то есть мы не меняем его ссылку мы не создаем новый массив вот заметьте это вот тонкий момент что здесь мы присваиваем новый массив да когда мы делаем с это пирей шанс здесь мимо пин-ап возвращает новый массив то есть мы меняем ссылку в рим уф мы тоже делаем фильтр а здесь мы пушем существующие а потом его сортируем вот и поэтому у нас не происходит пири рейдер а вот если мы сделаем вот так вот зис operations равняется operations и operations disappears шанс вот тогда все будет работать до почему потому что мы вот эту зеленую стрелочку поменяли давайте это проверим да вот видите все обновилось соответственно что мы должны помнить что когда мы что наблюдение идёт не за значения не за значениями за ссылками когда вы пушите возможно стоит либо создавать новый массив либо использовать например сплошь да вот рекомендуют ой nice place извиняйся слайс да то есть мы как бы копируем массив этот вот либо использовать метод атму бык со который называется тут же с вот что он делает он значит наши прописи превращает в обычный массив вот кстати давайте я сейчас консоли логе выведу значит как выглядит на самом деле наша операции да давайте тут прокси напишу operations и как выглядит тут же с и вот это вот я сейчас скопирую давайте смотреть ну тут несколько рендеров вот смотрите как на самом деле выглядят наши операции наши карточки на самом деле это про ксиву то что мы разбирали да то есть это прокси раваной массив вот который содержит себе проксирование значит наши объекты вот они вот а когда мы делаем тут же мы получаем обычный массив и поэтому тут нюанс что нужно делать когда мы меняем наш массив нужно помнить о том что чтобы случился перри render чтобы секс работал нужно соответственно ссылку поменять здесь никакого сета не происходит при пуше значит второй нюанс либо либо второй нюанс либо мы превращаем добавляем какой-то метод вот например как здесь мы здесь через мап выводим наши карт ай да то есть у нас идет к обращение к map да и у нас возвращается как бы разные значения и поэтому это работает то есть вы можете там cards top карте я не знаю jojen или links если вы добавить эту перри render случиться при изменении длины до что важно и тут как бы нюанс такой что если вы работаете с библиотечными компонентами или например вы хотите тупые компоненты которые не зависит там от всяких прокси да и хотите там принимать чистый массив то делайте тут же с потому что он тут развязывает все эти приколы с индексом да и в компонент обычный массив перейдет я считаю что это хороший вариант это лучше чем делать splyce ой слайс точнее потому что если вы сделаете слайс у вас будет максим массив прокси да то есть вы просто убьете вот этот прокси до прокси массива который но элементы этого массива они все равно будут прокси да вот 6 прокси у вас будет вот поэтому я рекомендую делать тут же с почему тому что перейдет обычный массив который принимает этот компонент он его ждет он не ожидает что там будет прокси скорее всего вот и как бы все работать будет стабильнее у вас не будет как бы стрёмных багов стрёмных имеется ввиду сложно воспроизводимых да чтобы вы там по пять часов не сидели не воспроизводили да я рекомендую делать тут же с это наверно все что я хотела рассказать про реакции сейчас я еще смотрю в в шпаргалку здесь еще вот я вам скину ссылку по поводу мам выкса да здесь я все рассказал на самом деле пром обувь что хотел я понимаю что если вы сейчас первый раз сталкиваетесь мы боксом и вы прослушали полтора часа то я просто уверен что ваша голова сейчас взорвана это ну это сто процентов и я вам рекомендую для понимания почитать вот этот репозитории которая называется он достанет мы bags здесь чувак написал свою реализацию рубикса очень упрощенную в 200 строчек и здесь он очень подробно объясняет концепция ему бык со я вам рекомендую под другим углом посмотреть так же в описании я вам скину еще один workshop вот тоже чувак рассказывает про мы bags вот тоже чтобы вывод по другим углом как-то другими словами другими объяснениями могли посмотреть и еще один докладе кто же я вам скину вот если вас мы бы их заинтересовал и вы хотите в него погрузиться но вот это если вот вы меня спросите какую вот одну ссылку мне открыть самую важную я вам скажу откройте вот эту потому что здесь есть внутренняя реализация она как бы в два файла она очень простая и она вся прокомментирована да и это вам поможет понять вот основные моменты и вот здесь еще есть прикольный момент да а то есть как понять что при изменении обзор бабло нужно сделать одну перерисовку вот это вот очень прикольная штука на самом деле значит смотрите вот у нас есть компонент б ой компонент свойства б в представьте что это наши карточки до наш cards этот cards мы используем в react компоненте и при этом в этом же ряд компоненте мы используем компьютер свойство которое зависит от другого компьютера свойства которое зависит от обзор могло бы идти по когда мы меняем обзор был бы по идее у нас изменится д-да который должен изменить и это один перри render и б который тоже должен изменить я это два перри рендеры но пири рейдер будет только один и вот почитайте почему так происходит это очень прикольно вкратце объясню что мы бы их отправляют на самом деле два события он отправляет когда меняется компонент был перед этим отправлять что компании почему компоненты свойства б обзора был свойства б перед изменением он говорит что типа чуваки я устарел и это по цепочке идет и до компонента и доходят 2 значит два события что типа b устарел доходит отсюда и отсюда до доходит то есть вот б устарел c говорит чтобы устарел да и говорит точнее c говорит что вот я устарел для говорит что я устарел все и соответственно у компонента е2 события что он устарел и он будет ждать два события что изменение произошло и только после этого он сделать перерыв очень изобретательно и на самом деле решение вот почитайте посмотрите на реализацию это прям очень прикольная вам это рекомендую так про реакции поговорили про нюансы поговорили теперь я хочу сказать чуть чуть совсем затронуть чуть-чуть архитектуру значит смотрите в продукте обычно есть его и логика как бы и бизнес-логика да мне кажется что вот эта вот часть она точнее это сто процентов так и есть вот эта вот часть где мы получаем наши опираешься это бизнес логика это сто процентов вот и это надо уносить в створ либо не в створ а либо в контроллер да то есть и здесь я вам предлагаю идти от простого к сложному то есть сейчас мы сделали вот такую вот реализацию у нас есть юань логика это вот loading показывается да вот мы с карточками уносили наш is loading в stor так тоже можно делать но помни по моему чисто мнению это отстой потому что тогда у нас не происходит настоящего разделения бизнес-логике и юо и логики да то есть бизнес логика это все наши данные дат вся наша связь там с бэком все наши вот эти операции и зло один которые относятся чисток history компонент я не понимаю в чём там должен делать stor вот но есть и другие мнения тут относитесь к этому критически значит поэтому я всегда разделяю а и логику и бизнес-логику но вот эту часть как бы надо убрать в сторону счета и мы сейчас это делать не будем чтобы не затягивать но у вас будет ссылка на репозитории с этим проектом где я отдельным камерам это сделал можете посмотреть там ничего сложного вот значит это первый нюанс второй нюанс что например вот у меня в моем проекте где использовал x я писал на о.п. бизнес-логику я писал на а потому что это chrome extension этот продукт это chrome extension который встраивается в видеоплееры и как бы там бизнес-логика 1 то есть там от рендере кнопку например да или там получи а субтитры видео да но там на ю тубе мы должны от рендерить эту кнопку в определенный селектору ютубовский на нетфликсе в определенный селекторное от алекса война и соответственно как бы бизнес-логика вроде бы одна абстрактно но реализация разная то есть селектор селектор ю туба один сектор netflix а другой и соответственно там очень хорошо лег а.п. со всеми этими extend амида то есть абстрактная логика есть уже extend на я логика реализации соответственно вот и там сначала я все хранил в store потом я понял что у меня появляются какие-то дополнительные связи которые мне бы не хотелось я начал добавлять контроллера вот и здесь я предлагаю вам идти так же когда вы будете работать с мужик сам вот если вы будете с ним работать то сначала набрасываете все в створ вот а потом уже когда вы поймёте когда уже станет больно сложно тогда уже можно и заводить контроллеры и переходить на hp подход можно ли использовать классы и функциональный стиль там с хуками со всеми приколами конечно можно вот пожалуйста usa эффект хук да вот мы все это используем на никаких проблем вот это то что я хотел сказать так так так так так ну в целом наверное это все то есть здесь я предлагаю вам разделять бизнес like you are like a что было проще тестировать и расширять все это дело вот и перед сравнением с ридак сам давайте я загляну вопросы давно туда не смотрел вопросов нет отлично а значит теперь у нас сравнение с ридак сам что здесь нужно сказать здесь наверно sharing экрана можно отключить вот [аплодисменты] сейчас мне нужно буквально десять секунд вот а может даже уже и меньше вот сравнение с ридак сам значит смотрите давайте из очевидного да что вы прочитаете в любой статье значит в редакции у нас один большой спорт да один глобальный stor мы можем сделать много споров но опять же best practice 1 star а в магиксе у нас много споров да много разных споров которые могут вообще друг от другие не знать не зависеть и много маленьких значит таких компоненте cove это первое отличие простое значит в редакцию мы оперируем простыми объектами да то есть у нас простые объекты куда мы записываем там числа массивы и прочее в боксе у нас наблюдаемые объекты да то есть мы делаем наш массив карт и он у нас значит с определенной логикой наблюдателя да где у нас запроектированы get и set потом самое главное нервным об отличии ридак со и кодекса в том что в редакцию нас и мутабельные данные при экшене мы всегда возвращаем новый чистый объект а в магиксе как мы видим и может мутировать наши данные вообще напрямую то есть это как бы ok вот и отличие которое наверное как бы немножко из другого разряда что reduction более понятный то есть его можно объяснить джуму там за три минуты ammo box как бы так просто не объяснишь как бы со всей этой магией вот и в редакции еще хорошо что что есть архитектура то есть ты не можешь напрямую изменить объект то есть ты должен пройти как минимум через среди юзер вообще через action да то есть ты dispatcher action потом только делаешь какие-то операции и возвращаешь новый объект то есть у редакции есть архитектура и это прикольно как раз именно для разработки там с джиннами например в том плане что ты его объяснил за 3 минут архитектура показал и все как бы уже можно клепать и как бы человек особо шаг влево вправо не сделает вот какие у реда ксо есть явные плюсы прям дают преимущество по сравнению с мамиксом за счет архитектуры и вот этого вот этой имут обильности у редакция есть time travel да то есть наверняка если вы с редакциям работали вы знаете про ридак devtools где каждый ваш шаг каждое изменение вашего объекта лаги руются и вы можете как бы теоретически но и практически на самом деле переходить по этим состоянием да и в продукте где вы делаете не знаю фильму там какую-нибудь да и нужно поддержать control z там ридак с конечно офигенно вообще ложится вот и как бы там где это нужно это крутая фича прям из коробки дондурей ду вот в магиксе тоже можно это сделать для этого можно за использовать мужик стоит 3 который под капотом использовать мы бы xxi добавлять все эти преимущества то есть это как redex на стероидах вот но это вне нашего вебинара называется вот еще преимущество которым я только что сказал это d втузы до прикольные дев тузы у редакции есть очень удобно за всей этой штукой магии наблюдать особенно большом приложение где вы грузите страницу и просто смотрите какие экшены просто такая последовательность у них и чем вообще происходит до конкретно с де fame а какой action какие значит параметры пришли как из-за этих параметров изменился ваш объект и так далее и тому подобное вот это прикольно вот он бикса как бы таких крутых для втузов на мой взгляд нет но они вот тоже есть вообще хоть кафе и т.д. втузы вот этот рейс spice то что я вам показывал вот их тоже можно использовать ему быть slogger тоже можно использовать да то есть но на мой взгляд они конечно менее удобный через редакцию вкус и явный плюс или dax я уже тоже говорил что очень-очень простая понятная концепция редакция за три минуты можно объяснить переходим к муке ксу явный плюс модекс это меньше бойлер plateau значительно меньше бойлер plateau здесь я попрошу пошарить экран значит вот эта картиночка из twitter значит смотрите это один и тот же код написан на редакция на ридак стул ките иному бы все вот и соответственно мы бы всего мы уже здесь остановились полки там остановились здесь и средах сам здесь да если я сейчас уберу я надеюсь вам видно но короче я вам скажу что мы bags это половина кода ридак со да и ридак стул кит он конечно меньше но он все равно не дотягивает дому баксов ских размеров и это все sharing экрана можно остановить и это супер конечно вообще плюс то что нет как говорят в интернетах бойлер plate а вот то есть ну действительно пишешь меньше кода на фигачил stor майк автообзор в обл observer компонент значит повесил хок да она сама там все наблюдается никаких из селекторов компьютер в сделал значит никаких провайдеров ничего вообще не надо да тут действительно это офигенный плюс и если эту магию понимать кодекса а я надеюсь что вам стало понятно за сегодняшний вебинар то как бы мы бы кс это конечно он ускорит как мне кажется процесс разработки за счет просто написания меньшего количества года вот и второй явный плюс это производительность из коробки почему потому что рендеринг дома это самая дорогая операция да вообще во front-end и я самая дорогая операция то рендеринг дома да а с этим как раз и react боль борется до тем что он сделал virtual дом да собственно все просчеты у нас в памяти и а мы в дом настоящий рендерим только div вот и magix он тоже очень заточен на производительность ну как мы уже видели да то есть даже если мы в компоненте используем наши наблюдаемые значения но если они по факту не наблюдаются то и за их а изменений перри рендеры не будет да то есть но вот всякие вот эти производят штуки производительности это конечно очень приятно вот и какой вывод мы можем сделать из этого я вывод сделаю не знаю как бы он однозначно неоднозначной но какой я сделал вывод что на самом деле для большинства frontend проектов абсолютно пофиг какой стоит менеджер использовать вы можете не использовать на самом деле стоит менеджер или для многих проектов он действительно не нужен можно выехать чисто на контексте а но если в вашем там проекте не нужен там time travel to ну короче если нет никаких определенных прям особенностей то все равно что использовать это вот мой point я подсел на муп x когда понял точнее никогда понял а когда я начал делать проект который у меня в написанном апостиля вот и тут мы bags просто более приятно лег за счет того что у него есть классы вот и соответственно все эти плюшки об и они становятся доступны это просто более консистентной да у редакция более функциональный стиль соответственно если у меня там проект не а.п. тори dax в целом тоже зайдет как бы нет никакой проблемы в том чтобы dispatch экшены ну как бы реально давайте тут еще называется правде в глаза посмотрим дать в этом нет никакой проблемы соответственно просто это два инструмента которые решают по факту одну задачу и они реализованы по-разному и на мой взгляд для большинства проектов которые я видел в своей жизни что тот стоит менеджер то этот динозавр как ну вы знаете этот моим короче соответственно на этом все все ссылки я скинул готов отвечать на вопросы если они есть и напишите пожалуйста насколько вообще понятно было объяснение или не понятно насколько ваш мозг взорвался интересно об этом см и посмотреть на это вот а пока вы пишете вопросы я хочу еще раз сказать что этот вебинар состоялся благодаря карпов курса и только благодаря им вот и у них есть крутейшие курсы по разработке в том числе frontend для middle of которые мы преподаем вот для middle of которые хотят работать в топовых крупных компаниях и крутых командах для этого мы как раз затачивали наш курс вот мы там разбираем фундаментальные вещи вот и трогаем backend в том числе и firebaseauth дизайн вот это вообще пример кстати он с курса там с одного из уроков вот и мы как раз изучаемой смежной области потому что в больших продуктах очень важно понимать не только бы франкен де noiva frontend мы тоже кубику выкопаем фундаментальные вещи рассказывал про як том числе как он работает внутри в чем там прикол соответственно про event лупы pro performance очень много говорим ну короче говоря все что надо там есть и соответственно много знаний и получите навыки и отработать это все на домашних заданиях практически после каждого урока в 99 процентов уроков есть домашнее задание имени проекты после каждого блока промокод я надеюсь вы получите в чате на десять процентов вот поэтому если интересно заходите смотрите программу приходите будет будем рады вас видеть на этом у меня все вот я смотрю вопросы здесь значит антон спасибо большое вот один из преподавателей просто мне помогал нам аберрации спасибо антон что отвечал на все эти вопросы вот по традиции у меня немножко подлагивает трансляция я жду 10 секунд если за 10 секунд у нас не появляется вопросов то тогда мы заканчиваем но собственно все на этом предлагаю закончить спасибо всем тем кто пришел и тем кто дослушал эту тему я надеюсь вам было очень полезно и что то понятно обязательно посмотрите ссылке которую я вам скину вот и изучать ему бык стоп тема ура так что всем пока спасибо большое пока пока