64 - React JS - практика, button disabled (follow\unfollow)

[@sergeysizov4819]

Ребята, не бойтесь. Я смотрел этот урок, повторил все за Димычем и потом начал разбираться, так как не понял. Взял ручку, листок и стал рисовать все функции, куда они ведут и что выдают. Получилась нормальная такая схема, сам все понял и теперь стало легче и увереннее)

[@rostikoffchannel]

да урок жесть мне тоже уровня не хватило. Димічу респект

[@АртурИсламов-ы1ю]

​@@rostikoffchannel Напишу тут коммент ,может кто увидит и кому то поможет. В action TOGGLE_IS_FOLLOWING_PROGRESS мы передаем свойство id и isFetching, так же у нас в стейте users-reducer есть такое же свойство и сначало у меня вызвало непонимание где мы его переприсваиваем и как на него завязываемся логикой. На самом деле никак. Свойство isFetching в action используется просто как флаг для тернарного выражения в редюсере и если мы передаем true то нужно использовать [...state.followingInProgress,action.id] тем самым добавляя id в массив что приведет к последующей disable кнопки т.к. в атрибуте кнопки disabled используется метод массива some возвращающий true либо false в зависимости от того есть или нет передаваемого значение в колбек в качестве атрибута, в нашем случае id. Либо когда мы в ответе в .then диспатчим этот же action мы передаем false и срабатывает state.followingInProgress.filter(id => id!==action.id) что удаляет из массива followingInProgress нужную id и тем самым disable кнопки отменяется потому что метод some в атрибуте disable в кнопке вернет false. То есть в action вы можете назвать это свойство как угодно что бы не было путаницы, например isAddingID тогда кейс в редьюсере будет выглядить так case TOGGLE_IS_FOLLOWING_PROGRESS: return {...state, followingInProgress: action.isAddingID ? [...state.followingInProgress,action.id] : state.followingInProgress.filter(id => id!==action.id) } а экшн криэйтор так : export const toggleIsFollowingProgress = (id: number,isAddingID:boolean) => ({type: TOGGLE_IS_FOLLOWING_PROGRESS, id,isAddingID} as const) не забудьте в правильном порядке передавать id и isAddingID что бы все это понять вы должны отлично понимать метод some, filter, тернарный оператор,псевдоложь и псевдоистину Всем удачи 🙃

[@sergeyv.8038]

Чувак, спасибо за твой уроки. Я диплом на реакт написал благодаря тебе. А сейчас ещё и на работу fullstack'ом взяли.

[@iharberasneu2905]

По ходу у меня тоже будет подобный диплом)

[@oleksiimuliar4123]

@@iharberasneu2905 нам главное в разных городах находится, чтобы не спалили) 😂

[@yuryhouse4226]

@@oleksiimuliar4123 главное код не под копирку делай, а проблемы в Реакте одни и теже и решаются одинаково. А спалят вас по тому что апишник одинаковый. Почти 31 тысяча копий судя по просмотрам.

[@ВикторКлименко-щ9ф]

Второй раз делаю соцсеть, этот урок уже понятен в отличие от первого раза. Сейчас смотрю видео со скоростью 1.5, а потом делаю сам, если чего-то не получается, то по-минимуму подсматриваю. Третий раз планирую сам всё сделать - и вперёд искать работу! Спасибо большое, премиум оплачен на 3 месяца)))

[@АлександрИванькович-т9ф]

Как ваши успехи?

[@disposables72]

Блин, в конце я поплыл с этими айдишками и массивами))) До этого прямо ясность была))) Ну ничего, пересмотрим))) После этого урока надо читать: Промисы, методы фильтрации: some и every. Кажется так))) . . . . #ReactJS, #DAL, #UI, #BLL, #SingleResponsibility, #JavaScript, #DontCry )))

[@ВладиславБирюков-ш5э]

