React & Redux & TypeScript ПОЛНЫЙ КУРС 2021

Рет қаралды 191,802

Күн бұрын

В этом курсе мы на практике поработает с typescrit, react, redux и разработаем небольшое веб приложение.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Ссылка на исходный код - github.com/utimur/react-redux...
Необходимые знания для прохождения этого курса здесь ----- • Redux
Таймкоды:
00:00 - Введение, теория, план на урок
02:40 - Инициализация Redux store
03:20 - Первый редюсер + типизация
13:50 - CombineReducer, Provider
15:35 - Создаем хук UseTypedSelector
18:00 - Ассинхронный action creator + типизация
23:00 - Создаем хук UseActions
24:40 - Второй редюсер, масштабируем приложение + постраничный вывод
34:07 - Расширяем useActions
38:30 - Не забываем лайки, комментарии, я старался =)
Поддержать меня и мой канал вы можете по ссылкам ниже.
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469

Пікірлер: 610

@UlbiTV 3 жыл бұрын

Друзья, готовлю объемный FullStack проект, с интересной идеей, в котором знания из этого урока пригодятся, в ролике будут следующие технологии: ---- Nest JS + mongoDB + TypeScript - BACKEND React + Next + SSR + Redux + TypeScript + SEO - FRONTEND ---- P.S. Если интересен подобный ролик не забывай лайк и коммент!

@falsetrue7910 3 жыл бұрын

Вот это уже серьезно, очень интересно, ждем!

@johnnysel8186 3 жыл бұрын

может еще graphql добавим ? :)

@nouchance 3 жыл бұрын

Спасибо большое! Хотел спросить, сколько лет опыта работы у тебя? Хорошо объясняешь думаю 3-4г не меньше:)

@Mr-ux7er 3 жыл бұрын

Бро, а каков твой уровень вообще. Ты middle?

@ipa_stor 3 жыл бұрын

Где там смайлик потирающий руки?:))) ждем-с!!! Как раз должно быть крутое закрепление к роликам(этому, по нексту и думаю редакс уже вдоль и поперек прошерстили:))) и потом можно будет смело вернуться к ролику по vue, наконец, дойду до него:)))

@Nikita-qb3hu 3 жыл бұрын

Рад, что нашел чела, который так говорит, что фиг успеешь. Нет воды, всё четко, ясно и понятно. Успехов!

@UlbiTV 3 жыл бұрын

Хех, спасибо!)

@theway_up Жыл бұрын

@@UlbiTV Привет, можешь помочь, у меня какая-то проблема: TS2554: Expected 1 arguments, but got 2. 3 | import thunk from 'redux-thunk'; 4 | > 5 | export const store = configureStore(rootReducer, applyMiddleware(thunk)) Что не так у меня?

@vladberyozkin7223 Жыл бұрын

@@theway_up у тебя передаётся одно значение, а нужно передавать два

@v.demchenko Жыл бұрын

Что правда то правда. Фиг успеешь. Приходится по 10 раз останавливать и перематывать, в голове каша.

@user-kn6no9hz4o 9 ай бұрын

тоже нравятся такие учителя. как успехи за 2года - то?

@graywhiteblack Жыл бұрын

Если у кого появляется проблема в UserList при dispatch(fetchUsers()) пишет "TS2345: Argument of type '(dispatch: Dispatch ) => Promise ' is not assignable to parameter of type 'AnyAction." - просто добавьте в импорт import type {} from 'redux-thunk/extend-redux'; Это скорее всего связано с тем что в useDispatch v8 вы уже не можете 'диспатчить' что угодно(в отличии от v7)

@hitsuga8828 Жыл бұрын

благодарю

@aloodman2506 Жыл бұрын

Дай Бог тебе здоровья друг

@Polydegmonnn Жыл бұрын

Либо можно сделать так: 1. В store\index.js добавить: export type AppDispatch = typeof store.dispatch 2. В hooks\useTypedSelector.ts добавить: export const useAppDispatch: () => AppDispatch = useDispatch; 3. А в самой компоненте уже вызывать: const dispatch = useAppDispatch(); Я так понимаю, причина аналогична той, по которой мы делали хук для дефолтного useSelector

