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 тысяча копий судя по просмотрам.

[@disposables72]

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

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

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

[@yuryhouse4226]

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

[@olegivanov80]

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

[@ITKAMASUTRA]

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

[@dechto1]

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

[@__maxsoul643]

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

[@ITKAMASUTRA]

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

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

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

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

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

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

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

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

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

[@romanpomin1967]

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

[@mariia6820]

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

[@denkodatskyi3381]

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

[@antonsydorovych1981]

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

[@pashabezk]

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

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

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

[@bystryisokol1546]

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

[@ITKAMASUTRA]

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

[@АннаБояршинова-о3т]

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

[@AlenaHrudavenka]

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

[@root_admin]

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

[@egorpobylets6597]

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

[@volodymyrsus]

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

[@Hayabusa17]

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

[@xbelmondox]

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

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

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

[@clientmvideo150]

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

[@VSsoviet]

@@clientmvideo150 da.

[@indigosay]

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

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

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

[@indigosay]

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

[@АрсенОсипов-ж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!!! Спасибо за урок :)

[@__online7250]

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

[@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 пользователей, то их айди будут отфильтровываться поочереди (выходит что очищение или копирование пустым, как вы предложили, получается не слишком эффективным, хотя при каких то иных обстоятельствах имеет место быть) :) Очень надеюсь, что я все правильно поняла и не ввожу вас в заблуждение 😅😅😅

[@sos_voice_of_nature]

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

[@dimitriitkach7697]

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

[@oksanamishota6514]

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

[@cikada3398]

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

[@aliaksandrhrechny9544]

Аналогично)

[@ITKAMASUTRA]

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

[@Moroir]

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

[@MrVagula]

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

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

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

[@IgniosTyumen]

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

[@andreyn5333]

Ребята, подсказка, если у кого-то не получается задизейблить элемент - проверьте сделан ли этот элемент в виде кнопки (). Я изначально делал элемент через тэг поэтому рабочее решение, которое я написал не срабатывало. На кнопку можно повесить псевдо-класс disabled, на дивку нет (нужно делать через запрет клика)

[@Ilona-milz]

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

[@talaevleonid696]

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

[@frozeninside5004]

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

[@sergeev_rs]

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

[@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 не получалось

[@Smash69ful]

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

[@arayoflight]

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

[@sashaya6114]

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

[@kub1k]

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

[@losbur5416]

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

[@semial]

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

[@raprap630]

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

[@amaxe12345]

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

[@TheGenom888]

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

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

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

[@ITKAMASUTRA]

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

[@jemilsuleimanov209]

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

[@ivanmiarkulau8320]

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

[@alik64]

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

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

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

[@ctumyji9737]

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

[@marsonleonardovich4036]

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

[@sergsergey4251]

Разбор button disabled (follow\unfollow) в практическом курсе по React JS. Бомбим дальше ©

[@rrain]

важное замечание по работе реакта: ДО ЗАВЕРШЕНИЯ МЕТОДА-КОЛБЭКА (от кнопки например) НОВЫЕ ПРОПСЫ НЕ ПОСТУПЯТ В КОМПОНЕНТУ. Поэтому изменяемое/отправляемое в данный момент надо перекидывать через параметры вложенных функций.

[@denisshupenko1370]

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

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

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

[@vladyslavkravchenko5955]

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

[@ivansidarau5025]

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

[@artempavlenko5147]

когда нажимаем на follow => диспатчим объект => и передаём в него айдиху пользователя и isFetching: true (выполняется часть добавления айди в массив [...state.followingImProgress, action.userID] ). и метод массива some вернёт true ( id === props.user.id)}...) . После следует асинхронная часть .then (.....) , где диспатчим объект с isFetching: false и c этой же самой айдихой пользователя. В случае с isFetching: false выполняется та часть кода, где фильтруется масси(там уже лежит айди, которая попала с первым диспатчем и её "удаляем") и у кнопки теперь метод массива some не вернёт true, так как попросту там уже не будет этой айди ( id === props.user.id)}...) и кнопка не будет задизеиблина

[@aleks44619]

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

[@cherdan3273]

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

[@vladim1]

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

[@nachalponimat]

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

[@alekseyborkovsky9456]

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

[@nazarshvets7501]

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

[@plexterq3]

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

[@MikhailKuklenkov]

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

[@bezirgenmusayew7830]

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

[@aleksandrzelenskiy4000]

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

[@RUS4HELP]

Смотрю и конспектирую - 7 марта 2021 года!

[@TRIZ-Bogatyregold]

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

[@greed1595]

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

[@АндрейВерещагин-т1ю]

Спасибо за уроки

[@pannihto7588]

Можно сломать голову, если честно)

[@Султан-р2о]

Если почитать про методы или лучше посмотреть пару видео про них, становится гораздо проще

[@AndreiS-cu2wb]

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

[@johnmj750]

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

[@user-LvSerg777]

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

[@АлександрБульдоз]

Авторский путь, курс самурая 🦾🔥🥷🏻

[@noiseless6800]

Лазил в redux-e. Функция что бы задиспатчить экшен. Реально тоже самое что мы писали до этого, аж удивился) function bindActionCreator(actionCreator, dispatch) { return function () { return dispatch(actionCreator.apply(this, arguments)); }; }

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

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

[@rahalmamut01]

Спасибо за крутые уроки по ReactJS!

[@spacerider9426]

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

[@gorillatv577]

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

[@ГеннадийГорохов-ц8н]

Сегодня 18.11.21 Продолжаю учиться. Хочу всё проверить на себе, Стать фронтенд разработчиком! Уроки интересные каждая тема раскрыта достаточно хорошо.

[@konstantinavvakumtsev3944]

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

[@is_eliseeva]

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

[@Toolie-u9w]

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

[@miguelgrushetckii4839]

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

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

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

[@KirillPetechkin]

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

[@egorepir]

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

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

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

[@gatrianL]

React JS лучший курс

[@Olga-vw3ni]

React JS лучший курс Май 2020

[@RedSkyWan]

Поставил себе челендж - пройти "Путь самурая 1.0 " не больше чем за 2 недели. Начал 1 ноября. 64 урок - полёт нормальный. Спасибо за труд, Димыч!

[@АлександрРуденок-ь8з]

отличный выпуск, многое повторил Спасибо Димыч!!!!

[@saharnya]

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

[@MrUnderSan]

includes как по мне больше подходит в этом кейсе)

[@RomanKosolapov]

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