вообще ещё уроков 5 назад он говорил что бы мы шли учить ajax запросы, а там он посоветовал идти учить promise и давал ссылки на эти уроки. Я с этими промисами просидел весь день, я докапывался до каждой мелочи, почему так, а не так и тд, так же досмотрев курс по ajax и сделав todo list, я добил эти промисы и все последние видосы сижу на чиле

[@yuryhouse4226]

Аналогично...

[@__maxsoul643]

Супер курс по react redux. Оформил платную подписку (пока на три месяца), так же всем рекомендую отблагодарить автора таким образом.

[@ITKAMASUTRA]

Спасибо, Макс!

[@МитяА-р5к]

да, будут деньги - обязательно 😀

[@Екатерина-ы7в4з]

@@МитяА-р5к 240 рублей любой может найти

[@olegivanov80]

Да, урок сложноватый когда ты на практике впервые сталкиваешься с применением методов some/filter. Я практически каждый шаг попытался сформулировать, что зачем и почему и в целом разобрался часов за 5). Всем успехов.

[@ITKAMASUTRA]

Быстро и не должно быть! Молодец ✊

[@dechto1]

Для простоты запоминания some. Метод some это метод поиска "сома в садке". Применяя метод Сом к Садку мы передаем ему id и как бы говорим "Вот тебе id для тебя это Сом, найди мне в садке этого Сома"! Метод говорит true если нашел нашего Сома!

[@bystryisokol1546]

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

[@ITKAMASUTRA]

Спасибо, бро!

[@AlenaHrudavenka]

Спасибо! Стараюсь посмотреть что будем делать, ставлю на паузу и сперва пробую сама, потом смотрю как бы сделал Димыч.

[@mariia6820]

Лучшие уроки по ReactJs!! Спасибо Вам огромное!!!Бесценный труд!

[@antonsydorovych1981]

Сложноватый выпуск) Спасибо!

[@romanpomin1967]

Ещё не встречал курса, чтобы автор показывал процесс поиска и исправления ошибок, а также рассказывал об методологии обучения. Димыч, спасибо!

[@Анна_Бояршинова]

React JS - практика, button disabled (follow\unfollow) Лучший курс !

[@cikada3398]

Еще видео не вышло, а я уже поставил лайк)

[@aliaksandrhrechny9544]

Аналогично)

[@ITKAMASUTRA]

Спасибо, ребят!

[@Moroir]

Асинхронный лайк, чо)

[@АртемКулинский-ю4о]

Удивительно, как хорошо Дмитрий объясняет! Самый лучший курс по React- Redux, который я когда- либо видел! Дмитрий лучший!

[@ЮрийМусатов-ь3я]

Ну Димыч ну хитрец)) Как же я затрахался получать 429 ошибку... Пока не снял ограничения API. Браво!

[@clientmvideo150]

У меня тоже ошибка 429.Это связанно с тем что у меня не премиум доступ?

[@VSsoviet]

@@clientmvideo150 da.

[@indigosay]

ну что поделать, благотворительностью занимается менее 1% людей. Я на своих проектах тестировал. Никто спасибо рублём не говорит, кроме 1-2 человек из 1000. На рекламе тоже мало зарабатываешь. А вот за платные услуги можно в 100-10000 раз больше рекламы заработать.

[@ВладимирГугин-ш7щ]

@@indigosay ну да, если хоть 100 человек купит АПИ то уже будет 300 000р. На продаже курса столько не заработаешь)

[@indigosay]

@@ВладимирГугин-ш7щ на продажах курсов зарабатывают по 50 млн рублей с 1 курса, если умеют грамотно организовать всё)

[@egorpobylets6597]

Спасибо!!! Лучший курс по React!!!!!

[@MrVagula]

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

[@pashabezk]

2022. Спасибо большое! Очень круто вот так потихоньку, помаленьку дополнять проект и узнавать что-то новое!

[@АннаЛелеко-ы3ю]

У мене чомусь (можливо тому, що задала певний бекграунд кнопці) візуально не показувало, що кнопка задизейблена. Намагалась знайти помилку в коді, поки не вирішила по замовчуванню задизейблити і аж тоді помітила, що вона недоступна для дій, але по візуалу така як і інші. Змінила в стилях :disabled і стало все на свої місця). Урраа!! Пішли далі!

