05 - React + connect, TypeScript, mapStateToProps, mapDispatchToProps / React JS - Путь Самурая 2.0

it-incubator.i... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Коничива, самураи! 👌
Всё глубже будем погружаться в TypeScript и не оставим нашей социальной сети никаких шансов! Летим! Сегодня научимся типизировать локаьный стейт и пропсы классовой компоненты, пропсы для фнукциональной компоненты, useState, и, самое главное, это типизация функции connect (из библиотеки react-redux)
Вы красавчики, самураи! Я вами горжусь! Спасибо за поддержку! Летим в космос вместе!
Поддержать проект монеткой: social-network...
Платное обучение в онлайн или оффлайн инкубаторе:
it-incubator.eu
it-kamasutra.com
А здесь бесплатная взаимопомощь:
t.me/reactjs_s...
* Мы в соц. сетях:
itkamas...
/ itkamasutra
telegram.me/it...
* Мои личные VK и Insta:
d.kuzyu...
/ it.kamasutra.dimych
#reactJS #typescript #практика #примеры #уроки #курс
Удачи нам, друзья!

[@maxim.saharov]

- РЕШЕНИЕ ОШИБКИ - TS2307: Cannot find module './Paginator.module.css' or its corresponding type declarations. - вот как я ее победил спустя пару часов) Нужно добавить файл - declaration.d.ts - в папку src в любое место, я добавил в папку utils - которая у нас уже была и в этот файл добавить такой текст - declare module "*.module.css"; И все) Более подробно есть на английском стаковерфлоу с таким вопросом - «Can't import CSS/SCSS modules. TypeScript says "Cannot Find Module"»

[@maxim.saharov]

maxim-saharov - назв. гитхаба и ReactKamasutra назв. Проекта

[@maxim.saharov]

В моем гитхаб репо можно посмотреть весь код.

[@maxim.saharov]

Всем спасибо за поставленные звездочки в нем и приятного обучения самураям)

[@chief9478]

спасибо

[@oconnor4417]

Димыч, от души !!! Допили пожалуйста до конца этот сезон 😢

[@МАКСИММЕЛЬНИК-ш8и]

100%

[@Raventus100]

@@thorvaldbjorksson9914 а почему он решил недопиливать?(

[@yuritian8830]

Мы должны ему помочь. Накинув темы для обучения. Ну и поддержать донатом. Вместе мы - сила, а порознь - погибнем. С мира по нитке и рубаха сшита. Просто пишем Димычу идеи и поддерживаем как можем. А Димыч разберётся чо-каво и куда и вот это вот всё. Вообще...приятно было проходить видеоуроки, потому что некоторые вещи которые были не понятны освещались в комментариях.

[@aymkin]

Кабздец я испугался вверх ногами читать код)

[@МаксВолков-э6и]

Тут даже бы амбидекстры в шоке сидели 🤣

[@ХаджимуратОмаров-т1с]

Спасибо за урок! Проблему с CSS файлами можно решить следующим образом: В корневую папку проекта /src, нужно добавить файл /src/react-app-env.d.ts и добавить в файл эту строку - /// P.S. не теряй тройной слеш

[@КонстантинКараманов-о1ю]

можно добавить в src declarations.d.ts и туда записать declare module "*.module.css"; и добавить импорт в includes в ts.config

[@АлексейАсташонок-о9ь]

ТС для библиотек сильно усложнил мне задачу в первом сезоне. classnames / redux-form и тд. Мало того что в курсе устаревшие библиотеки, так еще и тс ругается. Пришлось поплясать с бубном. Рад видеть, что об этом уроке это все таки упомянуто. Нконец то будет порядок в коде и станет понятно как что типизировать. Столько кода, что не запомнить это будет сложно. Спасибо

[@АлексейЛапко-г9ц]

Учусь еще по первым 100 выпускам, сюда зашел пока просто лайк поставить))еще вернусь)

[@ITKAMASUTRA]

спасибо большое! летим, ребята!

[@michelealeer]

Точно также делаю)

[@ruslankonychev1137]

А я после 100 пришел вот только.И скажу что тайп рулит.Токо библиотеку поставил,сразу смог исправить те ошибки которые не мог отрыть "не вооруженным глазом".библиотеки эт реал кул ☺♪

[@stephencurry8078]

@@ruslankonychev1137 какая библиотека?

[@ruslankonychev1137]

Ну тайпскрипт

[@npinskij]

Димыч, большое спасибо за труд, ты красавчик!!! Ждем перезапуска 2-го сезона 💪

[@ЭйЭй-ы1и]

хахахха, Димыч - коммунист, я думал я один такой))) Летим дальше!)

[@Артемий-ч6у]

