45 - React JS практика - connect, mapStateToProps, mapDispatchToProps
Вставка
- Опубліковано 22 бер 2019
- 🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT -INCUBATOR:
Front-end
it-incubator.io/front-end/?ut...
Back-end
it-incubator.io/back-end/?utm...
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_samurai
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
* Мы в соц. сетях:
itkamasutra
/ itkamasutra
telegram.me/itkamasutra
* Мои личные VK и Insta:
d.kuzyuberdin
/ it.kamasutra.dimych
#reactJS #практика #примеры #уроки #курс
![[Redux] Мой любимый вопрос на собеседовании](http://i.ytimg.com/vi/bqQI9rFm1ro/mqdefault.jpg)
![ЛЕБЕДЕВ у ДУДЯ: муху не обманешь 😁 [Пародия]](http://i.ytimg.com/vi/E74h5fvVrqs/mqdefault.jpg)
Димыч: "Все работает. Профайл отображается, Мессаджесс отображается".
Ставлю на паузу, пишу код, следуя указаниям в уроке. Все отображается, текс не печатается.... Отматываю на начало, пересматриваю, вкуриваю еще раз, нахожу пару незначительных ошибок, но опять ничего не работает. Перематываю опять, ищу баг...
Спустя полтора часа забиваю и досматриваю последние секунды видео.
Димыч: - Давайте попробуем написать что-то и увидим, что... не пишется...
Я: *грызу клавиатуру, деру волосы*
P.S. Димыч, спасибо за курс!))
Блин. Я три раза проект переписал, пока не прочёл
тоже самое 2 день не мог понять в чём проблема
Чувак, я потратил всю субботу пока не прочел твой комент, голова уже ничего не соображает. з.ы. Димыч, ты садист!
Как хорошо, что сначала зашел почитать комменты)
@@user-rp8oy2kf5d счастливчик😁
Каждый раз, когда приходится удалять целый кусок кода, который работал, моё сердце плачет
Перед этим еще раз 5 проверишь все ли работает , и в итоге ну нахер, пожалуй просто закоментирую пока
Видимо Димыч специально учит нас не привязываться к коду)) Чтобы потом нам было легче в реальном жестоком мире.
поэтому для этого есть git
@@victoriarudnik8500 пользуюсь. Дело не в том, что я боюсь забыть, потерять что делала, а чисто психологически некомфортно)))) Было вначале. Сейчас уже привыкла)
для это есть git, и просто коммить себе на здоровье, а потом возвращайся на эти коммиты и любуйся какую дичь или может не дичь, ты делала раньше))
У меня пол часа бомбило с того что не идёт прорисовка , смирился и решил досмотреть оставшиеся 20 сек видео и Димыч такой:"А почему не рендерится я в следующем видео скажу"🤣🤣🤣
Бля бро прочитал твой коммент пол дня мучился
У меня тоже прорисовки не было, всегда на паузу ставлю и сам доделываю, а тут не получалось, спасибо что написал этот комент )
Я так и знал что нужно в коменты обратиться с этим вопросом)) Гуглить уже устал почему не рендерится, загляну, думаю, сюда )
😂😂😂
приятно знать что ты не один такой, который все проверил, а оно не работает, потратил кучу времени, и решил досмотреть последние несколько секунд)
Короче,дружок, если ты смотришь этот видос на карантине в 2020 году. И посмотрел уже 45 уроков к ряду,но в какой то момент может быть моргнул или зевнул там я не знаю,и стало вдруг ничего не понятно и ты в конец запутался что куда передается и откуда что вызывается и как делать можно, но на самом деле нельзя и что хорошо бы знать,но на самом деле не очень то и нужно=)))То знай ты не один такой в этом холодном и жестоком мире...
Ага... Особенно, когда удалишь файл StoreContext, а каким то чудесным образом связь Provider ( import ) с этим УДАЛЁННЫМ файлом ( ./StoreContext ) не оборвалась - даже после перезагрузки WebStorm`a ...
@@lvasmart3516 ou-ou-ou it's magic, you know... )
@@lvasmart3516 мы подключаем библиотеку реакт-редакс, а в ней есть встроенный метод "Provider". Просто, когда мы писали свой метод, Димон назвал так же чтобы было легче понять и не переписывать код. Но вы запутались. Надеюсь, ясно донес свои мысли))
@@SunlighT_90 ты красава) яснее некуда )
а что в итоге то ?
устроился на работу ?
как хорошо что все выпуски записаны и не надо ждать следующего видоса )))))))
Я просто нереально запутался...
И я тоже уже запутался, поэтому сейчас просто посмотрю все видео, а потом заново начну с первого урока!
ты не один такой, особенно когда тебе в процессе подсовывают видео где все делают в 1 классовой компоненте(
Мне помогла в какой-то момент остановка, взял ручку и листик, посмотрел урок еще раз и все визуально отобразил.
@@ivanpiatovolenko9607 да, да, лучше смотреть, потом делатт без видео. В процессе и поймешь что не понял и будешь отвечать на эти вопросы.
советую работать с гитом, чтото не понятно, вернулся на прошлый коммит, и делай заного но по другому.
когда по привычке начал петь перед родителями "айтика айтика камас....." и тут вспомнил значение слова .......cутры😅😅😅
Димыч, спасибо. Теперь начинаю осознавать с какой находчивостью изначально выстроен курс.
Спасибо за обратную связь! ✊
Каждый раз возвращаюсь к просмотренным видео из этого курса и замечаю столько деталей и ответов на мои вопросы я упустил. Сравнить можно с фильмом, который просто смотришь, а когда пересматриваешь - замечаешь кучу деталей, которых каким-то образом пропустил!
Чел, спасибо!
Сколько не смотрел видео других автор не догонял mapDispatchToProps.
Но имея фундамент, который ты построил, урок за уроком, помог мне понять что такое Redux.
Спасибо за твой труд!!! Я понимаю как трудно построить учебную программу.
Обучать других куда сложнее, чем самому кодить.
не досмотрел ролик до конца и начал сильно переживать почему же не происходит обновления по добавлению символа) а потом досмотрел и успакоился)
"мой мозг" - здесь моя остановочка
Мой мозг: где мой мозг??
@@andreiBylkin У меня
Димыч, спасибо, меня взяли на работу! :)
Вау, поздравляю!) А сколько уроков прошла, и сколько других проектов у тебя было?
Поздравляю вас
@@user-te4do7ou7v прошла 50) других проектов не было, параллельно учила и по других уроках, до этого с другой технологией работала)
Лайк, наконец-то вышло то видео которого мне так не хватало
Юбилейные 50 тыс. подписчиков! Поздравляю! Так держать!
Так приятно смотреть, спасибо за колоссальный труд. И способ подачи информации такой крутой, разъяснение архитектуры топ
Димыч, не бросай нас! Выложи новые уроки
Это первое видео, которое пришлось смотреть не на скорости 2х!
Сложна!
Отлично!!! Бомбим дальше!!!!
Димыч и так достаточно быстро говорит) в 2х жоска....
Огромная благодарность за прекрасные уроки!!
круто как всегда, спасибо Дима!!!Классно останавливаться и делать самой, а потом просто досматривать видео
По завету Димыча решил все сделать сам, не досматривая видос. Несколько часов про°ћ∆љся с багом, а оказалось это не баг вовсе, а тема для следующего видео))
То же самое! Я уже полезла дебажить 😅
Спасибо тебе мил человек, сэкономил мне несколько часов жизни
ХАХА) Не досмотрел видос и думал что я что-то не так сделал . Не печаталось тоже . 2 часа сидел . Спасибо за видос !)
Спасибо за очередной отличный видео-урок!
С каждым уроком все круче и круче инфа
12.07.21 Сколько радости приносит, когда проект запускается без ошибок, а еще больше радость испытываю когда возникшие ошибки сам могу устранить!
Огромнейшее спасибо за курс!! Ты помогаешь реализовать мою цель, быть разработчиком!!
Автор крут!!! Все по полочкам... Нет слов. Как хорошо, что я нашел этот плейлист!!!
Спасибо, Димыч!👏 Пришлось дополнительно почитать Redux documentation и теперь все отлично.
Да что ж ты за человек-то такой.. гениальный?! Наверное еще никто никогда так не подводил к пониманию этой темы. Причем нормальному пониманию, а не зазубриванию параметров и названий функций
Димыч ты лучший! я просто воспринимаю твою подачу на 5+ , и в инкубаторе у тебя четко построенная программа, кстати всем советую!
единственное задолбался уже типизировать)
Все очень круто! Дмитрию большое спасибо за такое разжевывание и огромную самоотдачу!
Спасибо тебе огромное за твой курс. Иногда бывает становится трудно освоить все видео за 1 присест но прогулка на велосипеде решает проблему. Да с каждым видео становится все жарче и жарче 8)
Спасибо большое за курс! Проходила платный, достаточно дорогой курс про React, но если честно, в голове осталась полная каша. Многое было непонятно, почему и как делается, даже стала думать, что это не мое и надо все бросить. И только слушая курс Димыча, стала понимать что к чему, появились озарения: так вот оно как! это ж в принципе все просто и логично. Ну и отдельное спасибо за позитивные эмоции и такую драйвовую подачу материала
🧡
для тех у кого будут подобные ошибки: typeerror object(...) is not a function at provider, обновите зависимости (npm update) и перезапустите проект
Так и знал что в комментах появится хороший человек который об этом скажет) Спасибо!
Спасибо, очень помог
У меня были ошибки "неправильно используете хуки, проверьте версию React" но эта команда (npm update) также помогла.
Спасибо, человечище!
Была ошибки " typeerror: addPosts is not a function" и " typeerror: onPostChange is not a function"
В итоге я накосячил с именами функций, в первом случае надо было написать "addPost" (а не "addPosts", внимание на бувку S в конце) а во втором "updateNewPostText".
Долго искал в чем проблема, и пока не начал рисовать на бумажке схему передачи не мог найти))
Возможно этот коммент поможет тем, кто так же напутал пути передачи функций)
Идеальное объяснение, идеальный урок. Кайфую просто. Спасибо, Димыч!
Спасибо огромное за твой труд! Смотрю дальше!
А я по реакту летел потом бежал сейчас ползу, но до финиша дойду)
И как успехи? Уже вкалываешь бро? Какого быть реактным?)
@@_e_mask не пока нет ) карона вирус пережидаю )) куда я хотел попасть там набор новичков пристановили.
@@andreityryshkin3784 корониус вряд ли закончится, сейчас уже неплохо развито дистант работа, почти в каждой вакансии пишется что можно или даже нужно работать на дому, хз как там у вас, но я в россии
@@user-uw9is8gw2k я тоже в России, у меня есть работа стабильно преносящая доход, сейчас я не хочу рисковать идти новичком куда нибудь
@@andreityryshkin3784 так зачем учился?
Все круто! Ждем следующее видео...... Учитель сказал вечером))) но... видимо слишком много учеников
Сколько смотрел видео, у тебя самая лучшая программа 👍🏽 спасибо, что делаешь такие вещи
The BEST lessons of React & Redux !!!
Ура добрались! Радует регулярность выпусков. Ну и хочу отметить вашу способность разжевать "механику" простыми словами. Спасибо!
смотришь в 2022 и выше? не юзай connect, есть очень удобная замена этому, useSelector, а вообще если хочешь прийти на работу чуть-чуть выше чем просто junior, юзай redux s
slice, штука конечно запарная, но когда разберёшься будешь благодарить еще :))
Дуже вдячний тобі за коментар. Завдяки тобі звернув увагу на useSelector. Почитав документрацію та розібрався в цій темі значно краще
Ещё чуть-чуть и дойду до половины курса. Ура! Спасибо за курс
Димыч спасибо что рассказываешь как работают эти технологии под капотом, для меня это понимание очень важно, бомбим дальше!!!
Димыч Красава!) сломал нам код и закончил видос)
Спасибо за уроки, они крутые))Ждём новых❤️
И как с работой-то? Получилось в итоге устроиться ?
@@user-mu8by2yg3g Да, получилось) Даже и забыла , что комментарий здесь оставляла
@@JSCoffeeBreak а расскажи подробнее как обстояли твои дела до прохождения курса и после прохождения курса, на какой щас зп работаешь...?
@@user-mu8by2yg3g я нашла работу сразу же, не досмотрев курсы до конца. Училась много и учусь сейчас много, поэтому зп у меня хорошая. Сказать сумму не могу, так как подписывала договор о неразглашении, но скажу , что она на уровне уверенного мидла
@@JSCoffeeBreak а когда проходили путь самурая, какой у вас багаж был на тот момент?
Дима, ты лучший , спасибо за твой труд. Три дня искал ошибку =))))) всем добра и удачи )
То есть то, что будет все немного сложнее видимо все таки не было шуткой)) спасибо Димыч. Пересмотрел два раза, второй раз с подробным конспектом все усвоил. Тут главное еще не забывать и постоянно освежать в памяти то, что было раньше пройдено.
Очень глубокие подкапотные знания! Ты крут и видос крутой) а я дойду до конца этого курса и устроюсь на работ!
Устроился???
@@serdcevputi вообще да) но к сожалению не по реакту, там используют лару и jQuery (( но буду фрилансить на реакте) спрос есть
@@miguelgrushetckii4839 Поздравляю!) Много собеседований прошел?
@@serdcevputi спасибо) опыт был до этого на фрилансе, на реакте чуток и верстки поболее, + пхп, прошёл 3 собеса, первый в Не маленькую фирму, собес с hr, потом тестовое и далее не взяли, но текстовое пилил чуть более недели) ушло в итоге в гит для портфолио) причин не объяснили.. Потом в маленькую компанию, на реакте писать, прошёл в финал с ещё одним претендентом, выбрали его, но со мной сотрудничали в течение одного проекта, недели 2-3, понравилось мне) стал более уверенный, на третьем собесе (где я работаю), по тех части немного спрашивали, дали задание оплачиваемое на ларе и js, выполнил, решили взять. Главное вообще не бояться, нисколько. В некоторых даже на собес не звали, а хотелось хотя бы узнать, чего там спрашивают) советую искать работу, параллельно делать пет проект и изучать Димыча, плюс ts. Я заканчиваю проект на Next js, и все гуглится норм, так и происходит обучение) больше собесов, меньше волнения) удачи
@@miguelgrushetckii4839 здОрово :)
Очень важно в Provider передавать именно store={store}! И только так! не state={store} и никак иначе, только store={store} . У меня сайт не хотел работать совсем и выдавал ошибку про то что не может считать getState(), underfind и все тут. Думалось что называть можно как хочешь. Ан нет и не тут то было. Именно react-redux-y важно чтобы был именно store. А далее в контейнерной компоненте пишем пропсы для state и dispatch
сейчас на этом моменте и застрял. вроде передаю store={store}, но почему то все равно пишет getState(), underfind
Дим, у тебя очень круто вышло показать логику и подвести к conneсt, я раньше его встречал и даже использовал, но такого понимания, как после этого видео не было, реально спасибо большое за это
Димыч ты крут)) Всё объяснения понятны и легко разбираться. Смотрю дальше. Спасибо за уроки
На этом занятии становится страшно за тех кто не ведет конспект
Используйте вместо connect хуки: useDispatch, useSelector.
Из доки: Мы рекомендуем использовать API хуков React-Redux в качестве подхода по умолчанию в ваших компонентах React.
Существующий connectAPI по-прежнему работает и будет поддерживаться, но API хуков проще и лучше работает с TypeScript.
сделал на хуках, но почему то кажется что все равно в очень много логики в компонентах)
@@igorpshenichniy8228 аналогичная проблема, теперь либо объявлять selector и dispatch в каждой jsx компоненте, либо опять тащить все через пропсы. Спорный совет
Самое подробное и доступное объяснение Redux на просторах UA-cam. Спасибо, Димыч!
Димыч, супер уроки. Просто пушка. Я на курсы ходил. Но сейчас , именно, по твоим урокам учусь. Все становится на свои места. Правда, пересматриваю, по раз 5 последние уроки. Ты очень классно поясняешь, но все равно моменты: когда начинаешь сам писать код, затем пересматриваешь видосы заново , замечаешь нюансы, на которые при первом просмотре не обращал внимания.
У кого в итоге ошибка "object(...) is not a function react" provider, остановите проект и пропишите в консоль npm upgrade react react-dom
спасиб тебе милый человек, а из-за чего ошибочка скажи пожалуйста
Спасибо огромное. Скажи как разобрался?
Огромное СПАСИБО! Я уже заманался весь код смотреть, ищу, а вижу фигу, ещё раз ОГРОМНОЕ СПАСИБО!
только не upgrade, а update
@@Master-lh2xt раньше было именно upgrade
Сделал все как в видео, но у меня белый экран, не рендерит. Может кто знает куда копать ?
Спасибо!Лучшие уроки на ютуб!
спасбио!!! крутое видео-смотрю по второму кругу, записую,рисую. первый раз пробежался и так обломался...не спешите смотрите вдумчиво! летим
Чтобы печатался текст и добавлялся пост, надо в profile-reducer возвращать копию state. Из официальной документации: Обратите внимание, что возврат измененного объекта по той же ссылке является распространенной ошибкой, которая может привести к тому, что ваш компонент не будет повторно отображаться, как ожидалось.
"и надейтесь, молитесь что у вас ничего не сломается" лол )))
Спасибо Вам за все уроки, они мне очень помогли!
пошли сложные темы с mapStateToProps и mapDispatchToProps, но благодаря объяснениям Димыча все укладывается в голове по полочкам, спасибо за урок о работе с React-Redux!)
Дмитрий, будет ли изучение css-препроцессоров? как создавать с их помощью глобальные стили, использовать scss переменные и как это всё билдить с помощью реакта.
Я знаю почему dispatch не срабатывают в конце видео.5 лайков под моим комментарием и я развею эту интригу
За такое можно и 6 лайков поставить
Уже 5 есть..
Нужно вернуть копию state в редюсерах, да простит меня учитель
👍🙏🔥
@@user-wj2qg3wm5v, как?
Гугл уже блокирует меня 😨
отличный урок, спасибо! если изначально сильно не спешить и стараться разобраться что к чему, все понятно! отлично разжевано)))
Получилось! Вдобавок пришлось ещё разбивать сайдбар на части, и там тоже реализовывать презентационную и контейнерную) Радует что получается понимать, хоть и не всегда просто это выходит!
Ребят, обратите внимание, что в connect передаются сначала пропсы state, после идут dispatch, это строго. Я поменял местами и мне в state пришел dispatch, а в функцию с dispatch прилетели state. Очевидно белый экран и ошибки в консоли ( у меня прилетело от Provider, не мог взять getState() ).
просто огромное тебе спасибо братан я 20-й день не мог понять что за проблема уменя в коде, все перепробывал переписал код копался в гугле ничего не помогало,уже хотел забить на это, но ты меня очень выручил большое спасибо =D
@@Elbek_master рад был помочь. Успехов! 😊
14:07 Всё таки не понятно, от куда в f1 приходит state? Спасибо.
Или же он пришел к нам по пропсам минуя контекст???? Или всё же тут оно берется с контекста?
Этого не знает никто)
Интересно, хотим продолжения!!
Нелегко, но очень интересно. Спасибо за уроки! React Redux - круто! Лайк!)
connect(mapMyDreamsToProps, mapMyPossibilitiesToProps)(Live)
У кого будет ошибка: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. И там три варианта, в чем может быть дело.
Помогло обновление вручную пакета react-dom до 16.8.0(можно выше).
npm i react-dom@16.8.0 :пример как вручную обновлять нужные версии
Спасибо за программу курса, за "изобретение своего redux" и за подход "от практики к теории". Таким образом все гораздо лучше запоминается и усваивается.
Всегда в конце каждого видео, когда мы зарефакторили код, и все заработало, кажется, что все идеально, мы молодцы, и можно расходиться) Но столько ещё интересного впереди...
наконец-то connect, мы этого ждали))))
Если у кого нибудь не отрисовывается страница (белый экран, а в консоле ошибки), у меня было из за того что в , а можно так . Может быть кому нибудь поможет. А сообщения отправляются, только после переключения страничек, думаю про это будет рассказано в следующем уроке.
очень даже помогло))
Спасибо за урок, жаль не вышло у меня разобраться, почему текст не печатается
И как с работой-то? Получилось в итоге устроиться ?
Бомба курс! Смотрю по 5 раз
Спасибо за лучшие уроки по React Redux на youtube
Учитель давай новый урок, уже ломка сильная началась
Не учитель, а сэнсэй. Это же Путь самурая!)
@@dmitryloschinin5367 это же путь славянского самурая, учитель это и есть сэнсей
Славянский самурай - это сила!) avatars.mds.yandex.net/get-zen_doc/230574/pub_5b56073633c57b00ac2477a3_5b5609a1ad57b500a8c53ba3/scale_600
Димыч приём) когда новые выпуски?
Спасибо за твой труд! Смотрю дальше )
Я поражен насколько обдумано сделан курс, что б мы понимали тонкости и детали. Хотя от этого объем инфы больше и моя неподготовленная головушка пухнет =)) Димыч, ты просто мега-крутой! Респект! =)
давай урок по redux sagas!!
Будут обязательно!!!
если ошибка TypeError (TypeError: Object(...) is not a function) в redux, помогло npm i react@next react-dom@next может кому-то поможет, через ту ошибку не хотелось дальше продолжать..
Помогло) Спасибо
Красава!!!!!Бля мучался 3 часа!
Благодарю, добрый ты человек. Помогло. Хотела удалить проект.
Спасибо за уроки! Полетели дальше :)
Мы ждали-ждали и наконец дождались (как ты просил, коммент про connect)
Когда следующий видос?
Сегодня ВЕЧЕРОМ!!!
Сенсей, ты где?
Как же классно когда у тебя получается. Посмотрел такой начало, поставил на паузу сделал все сам по всему проєкту, досмотрел видео и погнал смотреть следующее. 👍🏻👍🏻👍🏻
У Вас наверника до этого были знание какие-то, потому что это мои первые курсы и мне очень тяжело дается
Дмитрий, огромная благодарность за этот курс, за подробную подачу информации, за разжевывание каждой детали. титанический труд, огромная проделанная тобой работа. почти каждый день с энтузиазмом занимаюсь, заряжена еще с первого видео! не ожидала, что курс будет настолько интересным! буду персматривать, записываю, конспектирую, но уже давно понимаю, что буду проходить курс еще раз! 17-01-2023! летим в завтрашний день!
окей, все также не работает, но зато реакт-редакс установлен)
Судя по речи автора, в Редаксе без дорожки кокса не разобраться.
Есть? )
Смотрела раз 5, мозг отключался и я не могла с пониманием досмотреть до конца. Помогло посмотреть последнее видео из этого плейлиста, и картина прояснилась. Супер.
Я так рад , что все выпуски есть уже, не люблю сериалы смотреть когда ждешь новые серии, я всегда жду когда выходят все и тогда начинаю смотреть=)) Хоть материал и застарелый, но все то, что я не понимал именно фундаментальные вещи мне открывают глаза на многое, но в тот же момент мои мозги закрывают глаза=))) тяжковато но главное ити на пролом и не сдаваться! кароче я погнал удачи тем кто тут з 2021. Не сдавайтесь! ( сказал я но сам тащу все через силу волю) Но по факту програмирование очень интересное! но сложно, очень.
Комментарий в поддержку из 2023го!
Круто как в сериале )), конец заинтриговал посмотреть следующую серию !
Сложно) Значит я на правильном пути) Спасибо Димыч за уроки, мега полезно и круто)
Спасибо за уроки!