@FireTeen100 Жыл бұрын

@@Polydegmonnn А еще можно просто указать для fetchUsers возвращаемый тип any и тоже будет работать. export const fetchUsers = ():any => {...}

@andreynasuto9734 Жыл бұрын

спасибо огромное!

@firedvata 2 жыл бұрын

Спасибо большое! Шикарный материал и не требует большого количество времени на изучение примеров в документации

@user-co7nl8pf4p Жыл бұрын

Блииииин, почему это видос я раньше не посмотрел?! Тимур, огромное тебе человеческое спасибо за твой труд! Контент очень полезный и приятно смотреть!

@user-ts3kj7qz8g 2 жыл бұрын

У кого ошибка на 22.30 в useEffect сделайте dispatch(fetchUsers() as any)

@irinayurevna5338 2 жыл бұрын

{users, error, loading} - ошибка: не существует / Что ты делал?

@F4k13 2 жыл бұрын

я по-другому немного исправил: const dispatch: Dispatch = useDispatch(); может, тоже кому поможет, потратил минут 15, пытаясь понять что не так)

@vmesed 2 жыл бұрын

@@F4k13 спасибо, а то я застрял

@theway_up Жыл бұрын

Привет, а у меня не работает, когда я передаю rootReducer, вот ошибка: Argument of type '{ rootReducer: Reducer; }' is not assignable to parameter of type 'ConfigureStoreOptions'. Object literal may only specify known properties, and 'rootReducer' does not exist in type 'ConfigureStoreOptions'. Что делать уже не знаю...

@F4k13 Жыл бұрын

@@theway_up размести проект в репозитории и скинь ссылку, попробую посмотреть

@user-sd9je7ov8o 2 жыл бұрын

Отличный курс! Понятные объяснения. Кратко, чётко, по делу. Спасибо за такой материал!

@Evgeny.. 2 жыл бұрын

Тимур, спасибо тебе огромное! Без воды накручивания лишней стилизации сконцентрированно объяснил реакт-редакс + тайпскрипт, супер, спасибо тебе большое

@user-ow9zq7kf2d 2 жыл бұрын

Главное не останавливайся мужик, бомби этот годный контент, ты великолепен!

@dumantorbaev8675 3 жыл бұрын

Отличный курс. Доступно, коротко и без воды👍

@user-rr2sd9lp6n 3 жыл бұрын

Наконец дождался!!!! Респект тебе, Тимур, пусть канал процветает, многому научился!!!

@UlbiTV 3 жыл бұрын

Спасибо Руслан! Рад, что полезно!

@user-ue2ue3oi8g Жыл бұрын

На одном из предыдущих видео про TS, прям грустил и недоумевал, как быть с деструктуризацией и дополнением кода, а тут, оказывается ctrl + space!) Спасибо, Тимур!!

@programming5944 3 жыл бұрын

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

@programming5944 3 жыл бұрын

и я не ошибся :)

@UlbiTV 3 жыл бұрын

Ну если подписчики просят, как не прислушаться) спасибо)

@user-zo8me5nc7b 3 жыл бұрын

Как же классно, что вот оно уже есть и очень классно всё объясняешь. Мне как раз для работы быстро влететь прям каэф

@user-th4qi8iv3q Жыл бұрын

как успехи

@kirillshulman581 2 жыл бұрын

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

@antonmalay6013 3 жыл бұрын

Это очень круто ! Спасибо тебе . Больше бы таких видео. Примеры Проектов близкие к проду

@UlbiTV 3 жыл бұрын

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

@akaibegaliev2362 3 жыл бұрын

Сразу лайк не глядя, и комментарий для продвижения годного контента)

@UlbiTV 3 жыл бұрын

Спасибо братан) Это очень ценно!

@user-sy7cn6vc1m 2 жыл бұрын

Блин, круто, на курсах не могу смотреть длинные видео ( видосы уроков по 4+ часа) , а тут за 30 мин инфа столько же. Идеально. Нашел свой любимый канал)