Хорошая шутка вначале !

[@portador-portador]

У кого ругается на контейнерную компоненту в compose - это дженерик, надо прописать compose

[@89629933808]

compose

[@genapolyakov]

compose тоже работает

[@Karifax]

Спасибо за подсказку, поставил compose

[@ivanmiarkulau8320]

спасибо за отличный урок про использование TypeScript в React. Типизировали connect, mapStateToProps, mapDispatchToProps и несколько компонент (функциональных и классовых). Кстати песни совсем не дурацкие, а очень даже приятные, заряжающие в космос, летим!)

[@mariia6820]

Димыч,святой человек!!! Будущие за нами! Спасибо за все!Лечу делать домашку, буду типизировать до талого :D Лучшие уроки React, Redux, TypeScript , типизация mapStateToProps, mapDispatchToProps

[@mushnikov35]

Димыч молочага ! Хочется смотреть, даже просто так под чаек )

[@Семенкрекотун]

Спасибо огромное за знания, eact + connect, TypeScript, mapStateToProps, mapDispatchToProps / React JS

[@BarcaNK]

Спасибо за труд)

[@darjat.1069]

typescript просто огонь. язык для людей :) спасибо за видео, как обычно всё просто, понятно и круто )

[@alexleshenko]

Даже зная реакт приятно уроки смотреть) года 2 назад бы этот урок запустился😂😂 но спасибо)

[@margokomilfo4428]

псих Димыч - самый лучший!! Все тебя любим=)) Летим!

[@tema_skakun]

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

[@elenaswiderskaya718]

В части middleware и устаревшего createStore я поставила пакет @reduxjs/toolkit и store определила следующим образом: import { configureStore } from "@reduxjs/toolkit"; const store = configureStore({ reducer: reducers, middleware: [thunkMiddleware] }); Димычу спасибо за мотивацию и react-обучение!

[@ruslangilyazov7733]

Музыка при вступлении супер!

[@IvanIvan-up2nz]

не псих а крутий хлоп!Та музика чотка!Лайк бро

[@Багвматрицегребанойреальности]

Спасибо за урок!!! React + connect, TypeScript

[@ruslanla4654]

React Typescript Путь Самурая. Димыч - крутой сенсэй!

[@sandorkligan2208]

Спасибо, Димыч, ты невероятный)

[@ВикторКысса-я8х]

Спасибо, летим в космос !!! Всем советую пересматривать видеоуроки ! TypeScript, React, Redux )

[@AlexNesterov-f5q]

всегда смотрю видео до конца)) в конце нравится слушать какие то наставления, твои рассуждения, шутки, ламповое такое заключение всегда твоих роликах!! это подкупает конечно) уже подписался на донат тебе, пока правда 2$, но это вопрос времени) найду работу, будет больше, верю в тебя и в твои начинания! Летим🔥🔥🔥

[@livehunter9224]

Дима, ты лучший из лучших:)

[@ITKAMASUTRA]

Спасибо!!

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

Димыч, спасибо) React + connect, TypeScript, mapStateToProps, mapDispatchToProps / React JS

[@arthurbearnyson9747]

решил все таки усваивать информацию глубже и перевернул экран спасибо, совет помогает, лайк :)

[@ВикторКулагин-ь2у]

Самый годный курс по TypeScript

[@MegaVaNushka]

еее, всё как всегда четко! React, typeScript + connect

[@gagikkhachatryan3141]

Bомбоческое видео, хорошо объяснено как типизировать React Component-ы с Typescript-ом

[@ВладиславПузырев-ю8л]

Твои уроки очень приятно смотреть! Спасибо!) TypeScript крутяк!

[@ОлегПузанкін]

Отлично все разжевано, единственно хочу сделать замечание кто пользуется до сих пор классовыми компонентами - StateTypes можно не определять в дженерике при определении класса, если потом state инициализуирется свойством, а не в конструкторе, так как state определнный как свойство переопределяет тот тип интерфейса, который был подставлен в дженерике вторым параметром.

[@konstantinvoronin4687]

Агонь! Как всегда все очень добротно! Знания получил, пинок от Димыча тоже. Пощупал типизацию mapStateToProps, mapDispatchToProps и connect через TypeScript. Летим дальше!

[@ЭмильЯнбаев-ь1ъ]

Топчик! Ходил на собес, ваш курс реально знают работодатели!

[@okyskaa]

А я поверил что так лучше обучаешься 😁

[@dechto1]

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

[@masha18able1]

Типизация просто пушка, за 1 часть пути самурая у меня через каждые 2-3 выпуска что-то да ломалось из-за невнимательности, потом на поиск ошибки тратил больше времени, чем на обучение, сейчас я хрена лысого без тайпскрипта чё то делать буду) Спасибо Дмитрий, за такие замечательные уроки!!!)

