45 - React JS практика - connect, mapStateToProps, mapDispatchToProps
HTML-код
- Опубликовано: 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 #практика #примеры #уроки #курс
Каждый раз, когда приходится удалять целый кусок кода, который работал, моё сердце плачет
Перед этим еще раз 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 ты красава) яснее некуда )
а что в итоге то ?
устроился на работу ?
когда по привычке начал петь перед родителями "айтика айтика камас....." и тут вспомнил значение слова .......cутры😅😅😅
Димыч: "Все работает. Профайл отображается, Мессаджесс отображается".
Ставлю на паузу, пишу код, следуя указаниям в уроке. Все отображается, текс не печатается.... Отматываю на начало, пересматриваю, вкуриваю еще раз, нахожу пару незначительных ошибок, но опять ничего не работает. Перематываю опять, ищу баг...
Спустя полтора часа забиваю и досматриваю последние секунды видео.
Димыч: - Давайте попробуем написать что-то и увидим, что... не пишется...
Я: *грызу клавиатуру, деру волосы*
P.S. Димыч, спасибо за курс!))
Блин. Я три раза проект переписал, пока не прочёл
тоже самое 2 день не мог понять в чём проблема
Чувак, я потратил всю субботу пока не прочел твой комент, голова уже ничего не соображает. з.ы. Димыч, ты садист!
Как хорошо, что сначала зашел почитать комменты)
@@user-rp8oy2kf5d счастливчик😁
как хорошо что все выпуски записаны и не надо ждать следующего видоса )))))))
Я просто нереально запутался...
И я тоже уже запутался, поэтому сейчас просто посмотрю все видео, а потом заново начну с первого урока!
ты не один такой, особенно когда тебе в процессе подсовывают видео где все делают в 1 классовой компоненте(
Мне помогла в какой-то момент остановка, взял ручку и листик, посмотрел урок еще раз и все визуально отобразил.
@@ivanpiatovolenko9607 да, да, лучше смотреть, потом делатт без видео. В процессе и поймешь что не понял и будешь отвечать на эти вопросы.
советую работать с гитом, чтото не понятно, вернулся на прошлый коммит, и делай заного но по другому.
Комментарий в поддержку из 2023го!
Каждый раз возвращаюсь к просмотренным видео из этого курса и замечаю столько деталей и ответов на мои вопросы я упустил. Сравнить можно с фильмом, который просто смотришь, а когда пересматриваешь - замечаешь кучу деталей, которых каким-то образом пропустил!
Чел, спасибо!
Сколько не смотрел видео других автор не догонял mapDispatchToProps.
Но имея фундамент, который ты построил, урок за уроком, помог мне понять что такое Redux.
Спасибо за твой труд!!! Я понимаю как трудно построить учебную программу.
Обучать других куда сложнее, чем самому кодить.
Димыч, спасибо. Теперь начинаю осознавать с какой находчивостью изначально выстроен курс.
Спасибо за обратную связь! ✊
У кого все работает в 2023, все норм, потому что мы использовали не просто redux, a redux toolkit, и в редьюсерах для изменения state создавали копии объектов (в видосе про Redux, если клму надо я расписал, что нужно сделать, чтобы все работало). Тут не печатается, как я понял из комментов как раз таки потому, что нельзя менять объект напрямую, нужна копия
"мой мозг" - здесь моя остановочка
Мой мозг: где мой мозг??
@@andreiBylkin У меня
не досмотрел ролик до конца и начал сильно переживать почему же не происходит обновления по добавлению символа) а потом досмотрел и успакоился)
А я по реакту летел потом бежал сейчас ползу, но до финиша дойду)
И как успехи? Уже вкалываешь бро? Какого быть реактным?)
@@_e_mask не пока нет ) карона вирус пережидаю )) куда я хотел попасть там набор новичков пристановили.
@@andreityryshkin3784 корониус вряд ли закончится, сейчас уже неплохо развито дистант работа, почти в каждой вакансии пишется что можно или даже нужно работать на дому, хз как там у вас, но я в россии
@@user-uw9is8gw2k я тоже в России, у меня есть работа стабильно преносящая доход, сейчас я не хочу рисковать идти новичком куда нибудь
@@andreityryshkin3784 так зачем учился?
Да что ж ты за человек-то такой.. гениальный?! Наверное еще никто никогда так не подводил к пониманию этой темы. Причем нормальному пониманию, а не зазубриванию параметров и названий функций
Димыч, спасибо, меня взяли на работу! :)
Вау, поздравляю!) А сколько уроков прошла, и сколько других проектов у тебя было?
Поздравляю вас
@@user-te4do7ou7v прошла 50) других проектов не было, параллельно учила и по других уроках, до этого с другой технологией работала)
смотришь в 2022 и выше? не юзай connect, есть очень удобная замена этому, useSelector, а вообще если хочешь прийти на работу чуть-чуть выше чем просто junior, юзай redux s
slice, штука конечно запарная, но когда разберёшься будешь благодарить еще :))
Дуже вдячний тобі за коментар. Завдяки тобі звернув увагу на useSelector. Почитав документрацію та розібрався в цій темі значно краще
Это первое видео, которое пришлось смотреть не на скорости 2х!
Сложна!
Отлично!!! Бомбим дальше!!!!
Димыч и так достаточно быстро говорит) в 2х жоска....
12.07.21 Сколько радости приносит, когда проект запускается без ошибок, а еще больше радость испытываю когда возникшие ошибки сам могу устранить!
По завету Димыча решил все сделать сам, не досматривая видос. Несколько часов про°ћ∆љся с багом, а оказалось это не баг вовсе, а тема для следующего видео))
То же самое! Я уже полезла дебажить 😅
Спасибо тебе мил человек, сэкономил мне несколько часов жизни
для тех у кого будут подобные ошибки: 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".
Долго искал в чем проблема, и пока не начал рисовать на бумажке схему передачи не мог найти))
Возможно этот коммент поможет тем, кто так же напутал пути передачи функций)
На этом занятии становится страшно за тех кто не ведет конспект
Спасибо большое за курс! Проходила платный, достаточно дорогой курс про React, но если честно, в голове осталась полная каша. Многое было непонятно, почему и как делается, даже стала думать, что это не мое и надо все бросить. И только слушая курс Димыча, стала понимать что к чему, появились озарения: так вот оно как! это ж в принципе все просто и логично. Ну и отдельное спасибо за позитивные эмоции и такую драйвовую подачу материала
🧡
Димыч, не бросай нас! Выложи новые уроки
Лайк, наконец-то вышло то видео которого мне так не хватало
дочекався редакса, на половині, цікаво що буде далі
Интересно, хотим продолжения!!
ХАХА) Не досмотрел видос и думал что я что-то не так сделал . Не печаталось тоже . 2 часа сидел . Спасибо за видос !)
Используйте вместо connect хуки: useDispatch, useSelector.
Из доки: Мы рекомендуем использовать API хуков React-Redux в качестве подхода по умолчанию в ваших компонентах React.
Существующий connectAPI по-прежнему работает и будет поддерживаться, но API хуков проще и лучше работает с TypeScript.
сделал на хуках, но почему то кажется что все равно в очень много логики в компонентах)
@@igorpshenichniy8228 аналогичная проблема, теперь либо объявлять selector и dispatch в каждой jsx компоненте, либо опять тащить все через пропсы. Спорный совет
Очень интересно,большое спасибо !
Спасибо за отличное объяснение!
Очень важно в Provider передавать именно store={store}! И только так! не state={store} и никак иначе, только store={store} . У меня сайт не хотел работать совсем и выдавал ошибку про то что не может считать getState(), underfind и все тут. Думалось что называть можно как хочешь. Ан нет и не тут то было. Именно react-redux-y важно чтобы был именно store. А далее в контейнерной компоненте пишем пропсы для state и dispatch
сейчас на этом моменте и застрял. вроде передаю store={store}, но почему то все равно пишет getState(), underfind
Огромнейшее спасибо за курс!! Ты помогаешь реализовать мою цель, быть разработчиком!!
плюсик для лучшего ранжирования =)
смотрю спустя год, устроился на работу,
а там как раз старый редакс и куча депрекейтед библ))
Все круто! Ждем следующее видео...... Учитель сказал вечером))) но... видимо слишком много учеников
Димыч Красава!) сломал нам код и закончил видос)
Спасибо за уроки! Полетели дальше :)
Спасибо!Лучшие уроки на ютуб!
"и надейтесь, молитесь что у вас ничего не сломается" лол )))
Димыч ты лучший! я просто воспринимаю твою подачу на 5+ , и в инкубаторе у тебя четко построенная программа, кстати всем советую!
единственное задолбался уже типизировать)
The BEST lessons of React & Redux !!!
Спасибо огромное за твой труд! Смотрю дальше!
Ура добрались! Радует регулярность выпусков. Ну и хочу отметить вашу способность разжевать "механику" простыми словами. Спасибо!
Спасибо за уроки, они крутые))Ждём новых❤️
И как с работой-то? Получилось в итоге устроиться ?
@@user-mu8by2yg3g Да, получилось) Даже и забыла , что комментарий здесь оставляла
@@JSCoffeeBreak а расскажи подробнее как обстояли твои дела до прохождения курса и после прохождения курса, на какой щас зп работаешь...?
@@user-mu8by2yg3g я нашла работу сразу же, не досмотрев курсы до конца. Училась много и учусь сейчас много, поэтому зп у меня хорошая. Сказать сумму не могу, так как подписывала договор о неразглашении, но скажу , что она на уровне уверенного мидла
@@JSCoffeeBreak а когда проходили путь самурая, какой у вас багаж был на тот момент?
Спасибо, все супер.
наконец-то connect, мы этого ждали))))
Очень глубокие подкапотные знания! Ты крут и видос крутой) а я дойду до конца этого курса и устроюсь на работ!
Устроился???
@@serdcevputi вообще да) но к сожалению не по реакту, там используют лару и jQuery (( но буду фрилансить на реакте) спрос есть
@@miguelgrushetckii4839 Поздравляю!) Много собеседований прошел?
@@serdcevputi спасибо) опыт был до этого на фрилансе, на реакте чуток и верстки поболее, + пхп, прошёл 3 собеса, первый в Не маленькую фирму, собес с hr, потом тестовое и далее не взяли, но текстовое пилил чуть более недели) ушло в итоге в гит для портфолио) причин не объяснили.. Потом в маленькую компанию, на реакте писать, прошёл в финал с ещё одним претендентом, выбрали его, но со мной сотрудничали в течение одного проекта, недели 2-3, понравилось мне) стал более уверенный, на третьем собесе (где я работаю), по тех части немного спрашивали, дали задание оплачиваемое на ларе и js, выполнил, решили взять. Главное вообще не бояться, нисколько. В некоторых даже на собес не звали, а хотелось хотя бы узнать, чего там спрашивают) советую искать работу, параллельно делать пет проект и изучать Димыча, плюс ts. Я заканчиваю проект на Next js, и все гуглится норм, так и происходит обучение) больше собесов, меньше волнения) удачи
@@miguelgrushetckii4839 здОрово :)
Чтобы печатался текст и добавлялся пост, надо в profile-reducer возвращать копию state. Из официальной документации: Обратите внимание, что возврат измененного объекта по той же ссылке является распространенной ошибкой, которая может привести к тому, что ваш компонент не будет повторно отображаться, как ожидалось.
Спасибо за очередной отличный видео-урок!
Все понятно, респект учитель
У кого в итоге ошибка "object(...) is not a function react" provider, остановите проект и пропишите в консоль npm upgrade react react-dom
спасиб тебе милый человек, а из-за чего ошибочка скажи пожалуйста
Спасибо огромное. Скажи как разобрался?
Огромное СПАСИБО! Я уже заманался весь код смотреть, ищу, а вижу фигу, ещё раз ОГРОМНОЕ СПАСИБО!
только не upgrade, а update
@@Master-lh2xt раньше было именно upgrade
connect(mapMyDreamsToProps, mapMyPossibilitiesToProps)(Live)
Спасибо за уроки!
Димыч, спасибо, ждём следующие уроки!)
Ребят, обратите внимание, что в connect передаются сначала пропсы state, после идут dispatch, это строго. Я поменял местами и мне в state пришел dispatch, а в функцию с dispatch прилетели state. Очевидно белый экран и ошибки в консоли ( у меня прилетело от Provider, не мог взять getState() ).
просто огромное тебе спасибо братан я 20-й день не мог понять что за проблема уменя в коде, все перепробывал переписал код копался в гугле ничего не помогало,уже хотел забить на это, но ты меня очень выручил большое спасибо =D
@@Elbek_master рад был помочь. Успехов! 😊
Дмитрий, будет ли изучение css-препроцессоров? как создавать с их помощью глобальные стили, использовать scss переменные и как это всё билдить с помощью реакта.
Спасибо за твой труд! Смотрю дальше )
Спасибо, твой уроки - супер
Сделал все как в видео, но у меня белый экран, не рендерит. Может кто знает куда копать ?
Я знаю почему dispatch не срабатывают в конце видео.5 лайков под моим комментарием и я развею эту интригу
За такое можно и 6 лайков поставить
Уже 5 есть..
Нужно вернуть копию state в редюсерах, да простит меня учитель
👍🙏🔥
@@user-wj2qg3wm5v, как?
Гугл уже блокирует меня 😨
Спасибо учител!
Огромная благодарность за прекрасные уроки!!
Если у кого нибудь не отрисовывается страница (белый экран, а в консоле ошибки), у меня было из за того что в , а можно так . Может быть кому нибудь поможет. А сообщения отправляются, только после переключения страничек, думаю про это будет рассказано в следующем уроке.
очень даже помогло))
У кого будет ошибка: 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 это же путь славянского самурая, учитель это и есть сэнсей
Славянский самурай - это сила!) avatars.mds.yandex.net/get-zen_doc/230574/pub_5b56073633c57b00ac2477a3_5b5609a1ad57b500a8c53ba3/scale_600
Спасибо за урок, жаль не вышло у меня разобраться, почему текст не печатается
И как с работой-то? Получилось в итоге устроиться ?
Спасибо за ваш труд! Иду дальше :)
Нелегко, но очень интересно. Спасибо за уроки! React Redux - круто! Лайк!)
Димыч приём) когда новые выпуски?
давай урок по redux sagas!!
Будут обязательно!!!
Большое реактивное спасибо, Димыч!
Понимаю что скорее всего на средину 2021 есть уже устарелая инфа в данном курсе, но как же круто что мы писали сначала свой state и store а уже потом установили redux и react-redux. Так намного проще понимать, чем какой-то виртуальный store, тут вон свое родное и пока не удаляемое) Спасибо за правильный путь в обучении!!!
14:07 Всё таки не понятно, от куда в f1 приходит state? Спасибо.
Или же он пришел к нам по пропсам минуя контекст???? Или всё же тут оно берется с контекста?
Этого не знает никто)
Сенсей, ты где?
Так приятно смотреть, спасибо за колоссальный труд. И способ подачи информации такой крутой, разъяснение архитектуры топ
Спасибо Димыч,как всегда на высоте
Когда следующий видос?
Сегодня ВЕЧЕРОМ!!!
если ошибка TypeError (TypeError: Object(...) is not a function) в redux, помогло npm i react@next react-dom@next может кому-то поможет, через ту ошибку не хотелось дальше продолжать..
Помогло) Спасибо
Красава!!!!!Бля мучался 3 часа!
Благодарю, добрый ты человек. Помогло. Хотела удалить проект.
Я просто нереально благодарен!
Спасибо, Димыч!
Смотрю, учусь
Судя по речи автора, в Редаксе без дорожки кокса не разобраться.
Есть? )
окей, все также не работает, но зато реакт-редакс установлен)
Не досмотрел видео до конца, из-за чего потратил несколько часов😅, Димыч ты лучший!
Спасибо за урок!
Спасибо Вам за все уроки, они мне очень помогли!
урок бомба, осталось только его понять))) Рахмет автору)))
Ура! новый урок
Мы ждали-ждали и наконец дождались (как ты просил, коммент про connect)
Летим дальше, от души Димыч !!!❤
Юбилейные 50 тыс. подписчиков! Поздравляю! Так держать!
Твои уроки ОЧЕНЬ хороши
спасибо. Идем дальше
С каждым уроком все круче и круче инфа
Спасибо, Димыч!👏 Пришлось дополнительно почитать Redux documentation и теперь все отлично.
конец 2022 года:
смотришь как Димыч делает через коннект, а затем переписываешь на хуках
но несмотря на это, огромное спасибо за фундамент который он закладывает нам в головы
А где вы изучали хуки?
Здравствуйте! Не объясните как сделать с хуками, буду очень благодарен
спасибо большое, все очень доходчиво!