[@akionka]

Требуем темную тему обратно, бунт!! xD

[@goodnoob71]

Димыч ты как всегда на высоте ))) но я бы в данной конкретной ситуации использовал Array.includes вместо Array.some disabled={props.is_following.some(id => id === props.id)} disabled={props.is_following.includes(props.id)} мне кажется для восприятия проще и понятней

[@ib12-g3p]

да, так удобнее) спасибо))

[@Andrey-lr7wp]

Спасибо, выручил. У меня одна кнопка вместо двух как у Димыча, и с some не получалось

[@ВасилийМерзляков-м4р]

Купил подписку, пока минимальную, как устроюсь кодером - отвалю щедро, ты крут, спасибо тебе

[@arayoflight]

Второй день смотрю это видео)) Вроде оно небольшое, но как грабли))

[@denkodatskyi3381]

Programming and Coding!!! React & Redux!!! The BEST!!!

[@MikhailKuklenkov]

Урок как всегда бомба, Дима! Тебе огромная благодараность) P.s.: - асинхронные операции не блокируют UI, в этом большой плюс) - .some - проверяет массив и возвращает ответ удовлетворяет ли хотя бы один элемент массива заданному условию Летим дальше, успех неизбежен)

[@xbelmondox]

Димыч спасибо тебе, за очередной урок! Оплатил и на ютубчике, и сервак так же. Огромный труд ты делаешь, сил тебе !!! React, redux, array , some

[@oksanamishota6514]

Привет из 2021! Спасибо за курс еще раз, за неделю прошла 35 уроков, очень довольна!

[@sos_voice_of_nature]

Лучшее объяснение React JS - практика, button disabled (follow\unfollow)

[@talaevleonid696]

Классный урок. Ожидаем продолжения курса на 300+ серий )

[@root_admin]

Курс великолепный! Если кому еще пригодится: вместо "some" можно использовать "find"

[@johnmj750]

Спасибо, Димыч!!!!👍🏻👍🏻👍🏻🫶🏻🫶🏻🫶🏻

[@ivansidarau5025]

это нереально запомнить и сделать самому, пришлось все под копирку, надеюсь дальше это можно будет упростить

[@losbur5416]

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

[@sergeev_rs]

Разобрался, круто! Летим дальше! React JS button disabled (follow\unfollow)

[@volodymyrsus]

Thanks! The best lessons of React & Redux!!! React , Redux, State, Store, Dispatch ,Connect, Action, Route, Reducer, Props, button disabled

[@ВладПономарёв-м1ъ]

Дима, спасибо. То чувство, когда через несколько дней пересмотрел урок, и все понял! Круто

[@alik64]

Очень хорошее объяснение! API проплатил иначе невозможно нормально работать и идти дальше! Да и как не отблагодарить за такой курс! Спасибо еще раз !!! Летим дальше 🚀 #api #filter #some #reduce #reactjs #реакт #редакс

[@bezirgenmusayew7830]

учитесь дебажить это вам поможет. прошло пару минут аааааааааааа я ненавижу дебажить)))) улыбнуло!!!

[@Артем-ч7э9ъ]

Вынос мозга))))) Надо спать идти)

[@АрсенОсипов-ж6щ]

API, JS, TS,ajax State, Store, Dispatch ,Connect, Action, Route, Provider, Reducer, mapStateToProps, mapDispatchToProps, {...state}, Props React Redux ,withRouter Практика, cookie,login follow-unfollow api JavaScript курс React DAL, axios.create Веб разработка разметка best of the best!!! Спасибо за урок :)

[@konstantinavvakumtsev3944]

Оформил годовую подписку.. Честный труд должен справедливо оплачиваться!. По React, Redux, Axios - это лучший курс в рунете! p.s. Кстати, ни у кого нет кряки для WebStorm? )))