[@agataageeva424]

Димкич, ты просто ракета! Заставка топ! React + connect, TypeScript, mapStateToProps, mapDispatchToProps / React JS

[@olgamazurenko8142]

Класс и выпуск, как всегда, и новости!

[@ДенисПетров-ч4л]

Прохожу 40 урок, красава, так держать!!!!

[@ЭйЭй-ы1и]

привет, димыч! давай сразу со всеми сложностями и со всеми новыми штуками в Ts, ведь 1 часть ты прогал на es6 и ни чего) Так что ждем интерфейсов, дженерики, енумы и т.д.)

[@mariiatkachova570]

Дима, спасибо огромное за твой труд!!! Очень помогает!

[@НикитаПожидаев-ы4л]

Скоро перебросят в кампании на проект React + Typescript, благодаря твоим урокам удивлю ребят на работе!

[@Илья-ж8ч8о]

Смотрю , быстрей продолжай курс , летииииим)

[@furzaa]

Typescript, React и Redux с нуля. Отличный формат, лайк за черную тему. Кстати, ты в конце переписал на ts ProfileStatus, вместо ProfileStatusWithHooks, который использует приложение) Надеюсь другие тоже у себя заметили и исправили) Спасибо за все курсы

[@naiz4005]

React и TypeScript это очень хорошо!

[@ДмитроКравець-л2щ]

Песни ТОП! , урок просто топ.

[@StepanVorobiov]

Вперёд к Коммунизму!! и с песней

[@daniilukraine3611]

Просто ставлю лайк , гляну по позже = )

[@ITKAMASUTRA]

спасибо, самурай

[@ДмитрийКлёп]

чуть не посидел от вступления😂

[@ctumyji9737]

Спасибо за урок, практикуюсь, а потом лечу дальше! Всем бобра :) React + connect, TypeScript, mapStateToProps, mapDispatchToProps / React JS - Путь Самурая 2.0

[@jackjackin6393]

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

[@ITKAMASUTRA]

Спасибо! От души! Летим ⚔️

[@Vllad_Ko]

Супер идея про курсы! Будем уничтожать коронавирусную нечисть позитивом и добром! TypeScript рулит!

[@ЖенькаОнегин]

Лучший вывод при типизации, если ошибка кажется тебе глупой выключи и включи программу))) Димыч, ты лучший!

[@mykhailostepanishchev6472]

Оч интересно спасибо ! Песни оч крутые,если что. React + connect, TypeScript, mapStateToProps, mapDispatchToProps

[@alexandr9313]

Димыч, спасибо тебе за то, что ты делаешь!

[@miguelgrushetckii4839]

Огромное спасибо! не терпится начать типизировать все :D все круто и доступно. React redux typescript thunk reducer store dispatch

[@kanejamess7591]

Thanks my friend!! like it content!!!!!

[@VladislavAxt]

Уже работаю Frontend разработчиком, и на работе React + Redux + TS. Пытался все понять.. но было все так сложно. А с Димычем прям начинаю чувствовать просвещение

[@ITKAMASUTRA]

Супер!

[@spacerider9426]

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

[@vyvaida]

Спасибо вам большое за труд

[@kondakov90]

Решил попробовать Redux Hook. И это шикарно. Не нужно писать контейнерную компоненту. Это волшебно!!! Но видос, как всегда топовый.

[@ВладиславШевель-м4к]

Уххх очень круто и здорово !

[@genapolyakov]

можно добавить тип compose и все также будет работать.

[@interpol2138]

12:00 Не знаю исправил ли Дима ошибку типизации с CSS файлами и ему подобными SCSS/SASS и так же ошибку типизации импортов файлов графики pnh/jpg/jpeg/webp.... Вот вам пункты которые нужно выполнить 1) Создать файл css.d.ts (можно создать в корне src), но я для красоты вынес к scr/types/ В файле вынес все случае, можете выбрать только свое или копировать/вставить. Особо ничего не испортит declare module '*.scss' { const css: { [key: string]: string }; export default css; } declare module '*.sass' { const css: { [key: string]: string }; export default css; } declare module '*.module.css' { const styles: { readonly [key: string]: string } export default styles } declare module 'react-markup'; declare module '*.webp'; declare module '*.png'; declare module '*.jpg'; declare module '*.jpeg'; ////////////////////////////////////////////////////////////////////// Если же вам просто лень или еще по какой то причине исправлять ошибку, то просто сделайте // @ts-ignore

[@CarrieA]

вот спасибо, добрый человек!! Мне даже chatGPT внятного ответа дать не мог, что с этим делать