@theway_up Жыл бұрын

Привет, модешь помочь, у меня какая-то проблема: TS2554: Expected 1 arguments, but got 2. 3 | import thunk from 'redux-thunk'; 4 | > 5 | export const store = configureStore(rootReducer, applyMiddleware(thunk)) Что не так у меня?

@web2905 Жыл бұрын

Спасибо за видео. За 40 минут так хорошо подана информация, очень круто.

@iznu3 Жыл бұрын

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

@UlbiTV Жыл бұрын

Спасибо огромное!

@theway_up Жыл бұрын

Привет, у меня проблема, я когда передаю rootReducer у меня оно подсвечивается красным, я его взял в обьект, так как загуглил эту ошибку, но не помогло, не подскажешь что надо исправить/сделать??

@ipa_stor 3 жыл бұрын

Дождались!!! :))) ну что, всем приятного просмотра, Тимур спасибо за долгожданный урок, пойду смотреть👍

@UlbiTV 3 жыл бұрын

Как тебя зовут?)) А то ты каждый раз по имени, а я даже и не знаю)

@ipa_stor 3 жыл бұрын

@@UlbiTV меня зовут Рус, приятно познакомиться виртуально:)))

@ipa_stor 3 жыл бұрын

Ютюб глючит, 4 раза отправил коммент:)))

@theway_up Жыл бұрын

Привет, я когда передаю rootReducer, у меня пишет что такая хрень: Аргумент типа "{ rootReducer: Reducer; }" нельзя назначить параметру типа "ConfigureStoreOptions". Объектный литерал может использовать только известные свойства. "rootReducer" не существует в типе "ConfigureStoreOptions". Что делать????? Я взял сам rootReducer в {}, так как в других проектах это работало.

@aleksandrdmitriev562 2 жыл бұрын

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

@falsetrue7910 3 жыл бұрын

Щас занят, но уже не терпится посмотреть, вечером к просмотру обязательно. Спасибо.

@UlbiTV 3 жыл бұрын

Приятного просмотра!

@ivanoliinyk8404 2 жыл бұрын

Ты даже не представляешь как сильно выручает твой контент !!!!!

@Bugagych Жыл бұрын

Очень нравится подача материала. Только практика, только хардкор)! Так держать.

@theway_up Жыл бұрын

@ADNETW 6 ай бұрын

ты просто не представляешь, сколько я от тебя научился!

@Sergey-lg1ke Жыл бұрын

Тимур, Браво, как обычно. Спасибо, что ты есть

@kirillshapovalov495 3 жыл бұрын

Огромное спасибо за этот курс! Бело очень полезно! Ждем новые видео!

@UlbiTV 3 жыл бұрын

Спасибо! На выходных надеюсь! проблемы с рендером большого видео, иначе бы уже выложил!

@authmailsendmail2898 2 жыл бұрын

Спасибо тебе! Главное чтоб это все мне пригодилось) То сейчас не понятно что завтра будет)

@frozeninside5004 3 жыл бұрын

Твоя манера преподношения информации без воды мне заходит лучше чем видео минина Спасибо укрепил знания !

@UlbiTV 3 жыл бұрын

У Минина хороший контент) Рад, что вам нравится) спасибо!

@topsecret9174 3 жыл бұрын

@@UlbiTV Да, у Влада Мынина неплохой контент, что как минимум объясняется количеством его имитаторов, подражатлей и просто откровынных плагиатчиков или обыкновенных цифровых пиратов-двойников вроде всяких шараг типа Web4Myself и клонов типа Паслён Манин, Ренген Мамин, Нелдалв Ниним и Нин Владленов-Владов-Панкратов-Черный.

@awenn2015 2 жыл бұрын

Судя по его ролику с mern стеком то ролики так себе у него ))

@vladyslavfx3892 3 жыл бұрын

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

@user-zl5sp9yh1n 3 ай бұрын

Как всегда круто!!! Спасибо за ликбез

@andrewsam224 Жыл бұрын

