45 - React JS практика - connect, mapStateToProps, mapDispatchToProps
🚀Стань квалифицированным разработчиком за 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 #практика #примеры #уроки #курс
Пікірлер: 915
Каждый раз, когда приходится удалять целый кусок кода, который работал, моё сердце плачет
@user-nh3cq9it6e
4 жыл бұрын
Перед этим еще раз 5 проверишь все ли работает , и в итоге ну нахер, пожалуй просто закоментирую пока
@ivandanilin3145
4 жыл бұрын
Видимо Димыч специально учит нас не привязываться к коду)) Чтобы потом нам было легче в реальном жестоком мире.
@victoriarudnik8500
3 жыл бұрын
поэтому для этого есть git
@user-ml5vp6rp9n
3 жыл бұрын
@@victoriarudnik8500 пользуюсь. Дело не в том, что я боюсь забыть, потерять что делала, а чисто психологически некомфортно)))) Было вначале. Сейчас уже привыкла)
@daniilbondar1316
3 жыл бұрын
для это есть git, и просто коммить себе на здоровье, а потом возвращайся на эти коммиты и любуйся какую дичь или может не дичь, ты делала раньше))
У меня пол часа бомбило с того что не идёт прорисовка , смирился и решил досмотреть оставшиеся 20 сек видео и Димыч такой:"А почему не рендерится я в следующем видео скажу"🤣🤣🤣
@nurdanokenov4439
3 жыл бұрын
Бля бро прочитал твой коммент пол дня мучился
@dalagas5465
2 жыл бұрын
У меня тоже прорисовки не было, всегда на паузу ставлю и сам доделываю, а тут не получалось, спасибо что написал этот комент )
@ihorbailov9698
2 жыл бұрын
Я так и знал что нужно в коменты обратиться с этим вопросом)) Гуглить уже устал почему не рендерится, загляну, думаю, сюда )
@nataliusta9785
Жыл бұрын
😂😂😂
@igetout
9 ай бұрын
приятно знать что ты не один такой, который все проверил, а оно не работает, потратил кучу времени, и решил досмотреть последние несколько секунд)
Короче,дружок, если ты смотришь этот видос на карантине в 2020 году. И посмотрел уже 45 уроков к ряду,но в какой то момент может быть моргнул или зевнул там я не знаю,и стало вдруг ничего не понятно и ты в конец запутался что куда передается и откуда что вызывается и как делать можно, но на самом деле нельзя и что хорошо бы знать,но на самом деле не очень то и нужно=)))То знай ты не один такой в этом холодном и жестоком мире...
@lvasmart3516
3 жыл бұрын
Ага... Особенно, когда удалишь файл StoreContext, а каким то чудесным образом связь Provider ( import ) с этим УДАЛЁННЫМ файлом ( ./StoreContext ) не оборвалась - даже после перезагрузки WebStorm`a ...
@user-rp8oy2kf5d
3 жыл бұрын
@@lvasmart3516 ou-ou-ou it's magic, you know... )
@SunlighT_90
3 жыл бұрын
@@lvasmart3516 мы подключаем библиотеку реакт-редакс, а в ней есть встроенный метод "Provider". Просто, когда мы писали свой метод, Димон назвал так же чтобы было легче понять и не переписывать код. Но вы запутались. Надеюсь, ясно донес свои мысли))
@user-yw4jn4bg3v
3 жыл бұрын
@@SunlighT_90 ты красава) яснее некуда )
@user-mu8by2yg3g
3 жыл бұрын
а что в итоге то ? устроился на работу ?
когда по привычке начал петь перед родителями "айтика айтика камас....." и тут вспомнил значение слова .......cутры😅😅😅
Димыч: "Все работает. Профайл отображается, Мессаджесс отображается". Ставлю на паузу, пишу код, следуя указаниям в уроке. Все отображается, текс не печатается.... Отматываю на начало, пересматриваю, вкуриваю еще раз, нахожу пару незначительных ошибок, но опять ничего не работает. Перематываю опять, ищу баг... Спустя полтора часа забиваю и досматриваю последние секунды видео. Димыч: - Давайте попробуем написать что-то и увидим, что... не пишется... Я: *грызу клавиатуру, деру волосы* P.S. Димыч, спасибо за курс!))
@termorey
3 жыл бұрын
Блин. Я три раза проект переписал, пока не прочёл
@user-sm2fh6ms8o
3 жыл бұрын
тоже самое 2 день не мог понять в чём проблема
@vadimsetsko173
3 жыл бұрын
Чувак, я потратил всю субботу пока не прочел твой комент, голова уже ничего не соображает. з.ы. Димыч, ты садист!
@user-rp8oy2kf5d
3 жыл бұрын
Как хорошо, что сначала зашел почитать комменты)
@temtemych4754
3 жыл бұрын
@@user-rp8oy2kf5d счастливчик😁
как хорошо что все выпуски записаны и не надо ждать следующего видоса )))))))
Я просто нереально запутался...
@user-qg4if2pn5h
4 жыл бұрын
И я тоже уже запутался, поэтому сейчас просто посмотрю все видео, а потом заново начну с первого урока!
@lisapatrikeevna3353
4 жыл бұрын
ты не один такой, особенно когда тебе в процессе подсовывают видео где все делают в 1 классовой компоненте(
@ivanpiatovolenko9607
4 жыл бұрын
Мне помогла в какой-то момент остановка, взял ручку и листик, посмотрел урок еще раз и все визуально отобразил.
@uzver3787
4 жыл бұрын
@@ivanpiatovolenko9607 да, да, лучше смотреть, потом делатт без видео. В процессе и поймешь что не понял и будешь отвечать на эти вопросы.
@daniilbondar1316
3 жыл бұрын
советую работать с гитом, чтото не понятно, вернулся на прошлый коммит, и делай заного но по другому.
Комментарий в поддержку из 2023го!
Каждый раз возвращаюсь к просмотренным видео из этого курса и замечаю столько деталей и ответов на мои вопросы я упустил. Сравнить можно с фильмом, который просто смотришь, а когда пересматриваешь - замечаешь кучу деталей, которых каким-то образом пропустил!
Чел, спасибо! Сколько не смотрел видео других автор не догонял mapDispatchToProps. Но имея фундамент, который ты построил, урок за уроком, помог мне понять что такое Redux. Спасибо за твой труд!!! Я понимаю как трудно построить учебную программу. Обучать других куда сложнее, чем самому кодить.
Димыч, спасибо. Теперь начинаю осознавать с какой находчивостью изначально выстроен курс.
@ITKAMASUTRA
4 жыл бұрын
Спасибо за обратную связь! ✊
У кого все работает в 2023, все норм, потому что мы использовали не просто redux, a redux toolkit, и в редьюсерах для изменения state создавали копии объектов (в видосе про Redux, если клму надо я расписал, что нужно сделать, чтобы все работало). Тут не печатается, как я понял из комментов как раз таки потому, что нельзя менять объект напрямую, нужна копия
"мой мозг" - здесь моя остановочка
@andreiBylkin
3 жыл бұрын
Мой мозг: где мой мозг??
@luckyman7842
3 жыл бұрын
@@andreiBylkin У меня
не досмотрел ролик до конца и начал сильно переживать почему же не происходит обновления по добавлению символа) а потом досмотрел и успакоился)
А я по реакту летел потом бежал сейчас ползу, но до финиша дойду)
@_e_mask
3 жыл бұрын
И как успехи? Уже вкалываешь бро? Какого быть реактным?)
@andreityryshkin3784
3 жыл бұрын
@@_e_mask не пока нет ) карона вирус пережидаю )) куда я хотел попасть там набор новичков пристановили.
@user-uw9is8gw2k
3 жыл бұрын
@@andreityryshkin3784 корониус вряд ли закончится, сейчас уже неплохо развито дистант работа, почти в каждой вакансии пишется что можно или даже нужно работать на дому, хз как там у вас, но я в россии
@andreityryshkin3784
3 жыл бұрын
@@user-uw9is8gw2k я тоже в России, у меня есть работа стабильно преносящая доход, сейчас я не хочу рисковать идти новичком куда нибудь
@user-uw9is8gw2k
3 жыл бұрын
@@andreityryshkin3784 так зачем учился?
Да что ж ты за человек-то такой.. гениальный?! Наверное еще никто никогда так не подводил к пониманию этой темы. Причем нормальному пониманию, а не зазубриванию параметров и названий функций
Димыч, спасибо, меня взяли на работу! :)
@user-te4do7ou7v
2 жыл бұрын
Вау, поздравляю!) А сколько уроков прошла, и сколько других проектов у тебя было?
@user-bo4oy7ns7z
2 жыл бұрын
Поздравляю вас
@user-yo7ec1ze3o
2 жыл бұрын
@@user-te4do7ou7v прошла 50) других проектов не было, параллельно учила и по других уроках, до этого с другой технологией работала)
смотришь в 2022 и выше? не юзай connect, есть очень удобная замена этому, useSelector, а вообще если хочешь прийти на работу чуть-чуть выше чем просто junior, юзай redux s slice, штука конечно запарная, но когда разберёшься будешь благодарить еще :))
@dominskyi7857
Жыл бұрын
Дуже вдячний тобі за коментар. Завдяки тобі звернув увагу на useSelector. Почитав документрацію та розібрався в цій темі значно краще
По завету Димыча решил все сделать сам, не досматривая видос. Несколько часов про°ћ∆љся с багом, а оказалось это не баг вовсе, а тема для следующего видео))
@nataliusta9785
Жыл бұрын
То же самое! Я уже полезла дебажить 😅
@2153a222
2 ай бұрын
Спасибо тебе мил человек, сэкономил мне несколько часов жизни
Это первое видео, которое пришлось смотреть не на скорости 2х! Сложна! Отлично!!! Бомбим дальше!!!!
@black_light
Жыл бұрын
Димыч и так достаточно быстро говорит) в 2х жоска....
для тех у кого будут подобные ошибки: typeerror object(...) is not a function at provider, обновите зависимости (npm update) и перезапустите проект
@user-her-son
3 жыл бұрын
Так и знал что в комментах появится хороший человек который об этом скажет) Спасибо!
@elegantrst7575
2 жыл бұрын
Спасибо, очень помог
@otto-vector
2 жыл бұрын
У меня были ошибки "неправильно используете хуки, проверьте версию React" но эта команда (npm update) также помогла.
@aleks44619
2 жыл бұрын
Спасибо, человечище!
@user-gh7sk4xw3u
2 жыл бұрын
Была ошибки " typeerror: addPosts is not a function" и " typeerror: onPostChange is not a function" В итоге я накосячил с именами функций, в первом случае надо было написать "addPost" (а не "addPosts", внимание на бувку S в конце) а во втором "updateNewPostText". Долго искал в чем проблема, и пока не начал рисовать на бумажке схему передачи не мог найти)) Возможно этот коммент поможет тем, кто так же напутал пути передачи функций)
12.07.21 Сколько радости приносит, когда проект запускается без ошибок, а еще больше радость испытываю когда возникшие ошибки сам могу устранить!
На этом занятии становится страшно за тех кто не ведет конспект
Интересно, хотим продолжения!!
Спасибо большое за курс! Проходила платный, достаточно дорогой курс про React, но если честно, в голове осталась полная каша. Многое было непонятно, почему и как делается, даже стала думать, что это не мое и надо все бросить. И только слушая курс Димыча, стала понимать что к чему, появились озарения: так вот оно как! это ж в принципе все просто и логично. Ну и отдельное спасибо за позитивные эмоции и такую драйвовую подачу материала
@nataliusta9785
Жыл бұрын
🧡
Лайк, наконец-то вышло то видео которого мне так не хватало
Очень интересно,большое спасибо !
Спасибо за отличное объяснение!
Димыч, не бросай нас! Выложи новые уроки
ХАХА) Не досмотрел видос и думал что я что-то не так сделал . Не печаталось тоже . 2 часа сидел . Спасибо за видос !)
Спасибо за уроки! Полетели дальше :)
Спасибо!Лучшие уроки на ютуб!
Огромнейшее спасибо за курс!! Ты помогаешь реализовать мою цель, быть разработчиком!!
Используйте вместо connect хуки: useDispatch, useSelector. Из доки: Мы рекомендуем использовать API хуков React-Redux в качестве подхода по умолчанию в ваших компонентах React. Существующий connectAPI по-прежнему работает и будет поддерживаться, но API хуков проще и лучше работает с TypeScript.
@igorpshenichniy8228
2 жыл бұрын
сделал на хуках, но почему то кажется что все равно в очень много логики в компонентах)
@user-we9sq7to7u
Жыл бұрын
@@igorpshenichniy8228 аналогичная проблема, теперь либо объявлять selector и dispatch в каждой jsx компоненте, либо опять тащить все через пропсы. Спорный совет
дочекався редакса, на половині, цікаво що буде далі
Спасибо огромное за твой труд! Смотрю дальше!
Очень важно в Provider передавать именно store={store}! И только так! не state={store} и никак иначе, только store={store} . У меня сайт не хотел работать совсем и выдавал ошибку про то что не может считать getState(), underfind и все тут. Думалось что называть можно как хочешь. Ан нет и не тут то было. Именно react-redux-y важно чтобы был именно store. А далее в контейнерной компоненте пишем пропсы для state и dispatch
@user-wh8vg4zy4s
6 ай бұрын
сейчас на этом моменте и застрял. вроде передаю store={store}, но почему то все равно пишет getState(), underfind
Все круто! Ждем следующее видео...... Учитель сказал вечером))) но... видимо слишком много учеников
The BEST lessons of React & Redux !!!
Спасибо за очередной отличный видео-урок!
Димыч Красава!) сломал нам код и закончил видос)
Ура добрались! Радует регулярность выпусков. Ну и хочу отметить вашу способность разжевать "механику" простыми словами. Спасибо!
наконец-то connect, мы этого ждали))))
Димыч, спасибо, ждём следующие уроки!)
Димыч ты лучший! я просто воспринимаю твою подачу на 5+ , и в инкубаторе у тебя четко построенная программа, кстати всем советую! единственное задолбался уже типизировать)
Спасибо за уроки, они крутые))Ждём новых❤️
@user-mu8by2yg3g
3 жыл бұрын
И как с работой-то? Получилось в итоге устроиться ?
@JSCoffeeBreak
3 жыл бұрын
@@user-mu8by2yg3g Да, получилось) Даже и забыла , что комментарий здесь оставляла
@user-mu8by2yg3g
3 жыл бұрын
@@JSCoffeeBreak а расскажи подробнее как обстояли твои дела до прохождения курса и после прохождения курса, на какой щас зп работаешь...?
@JSCoffeeBreak
3 жыл бұрын
@@user-mu8by2yg3g я нашла работу сразу же, не досмотрев курсы до конца. Училась много и учусь сейчас много, поэтому зп у меня хорошая. Сказать сумму не могу, так как подписывала договор о неразглашении, но скажу , что она на уровне уверенного мидла
@user-mu8by2yg3g
3 жыл бұрын
@@JSCoffeeBreak а когда проходили путь самурая, какой у вас багаж был на тот момент?
Все понятно, респект учитель
Спасибо, все супер.
"и надейтесь, молитесь что у вас ничего не сломается" лол )))
Очень глубокие подкапотные знания! Ты крут и видос крутой) а я дойду до конца этого курса и устроюсь на работ!
@serdcevputi
3 жыл бұрын
Устроился???
@miguelgrushetckii4839
3 жыл бұрын
@@serdcevputi вообще да) но к сожалению не по реакту, там используют лару и jQuery (( но буду фрилансить на реакте) спрос есть
@serdcevputi
3 жыл бұрын
@@miguelgrushetckii4839 Поздравляю!) Много собеседований прошел?
@miguelgrushetckii4839
3 жыл бұрын
@@serdcevputi спасибо) опыт был до этого на фрилансе, на реакте чуток и верстки поболее, + пхп, прошёл 3 собеса, первый в Не маленькую фирму, собес с hr, потом тестовое и далее не взяли, но текстовое пилил чуть более недели) ушло в итоге в гит для портфолио) причин не объяснили.. Потом в маленькую компанию, на реакте писать, прошёл в финал с ещё одним претендентом, выбрали его, но со мной сотрудничали в течение одного проекта, недели 2-3, понравилось мне) стал более уверенный, на третьем собесе (где я работаю), по тех части немного спрашивали, дали задание оплачиваемое на ларе и js, выполнил, решили взять. Главное вообще не бояться, нисколько. В некоторых даже на собес не звали, а хотелось хотя бы узнать, чего там спрашивают) советую искать работу, параллельно делать пет проект и изучать Димыча, плюс ts. Я заканчиваю проект на Next js, и все гуглится норм, так и происходит обучение) больше собесов, меньше волнения) удачи
@andreiBylkin
3 жыл бұрын
@@miguelgrushetckii4839 здОрово :)
Спасибо за уроки!
Спасибо за твой труд! Смотрю дальше )
Чтобы печатался текст и добавлялся пост, надо в profile-reducer возвращать копию state. Из официальной документации: Обратите внимание, что возврат измененного объекта по той же ссылке является распространенной ошибкой, которая может привести к тому, что ваш компонент не будет повторно отображаться, как ожидалось.
У кого в итоге ошибка "object(...) is not a function react" provider, остановите проект и пропишите в консоль npm upgrade react react-dom
@LoonyPatient
4 жыл бұрын
спасиб тебе милый человек, а из-за чего ошибочка скажи пожалуйста
@artemshalamov2736
4 жыл бұрын
Спасибо огромное. Скажи как разобрался?
@andreyvolkov3117
4 жыл бұрын
Огромное СПАСИБО! Я уже заманался весь код смотреть, ищу, а вижу фигу, ещё раз ОГРОМНОЕ СПАСИБО!
@Master-lh2xt
3 жыл бұрын
только не upgrade, а update
@ShatMs1
3 жыл бұрын
@@Master-lh2xt раньше было именно upgrade
Спасибо, твой уроки - супер
смотрю спустя год, устроился на работу, а там как раз старый редакс и куча депрекейтед библ))
connect(mapMyDreamsToProps, mapMyPossibilitiesToProps)(Live)
Ребят, обратите внимание, что в connect передаются сначала пропсы state, после идут dispatch, это строго. Я поменял местами и мне в state пришел dispatch, а в функцию с dispatch прилетели state. Очевидно белый экран и ошибки в консоли ( у меня прилетело от Provider, не мог взять getState() ).
@Elbek_master
Жыл бұрын
просто огромное тебе спасибо братан я 20-й день не мог понять что за проблема уменя в коде, все перепробывал переписал код копался в гугле ничего не помогало,уже хотел забить на это, но ты меня очень выручил большое спасибо =D
@meliond3984
Жыл бұрын
@@Elbek_master рад был помочь. Успехов! 😊
Огромная благодарность за прекрасные уроки!!
Здорово! двигаюсь дальше!
Дмитрий, будет ли изучение css-препроцессоров? как создавать с их помощью глобальные стили, использовать scss переменные и как это всё билдить с помощью реакта.
Сделал все как в видео, но у меня белый экран, не рендерит. Может кто знает куда копать ?
Спасибо за ваш труд! Иду дальше :)
Спасибо учител!
Я знаю почему dispatch не срабатывают в конце видео.5 лайков под моим комментарием и я развею эту интригу
@ann_netesa
5 жыл бұрын
За такое можно и 6 лайков поставить
@sergiokurilov152
5 жыл бұрын
Уже 5 есть..
@user-wj2qg3wm5v
5 жыл бұрын
Нужно вернуть копию state в редюсерах, да простит меня учитель
@ITKAMASUTRA
5 жыл бұрын
👍🙏🔥
@sulaymonhursanov932
5 жыл бұрын
@@user-wj2qg3wm5v, как? Гугл уже блокирует меня 😨
Если у кого нибудь не отрисовывается страница (белый экран, а в консоле ошибки), у меня было из за того что в , а можно так . Может быть кому нибудь поможет. А сообщения отправляются, только после переключения страничек, думаю про это будет рассказано в следующем уроке.
@user-ed3hw6um7q
2 жыл бұрын
очень даже помогло))
Спасибо за труд!!!
Большое реактивное спасибо, Димыч!
У кого будет ошибка: 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 :пример как вручную обновлять нужные версии
Учитель давай новый урок, уже ломка сильная началась
@dmitryloschinin5367
5 жыл бұрын
Не учитель, а сэнсэй. Это же Путь самурая!)
@user-wj2qg3wm5v
5 жыл бұрын
@@dmitryloschinin5367 это же путь славянского самурая, учитель это и есть сэнсей
@dmitryloschinin5367
5 жыл бұрын
Славянский самурай - это сила!) avatars.mds.yandex.net/get-zen_doc/230574/pub_5b56073633c57b00ac2477a3_5b5609a1ad57b500a8c53ba3/scale_600
Нелегко, но очень интересно. Спасибо за уроки! React Redux - круто! Лайк!)
Так приятно смотреть, спасибо за колоссальный труд. И способ подачи информации такой крутой, разъяснение архитектуры топ
Спасибо за урок, жаль не вышло у меня разобраться, почему текст не печатается
@user-mu8by2yg3g
3 жыл бұрын
И как с работой-то? Получилось в итоге устроиться ?
Димыч приём) когда новые выпуски?
Спасибо Димыч,как всегда на высоте
Спасибо, Димыч! Смотрю, учусь
давай урок по redux sagas!!
@ITKAMASUTRA
5 жыл бұрын
Будут обязательно!!!
14:07 Всё таки не понятно, от куда в f1 приходит state? Спасибо. Или же он пришел к нам по пропсам минуя контекст???? Или всё же тут оно берется с контекста?
@user-sl1kv2yr7t
4 жыл бұрын
Этого не знает никто)
Я просто нереально благодарен!
Спасибо Вам за все уроки, они мне очень помогли!
Сенсей, ты где?
Когда следующий видос?
@ITKAMASUTRA
5 жыл бұрын
Сегодня ВЕЧЕРОМ!!!
плюсик для лучшего ранжирования =)
урок бомба, осталось только его понять))) Рахмет автору)))
если ошибка TypeError (TypeError: Object(...) is not a function) в redux, помогло npm i react@next react-dom@next может кому-то поможет, через ту ошибку не хотелось дальше продолжать..
@22prize22
5 жыл бұрын
Помогло) Спасибо
@bitcoin-
4 жыл бұрын
Красава!!!!!Бля мучался 3 часа!
@tanay6489
3 жыл бұрын
Благодарю, добрый ты человек. Помогло. Хотела удалить проект.
Судя по речи автора, в Редаксе без дорожки кокса не разобраться.
@vvks9901
Жыл бұрын
Есть? )
Спасибо за урок!
Мы ждали-ждали и наконец дождались (как ты просил, коммент про connect)
окей, все также не работает, но зато реакт-редакс установлен)
Ура! новый урок
Летим дальше, от души Димыч !!!❤
Юбилейные 50 тыс. подписчиков! Поздравляю! Так держать!
Твои уроки ОЧЕНЬ хороши
Спасибо, Димыч!👏 Пришлось дополнительно почитать Redux documentation и теперь все отлично.
лайк с меня.сразу следующее видео включаю
спасибо. Идем дальше
Димыч, спасибо! Летим дальше!
Спасибо за лучшие уроки по React Redux на youtube
С каждым уроком все круче и круче инфа
spasibo za urok !