[@КотМатроскин-х9ь]

еле еле понял, прям до усрачки тяжелая тема для меня.... Спасибо, Димыч

[@dashachernova3831]

Димыч рулит! Спасибо большое!

[@Toolie-u9w]

Решил отблагодарить Димыча за труды и оформил подписку на месяц. Когда найду роботу, оформлю на год))

[@TheGenom888]

Спасибо Димыч , посмотрел про button disabled с 10 по 20 минуту - 6 раз.

[@aleks44619]

Супер! Теперь наглядно видно как применяется и уж точно запомнится функция some. После пары раз использования фильтра и мап они врезались в память и их легко можно было как из кармана достать и применить, а вот some и every когда то прочитались и забылись. Димыч, спасибо тебе!!!

[@amaxe12345]

Спасибо за урок!!! #disabled #axios #reactjs

[@jses8560]

Covid-19 - не помеха учиться! 23.03.2020 Димыч - крутейший учитель!

[@ЭльнараГайнанова]

Во время самоизоляции нельзя деградировать 😁

[@Matfei-h2o]

🥲

[@user-LvSerg777]

Оплатил вчера подписку на 3 месяца) Спасибо Димычу за уроки!

[@cherdan3273]

C array.some и array.filter такая красота получилась, просто кайф. Не знал про них, большое спасибо!!!!

[@zenkowu2622]

На страничке мы нажимаем кнопку follow/unfollow, срабатывает обработчик событий и вызывает функцию ToggleFollowingProgress, передавая в качестве параметра isFetching true и айди пользователя, кнопку которого нажали. В редьюсер отправляется соответствующий action и поскольку из компоненты было передано true в качестве isFetching срабатывает первое условие в тернарном выражении, то айди пользователя (переданное при вызове колбека) добавляется в массив FollowingInProgress (вроде так назывался) В компоненте на кнопке висит disabled который проверяет если в массиве FollowingInProgress айди пользователя и если есть то кнопка дизейблится (для понимания как предлагалось ниже в комментариях метод some можно заменить на includes (который проверяет наличие соответствующего элемента в массиве ) для простоты понимания. Далее когда мы запостили\делитнули запрос и получили ответ, мы изменяем кнопку на странице на другое значение - unfollow\follow и снова вызывается функция ToggleFollowingProgress с новыми аргументами - false и этим же айди пользователя В редьюсере, поскольку пришел false срабатывает второе условие тернарного выражения и фильтруется массив FollowingInProgress - в нем остаются только те айди, которые НЕ совпадают с переданным при вызове колбека, то есть эта фильтрация удаляет пришедший айди из массива Поскольку теперь в массиве нет этого айди то и в дизейбле метод some\includes его не найдет и кнопка не будет дизейблится Если в массиве FollowingInProgress есть айди пользователя то кнопка дизейблится а если отфильтровать то не дизейбл Постаралась максимально описать логику процесса Оооочень надеюсь кому нибудь хоть немного помочь :)

[@АнастасияСтельмах-ы1р]

то есть, если у меня кнопка follow нажимается-меняется на unfollow, но остаётся задизейбленная, значит айди не фильтруется из массива? как это исправить? я уже 3 дня не могу справиться с этой проблемойб хотя код такой же как в видео(ну за исключением названий моих переменных).

[@zenkowu2622]

@@tinami1887 Насколько я помню и понимаю, да, массив остается по итогу пустым. Массив мы используем для того, чтобы можно было подписаться/отписаться на/от НЕСКОЛЬКИХ пользователей, чьи айди будут в этом массиве, и как раз по этой причине нам нужна эта фильрация, ведь если мы подписались сразу на 10 пользователей, то их айди будут отфильтровываться поочереди (выходит что очищение или копирование пустым, как вы предложили, получается не слишком эффективным, хотя при каких то иных обстоятельствах имеет место быть) :) Очень надеюсь, что я все правильно поняла и не ввожу вас в заблуждение 😅😅😅

[@raprap630]