Спасибо тебе огромное, брат!!! Очень помогло. Не даётся Typescript да и React тоже, но дорогу осилит идущий!!!

@mikhailmikhailovich1037 Жыл бұрын

Шикарнейший контент по Redux + React + TypeScript для начинающих. Буду всем рекомендовать!

@Ipborisenkoan20 2 жыл бұрын

Долго не мог понять как работает Redux, а по планам уже было перейти к typescript, убил двух зайцев, понял полную картину и логику как работает Redux и TypeScript, очень тебе благодарен!

@user-kn3ut1sh2o 3 жыл бұрын

Тимур, спасибо за TypeScript! Очень нужная тема.

@UlbiTV 3 жыл бұрын

Олег, благодарю!)

@user-wk1vz2zq6f 2 жыл бұрын

Братан хорош! Давай вперёд! Контент в кайф! Можно ещё? Вообще красавчик!

@pavelmotovilov5214 3 жыл бұрын

Спасибо ) очень хорошо показано и все доступно объясняется !

@maratfaizer 2 жыл бұрын

Взрыв мозга. особенно хук и типизация actions etc Спасибо!

@dariabannaya2681 Жыл бұрын

Большое спасибо! Очень подробно. Стало многое понятнее

@heroic2459 2 ай бұрын

супер. после нескольких твоих курсов я с реакт + редакс + тс на ты

@user-ki7tk2lt5p 2 жыл бұрын

Спасибо, очень круто. Максимально полезно!

@user-zw4os9no8q 2 жыл бұрын

Отличный и полезный курс. Спасибо!

@user-ny6gq3nm4l 2 жыл бұрын

Твой канал настоящая находка, продолжай в том же духе!

@theway_up Жыл бұрын

@user-qx6gp9ci5d 3 жыл бұрын

как же ты все четко и лаконично объясняешь

@UlbiTV 3 жыл бұрын

Спасибо друг, стараюсь))

@theway_up Жыл бұрын

@victornikliaiev466 3 жыл бұрын

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

@UlbiTV 3 жыл бұрын

Спасибо) Рад, что было интересно!)

@bukanaka 3 жыл бұрын

Очень полезный курс. Остановился только на твоём курсе. Объясняешь хорошо да и без воды. Как раз учу TS, много что понял из твоего курса! Спасибо)

@UlbiTV 3 жыл бұрын

Спасибо, очень рад слышать)

@bukanaka 3 жыл бұрын

@@UlbiTV То, чего мнеиочень не хватало в данном курсе это типизация событий инпута, чекбокса и прочих элементов. Было бы очень полезно продолжить данный курс с этими нововведениями!!😁

@user-th4qi8iv3q Жыл бұрын

как успехи

@bukanaka Жыл бұрын

@@user-th4qi8iv3q Работаю на Ангуляре почти уже два года.

@Khruschakov 2 жыл бұрын

Капец. До этого смотрел кучу разных материалов где то же самое пытались объяснять очень разжевано, но не все было понятно. А здесь все очень быстро, но очень понятно сразу.

@gogadrz Жыл бұрын

Тимур, Спасибо тебе Огромное!!! За твой труд!!!

@aleksandrglebik8033 Жыл бұрын

Большое спасибо за видео уроки!

@raloynner9385 2 жыл бұрын

блин чувак ты просто ТОП!!! я по твоим видосом научился многое делать на реакте !! Спасибо тебе за твой труд !

@Leon-rv2zm 2 жыл бұрын

а что ты научился делать?

@mykhailostepanishchev6472 3 жыл бұрын

Шикарный урок, большое спасибо! React Redux TypeScript

@UlbiTV 3 жыл бұрын

Спасибо и вам за поддержку!)

@theway_up Жыл бұрын

@romankrytski8687 Жыл бұрын

Было супер-полезно! Спасибо большое =3

@NeoJohnSmit 3 жыл бұрын

Сильный ролик братан! 👍🏻👍🏻

@UlbiTV 3 жыл бұрын

Отдуши братишка) стараюсь

@user-er3hb9mb3y 2 жыл бұрын