[@SmirnovVladimir]

Я с 60 урока зашёл за тайпскриптом ) Вакансии смотрю, везде он нужен. И вроде всё понятно пока. Тока кода кабзда как много стало ))

[@Medulla_oblongata01]

Нашел работу?) Приветик)

[@SmirnovVladimir]

@@Medulla_oblongata01 Привет, да! С августа работаю. Без Димыча не смог бы. Устроился, мне говорят, всё ок ,берём, ток нам надо не реакт, это все знают, а ангуляр и вью. )) На вью сразу дали боевой проект, ангуляр - учу параллельно. Димыч офигенную базу дал, всё относительно легко даётся. Вью вообще за три дня выучил с нуля. Чуть на ноги встану финансово - придётся задонатить Димычу. ))

[@Medulla_oblongata01]

@@SmirnovVladimir поздравляю!!)) Советики даш какие-либо?)

[@SVP-d1d]

Оооххх как я тебя ждал с TS ....охх я тут накодил :)

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

React JS Благодарю!!!

[@alessarver]

Было очень интересно) Спасибо, за уроки) Напишу типы во всех компонентах, а затем пойду смотркеть 6 видео))) Мне и раньше было интересно программирование, но сейчас очень интересно)))

[@podpison3268]

Всё супер! Все получилось

[@Vnikny]

Лайк авансом. Пока остановился на 100м уроке. Допиливаю todo лист. Никак CORS победить не могу на post и delete тасок, и потом сразу за вами во второй сезон.

[@ITKAMASUTRA]

версию для тудулиста апи нужно выставлять 1.1, скорее всего из-за этого падает

[@resenpaii]

Большая работа :) Спасибо.

[@nEW_MOMENTS250]

Спасибо за очень полезное видео

[@МихаилБронников-ш9х]

Очень смешное начало)

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

Плохо видно из-за тёмной темы 🥺 спасибо за урок! 💣

[@anastasia__kot]

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

[@visokogroup7922]

Огонь, Димыч!!!!!!!!! ппц, 31 тыща подписчиков уже, ты динозавр, поедатель подписчиков!) всех прогеров собрал! Когда будут гайды с Мальдивов? тебе нужно уже отдохнуть, полезно отдыхать!)

[@ITKAMASUTRA]

Хочу отдыхать) наступит такой момент)

[@kurtmiller77]

Димыч, если хошь, настрой запуск проекта правильным образом - справа вверху у тебя есть ProfileStatus component бла бла и еще правее кнопки запуска (зеленый треуголник) и стопа (красный квадрат). Так вот тыцни на ProfileStatus component... Там будет Edit configuration, там увидишь существующие templates потом клацаешь + и добавляешь npm Думаю многим будет полезно.

[@alira2924]

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

[@ТихонКомашинский]

Юмор в самом начале - поржал от души))

[@orangedragonthebestraper]

рэшпэкт 😎😎😎👍и уважуха!

[@alexeska739]

Спасибо👍👍👍

[@ITKAMASUTRA]

на здоровье! Учитесь! Летим!

[@dimalukashenko4865]

Крутяк, спасибо!

[@jses8560]

Справился, спасибо за урок!

[@Александр-ж1и2б]

В redux-store сразу делал: export type AppStateType = ReturnType, т.е без предварительного type RootReducer = typeof rootReducer c последующим export type AppStateType = ReturnType Тоже работало.

[@MJstart]

Спасибо Димыч

[@dimasdom3051]

А React то и реально кабзда как просто !

[@АлександрГрадинар-ф7б]

Ааа, жесть. Лайк

[@pavellezhenin7052]

c let - жесть - стоит поправить линтер чтобы ругался когда значнение не меняется. если значение не меняется это const. Для дот нетчика это конечно зло, так как консты там работают иначе и не могут быть ссылочными типами. Тоже про Array большенство фронтов все же будет писать []T

[@Al4ii]

крутяк!

[@h3tia]

Интересный факт. Контейнерная компонента работает и в формате jsx и js. А вот в формате .ts куча непонятных багов. только.tsx

[@oleksiiborovykov6306]

ТОП, Спасибо!

[@maxgeorgievsky9527]

Дима, расскажи про Generic'и! )

[@VSsoviet]

как же я орнул с начала)))

[@rva3674]

Я стараюсь идти немного вперед, но блин ищу по 2 дня то что ты тут глаголиш

[@arayoflight]

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

[@arayoflight]

"Самураи" тоже есть)))

[@ITKAMASUTRA]

огонек!!! самурай!

[@arayoflight]

@@ITKAMASUTRA Спасибо, сенсей :)

[@lubomirkavetskiy9248]

Done. Thanks a lot, Man!