Реально круть. Голову выносит дебаггинг, особенно когда ошибся в каком-то не очевидном месте, например переключение isFollowingProgress не в ответе .then а после него. Очень крутой курс. Димыч, спасибо тебе огромное!

[@plexterq3]

Спасибо за такой крутой курс. Оплатил подписку на api и patreon

[@IgniosTyumen]

Спасибо за крутые уроки по ReactJS! Судя по просмотрам пока немногие дошли до момента монетизации, так что скоро мотивация должна пойти=Р

[@vladyslavkravchenko5955]

Димыч я как устроюсь на работу обязательно закину тебе спасибо$$ в очень щедром количестве, сейчас попросту возможности нет, очень благодарен тебе и твоему труду!!! Даже не знаю где бы я учил эти все технологии если бы не этот курс. Очень благодарен за бесплатный но ооооооочень ценный контент.

[@dimitriitkach7697]

spasibo za urok - React JS - практика, button disabled (follow\unfollow)

[@semial]

Довольно сложный был выпуск. Спасибо за урок,Димыч!!!

[@alekseyborkovsky9456]

Большое спасибо за переход на светлый фон в WebStorm!!! Видно лучше реально!! :)

[@frozeninside5004]

Спасибо ! ) Хоть и являюсь студентом инкубатора, все равно именно этот курс мне дает максимум профита

[@АлександрГречный-ш9о]

Оформил подписку на 3 года)) Для лучшего сенсея по React не жалко! Идея курса реально крутая, собственно как и идея инкубатора! Димыч ты лучший! Если с помощью твоего курса дойду до трудоустройства, то однозначно первую зп потрачу на поддержку твоего проекта))

[@ITKAMASUTRA]

Спасибо, Саня, большое!!! 100% дойдёшь до конца!!!🙏

[@jemilsuleimanov209]

Привет, дошел?)

[@yevheniisahanenko5848]

В общем то с этого видео уже купил подписку на месяц ибо вообще невозможно стало тестить работу)) но вышло копейки, кстати после покупки сразу справился с багами)

[@greed1595]

Ноябрь 2020 года. Ценник не поднял Димыч! Спасибо!

[@TRIZ-Bogatyregold]

Димыч отличный прием решения проблемы с атрибутом disable для кнопки. Положил его себе в копилочку, и радуюсь! Спасибо бро! Летим

[@sashaya6114]

React JS - практика, button disabled (follow\unfollow) спасибо все как всегда четко)

[@RomanKosolapov]

Закинул немного бабосов, работаю php разрабом, сайтики, смs итд, очень нравится react, во многом благодаря Димычу! Как перейду на react разработчика закину еще)

[@AI_about_crypto]

Всё круто ) Всё получилось ) disabled работает как часы ) Всё понятно

[@denisshupenko1370]

learning react is awsome with u) Самураи, летим в космос!

[@Smash69ful]

Отличный урок. React, Redux, Ajax, JavaScript, JS.

[@kub1k]

Лучший курс для React разработчика!

[@aleksandrzelenskiy4000]

С первого раза не зашло. Повторил 2-3 раза, погуглил some, потренировал, проанализировал.. и все ок! Фшух-фшух летим дальше. Супер курс по React!

[@ivanmiarkulau8320]

Спасибо за урок, очень нужный функционал с button disabled!)

[@saharnya]

Оформила подписку вообще без вопросов! Огромное тебе спасибо) лайк

[@vladim1]

Двигатель греется, но по сути, все (еще) понятно. Надо бы и map() пересмотреть попутно. СЛОНА СЪЕДАЮТ ПО КУСОЧКУ! Потихоньку переварим. Димыч, спасибо!

[@bosfaction]

Димыч, ты крутой! Благодарю тебя! Завис на часов 6 на этом видосе ))))))) но все понятно вроде бы стало) Летим!

[@marsonleonardovich4036]

Спасибо за лучшие уроки на youtube

[@sanbuz]

очень интересный урок, респект

[@egorepir]