Слушай очень круто!! Хотелось бы еще более углубленного и большого проекта! с объяснениями от профи: что делать, а что не делать и как лучше! готово благодарить денежкой !!!

@mikhailreznichenko8035 3 жыл бұрын

Я как раз искал как лучше типизировать useSelector) надеюсь ещё видосы будут такого типа

@UlbiTV 3 жыл бұрын

Будут, однозначно!)

@unknownWakeborder 3 жыл бұрын

Я так долго метался между вариантами типизации редакса, и тут твое видео. Жалею только об одном, что я сразу не попал на твое видео и убил столько времени( Огромное спасибо!

@UlbiTV 3 жыл бұрын

Зато столько практики) спасибо!

@unknownWakeborder 3 жыл бұрын

@@UlbiTV Таки да)

@user-co8em7in7b Жыл бұрын

Всё супер! Много информации, мало минут. Единственный, у кого скорость воспроизведения надо уменьшать, а не увеличивать)

@dogober3861 2 жыл бұрын

Очередной крутой видос, спс за контент!

@cmac2cmac 2 жыл бұрын

Это именно то, что мне сейчас нужно на проекте. Спасибо!

@theway_up Жыл бұрын

@user-th4qi8iv3q Жыл бұрын

@@theway_up как успехи

@user-th4qi8iv3q Жыл бұрын

@@theway_up объект с редюсерами прокидываем в конфиг

@parnasmi 2 жыл бұрын

Очень познавательно даже для тех кто не новичок в этом теме

@user-in8vs7yv3e Жыл бұрын

Чел я 2 дня ошибку искал и нашёл благодаря тебе. Спасибо.

@fullname9437 3 жыл бұрын

Очень хорошо объясняешь! Однозначно зачет!

@theway_up Жыл бұрын

@ivanoliinyk8404 2 жыл бұрын

Все как всегда доступно и понятно! Спасибо

@theway_up Жыл бұрын

@liza_sashina 2 жыл бұрын

Обожаю твои ролики, спасибо, что ты есть)

@UlbiTV 2 жыл бұрын

❤️🙏

@theway_up Жыл бұрын

@dmitriybaratashevich9079 2 жыл бұрын

Be like: "У Тимура выходит новое видео". Я: лайк не глядя) Шучу, конечно глядя))

@user-el5ls2cq1y 3 жыл бұрын

Ты мне во многом помогаешь разобраться! Блягодарю!

@UlbiTV 3 жыл бұрын

Стараюсь, спасибо и успехов вам!)

@user-fy8sd8gy5j 2 жыл бұрын

спасибо, твой ролик поможет мне наконец найти работу!

@user-qp7ph5df7x 2 жыл бұрын

нашел?

@alexwake927 2 жыл бұрын

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

@andrzejsotnikow7494 2 жыл бұрын

Меня повеселило твое Туду! Создадим Туду!

@angelinadorasheva5828 Жыл бұрын

🔥 Огнищеее! Впрочем как и всегда) спасибо!

@379sanek 3 жыл бұрын

Спасибо, лайк заранее, в будущем просмотрю полностью)

@UlbiTV 3 жыл бұрын

Обязательно!) спасибо!

@user-pv3hw3zf4b Жыл бұрын

Ктонибудь смог исправить ошибку "Argument of type '(dispatch: Dispatch ) => Promise ' is not assignable to parameter of type 'UserAction'." на 21:23?

@sergsergey4251 3 жыл бұрын

Спасибо! очень здорово! Успехов в дальнейшем)

@theway_up Жыл бұрын

@user-vk5cu5vb3o 2 жыл бұрын

Очень круто! Уже похоже на что-то реальное

@Krishtal3 2 жыл бұрын

Oh my GOD, очень круто, спасибо большое за старания

@theway_up Жыл бұрын

@lekost13 3 жыл бұрын

Супер, спасибо за видео! Будет на канале подробный разбор по redux toolkit. Я видел твои парочку занятий, но хотелось бы увидеть по типизации Redux TK, createAsyncThunk и т.д. Было бы очень интересно!

@UlbiTV 3 жыл бұрын

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

@ramilnazmiev9448 2 жыл бұрын

Наишикарнейший урок , от всей души спасибо.

@user-rw9xf1bh8n 3 жыл бұрын

Большое спасибо, a FullStack проект очень интересен!

@UlbiTV 3 жыл бұрын

Скоро!) спасибо

@DRanduletti 2 жыл бұрын

просто супер! уникальный контент!

@dimalukashenko4865 Жыл бұрын

Уже третий раз пересматриваю. Просто высший класс!

@user-th4qi8iv3q Жыл бұрын

как успехи

@dimalukashenko4865 6 ай бұрын

@@user-th4qi8iv3q Отлично

@artemliseenko8530 Жыл бұрын

Многие пишут что даже не нужно включать скорость 1,5) Лично я смотрю со скоростью 0,75 когда делаю параллельно сам, потом еще раз пересматриваю видео на обычной скорости)) Спасибо автору за такое обучение, ты лучший)

@user-dt3xm5qw5f Жыл бұрын

Спасибо, очень полезный материал!

@PerryCoxer 2 жыл бұрын

Вот это вынос мозга. С большими проектами не работал. Но в вакансиях сейчас в 80% требуют TS. Видимо не просто так.

@mbkov Жыл бұрын

Отличная работа! Спасибо

@fN9ne 7 ай бұрын

Внимание! Если используете Redux Toolkit и configureStore и у вас возникает ошибка с использованием applyMiddleware, то вот это должно помочь: export const store = configureStore({ reducer: rootReducer, middleware: [thunk], }); Надеюсь кому-то помог

@user-mc1gr9hq6p 5 ай бұрын

а если middlware подчеркивает? Redux Toolkit поставила.Ошибка Type 'ThunkMiddleware[]' is not assignable to type '(getDefaultMiddleware: GetDefaultMiddleware) => Tuple'.

@olehmudriy9308 2 жыл бұрын

Друг, спасибо тебе за твои труды!!!

@theway_up Жыл бұрын

@zmeygorynych5684 Жыл бұрын

Классные ролики, спасибо за контент)

@EvgenyFox 2 жыл бұрын

Это просто 10\10, огромная благодарность!

@theway_up Жыл бұрын

@wardog4244 3 жыл бұрын

Божественно!

@olegpavlov4329 2 жыл бұрын

Для меня много нового, но всё понятно. Особенно про TS. Cпасибо. Лайк.

@theway_up Жыл бұрын

Ребята, подскажите почему у меня такая ошибка: Expected 1 arguments, but got 2. 3 | import thunk from 'redux-thunk'; 4 | > 5 | export const store = configureStore(applyMiddleware(thunk), { rootReducer }); В каком смысле ожидался 1 аргумент, а получилось 2, не пойму

@user-jm5pp7lm8b Жыл бұрын

Отличный курс, спасибо!

@Jeka_sh 3 жыл бұрын

Спасибо за ролик. Очень информативно)

@UlbiTV 3 жыл бұрын

И вам спасибо!)

@oleg5588 Жыл бұрын

Спасибо, Тимур! Мегаполезно

@renatkhakimov5378 2 жыл бұрын

Огонь, спасибо!

@igortrifonov9339 3 жыл бұрын

Заранее знаю, что будет годнота, поэтому лайк, не глядя)

@UlbiTV 3 жыл бұрын

А еще лучше лайк и просмотр)) спасибо друг)

@user-zr1dw9uj7g 2 жыл бұрын

Большое спасибо за качественньій материал!

@devorer77 3 жыл бұрын

Красавчик! Прям умничка. Супер курс!

@UlbiTV 3 жыл бұрын

Спасибо, Артем))

@devorer77 3 жыл бұрын

@@UlbiTV друже, очень-очень-очень нужен краш по юнит-тестам. я за последние две недели перечитал уже кучу всего. но в цельную картину сложить не могу, так, куски какие-то. одна надежда на тебя :)

@theway_up Жыл бұрын