спасибо за видео, пошел погружаться в базу. Спасибо Димыч, летим . API купил хоть пока маленькая копеечка, но все же.

[@arsenvaskanian8910]

Круто. Оформил подписку на 3 месяца. Димыч, ты крут

[@KirillPetechkin]

С манипулированием айдишника было туговато, но после пересмотра видео и самостоятельного обдумывания в течение получаса вроде все стало на свои места) Спасибо, Димыч)

[@nazarshvets7501]

Смотрю курс , паралельно делаю PET-проект . Не соц сеть , а (уже типичный) сайт с фильмами . И хоть специфика сайтов разная , проблемы которые появляются в курсе одни и те же . Спасибо что решаешь их , многое из твоего курса инплементировал в свой проект.

[@AndreiS-cu2wb]

React, Redux - летим дальше! Сегодня оплатил подписку, для такого контента это копейки. Спасибо за твой труд!

[@Ilona-milz]

React, практика, button disabled (follow\unfollow). Круто!

[@is_eliseeva]

Дмитрий, спасибо за урок!

[@nachalponimat]

Спасибо за труд!! button disabled, disabled={true}

[@gorillatv577]

Отлично! Спасибо огромное за труд! Насчет зп джунов, кстати! Видел вакансии, где джунам обещали от 50-80 тыс. руб, даже 120 видел, но при условии, что быстро прокачаешься на миддла...

[@__online7250]

#disabled​ #axios​ #reactjs​ #практика​ #примеры​ #уроки​ #курс​

[@maksimpl]

Увидел косяк Димыча с пропсами и сразу писал правильно 😎😎😎

[@n0escape]

Проходя урок, наткнулся на багу: суть в том, что после нажатия на кнопку, все значения приходящие в компоненту через mapStateToProps были undefined, следовательно все методы map ругались на то что к ним приходят undefined, перепроверил многое. Оказалось проблема в Reducer, где мі отлавливаем событие клика и перезаписываем state. Решение - повторить в точности за Димычем. (я про структуру case в switch)

[@whicencer8819]

За последние 2 минуты +rep. А за курс +10000000000000000000000000000000000000000000000000000000000000000000 rep

[@Hayabusa17]

с использованием хуков: пишем в самой компоненте const [followingInProgress, setFollowingProgress] = useState(false) фоллоу ...идет запрос: setFollowingProgress(true) ...пришел ответ: setFollowingProgress(false) ------------- поправьте если неправильно ----upd: лучше в глобал стэйт кидать состояние, оказывается будут проблемы с санками

[@naiz4005]

Димыч красава, молодец! РАзвернуто здесь опишу про React, для proдвижения канала. Да, действительно важно блокировать кнопку на время запроса, чтобы не ддосить сервер

[@Мартин-ж3у]

все супер, упустил момент когда изменился followingInProgress: с false на [], не мог понять почему TypeError: props.following InProgress.some is not a function пока нашел причину, урок усвоил в рази лучше))

[@smolhs1586]

тупая кнопка не disablится, аоаоаоаоао. Но всё равно собралась пересматривать, потому что тяжеловато разобраться, какой toggle... за что отвечает в конечном счёте, и надо вспомнить, за что отвечает isFetching и почему мы его сюда присобачиваем как ни в чём ни бывало.... Всё ещё лучший курс по React redux reducer dispatch )

[@ctumyji9737]

Спасибо, было интересно! Пойду теорию пролистаю, чтобы закрепить и полечу дальше! React JS практика - топ курс!

[@ГенаФес-ъ9з]

Димыч, спасибо! Все круто! Как всегда!!! React JS - практика, button disabled (follow\unfollow)

[@MrSvent0vit]

ее, эпичное возвращение светлой темы! надеюсь, в следующих видосах она останется))

[@miguelgrushetckii4839]

Крутой выпуск! обязательно почитаю про some, every, filter, спасибо!

[@spacerider9426]

Спасибо огромное за твой труд! Смотрю дальше!

[@vl8224]

Спасибо. Классный и "живой" выпуск