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

it-incubator.io/education/?ut... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Коничива, самураи! 👌
Всё глубже будем погружаться в TypeScript и не оставим нашей социальной сети никаких шансов! Летим! Сегодня научимся типизировать локаьный стейт и пропсы классовой компоненты, пропсы для фнукциональной компоненты, useState, и, самое главное, это типизация функции connect (из библиотеки react-redux)
Вы красавчики, самураи! Я вами горжусь! Спасибо за поддержку! Летим в космос вместе!
Поддержать проект монеткой: social-network.samuraijs.com
Платное обучение в онлайн или оффлайн инкубаторе:
it-incubator.eu
it-kamasutra.com
А здесь бесплатная взаимопомощь:
t.me/reactjs_samurai
* Мы в соц. сетях:
itkamasutra
/ itkamasutra
telegram.me/itkamasutra
* Мои личные VK и Insta:
d.kuzyuberdin
/ 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]

спасибо

[@aymkin]

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

[@user-ov5tt6sc2f]

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

[@oconnor4417]

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

[@user-et8qw8nu2m]

100%

[@Raventus100]

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

[@yuritian8830]

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

[@npinskij]

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

[@user-oz2rf3zi3q]

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

[@ITKAMASUTRA]

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

[@michelealeer]

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

[@ruslankonychev1137]

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

[@stephencurry8078]

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

[@ruslankonychev1137]

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

[@ruslangilyazov7733]

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

[@user-wr3dz2op1t]

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

[@mariia6820]

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

[@IvanIvan-up2nz]

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

[@portador-portador]

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

[@89629933808]

compose

[@genapolyakov]

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

[@Karifax]

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

[@ivanmiarkulau8320]

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

[@АнастасияКовалёнок]

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

[@alira2924]

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

[@user-ij9qf9yx8z]

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

[@user-fu6vi1te3i]

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

[@vyvaida]

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

[@anastasia__kot]

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

[@olgamazurenko8142]

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

[@SemenAlexndrovich]

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

[@oleksiiborovykov6306]

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

[@spacerider9426]

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

[@resenpaii]

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

[@nEW_MOMENTS250]

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

[@podpison3268]

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

[@elenaswiderskaya718]

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

[@dimakalinichenko4913]

Спасибо!

[@alexandr9313]

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

[@mushnikov35]

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

[@user-on9ul4zx6n]

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

[@user-pc9bl7uf1l]

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

[@user-je1el3gj9d]

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

[@mariiatkachova570]

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

[@dimalukashenko4865]

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

[@user-tr8hr4xm1l]

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

[@darjat.1069]

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

[@user-xd6ev4gz2k]

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

[@jses8560]

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

[@alessarver7216]

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

[@dmitrykirilenko9293]

спасибо!

[@alexeska739]

Спасибо👍👍👍

[@ITKAMASUTRA]

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

[@user-bl4dl9ke7b]

Спасибо

[@user-bl4dl9ke7b]

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

[@MegaVaNushka]

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

[@user-dm5be2mx6x]

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

[@miguelgrushetckii4839]

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

[@agataageeva424]

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

[@user-cl7cy7ze5z]

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

[@konstantinvoronin4687]

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

[@alexleshenko]

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

[@user-rg8wz2rt9e]

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

[@user-fs4sl5my1o]

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

[@gagikkhachatryan3141]

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

[@user-np9mq5xc7j]

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

[@user-hh8fs6qg9v]

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

[@sandorkligan2208]

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

[@user-ej8gj1op3r]

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

[@MJstart]

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

[@mykhailostepanishchev6472]

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

[@aidosbatyrkulov3272]

Супер

[@user-hg5sc1yi8t]

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

[@ctumyji9737]

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

[@margokomilfo4428]

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

[@arthurbearnyson9747]

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

[@daniilukraine3611]

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

[@ITKAMASUTRA]

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

[@naiz4005]

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

[@lubomirkavetskiy9248]

Done. Thanks a lot, Man!

[@livehunter9224]

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

[@ITKAMASUTRA]

Спасибо!!

[@masha18able1]

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

[@ivolokha9146]

Super!

[@Al4ii]

крутяк!

[@user-sn5nu8mz7f]

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

[@user-wd3tl2rx9p]

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

[@ruslanla4654]

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

[@okyskaa]

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

[@jackjackin6393]

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

[@ITKAMASUTRA]

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

[@orangedragonthebestraper]

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

[@furzaa]

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

[@user-lk4mb3nw3d]

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

[@user-dd9lx2sd3u]

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

[@tema_skakun]

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

[@kanejamess7591]

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

[@user-lq5fs9eb8v]

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

[@user-xd6ev4gz2k]

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

[@it-pirates5235]

За шутку лайк!

[@user-wj3rv9gj2v]

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

[@kondakov90]

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

[@StepanVorobiov]

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

[@user-cw3gv1dq5p]

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

[@Vllad_Ko]

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

[@lukichev7910]

top content

[@n0escape]

Типизируем компоненты. Для комопнент впринципе определяем propsType и подвязываяем к компоненте Если компонента функциональная (React.FC): type propsType = { totalUsersCount: number, pageSize: number, currentPage: number, onPageChanged: (pageNumber: number) => void, users: Array, followingInProcess: Array, unfollow: (userId: number) => void, follow: (userId: number) => void } const Users: React.FC = ( {totalUsersCount, pageSize, currentPage, onPageChanged, users, followingInProcess, unfollow, follow} ) => ( ... ) Если компонента классовая (extends React.Component) Если локальный state не используется то stateType избыточен type propsType = { currentPage: number, pageSize: number, totalUsersCount: number, isFetching: boolean, users: Array, followingInProcess: Array, getUsers: (currentPage: number, pageSize: number) => void, unfollow: (userId: number) => void, follow: (userId: number) => void, } class UsersContainer extends React.Component { ... render () { return ... } } инфа про редюсеры: В reduxStore у нас есть корневой редюсер с множеством редюсеров других. К нему приходит весь state и он раскидывает его по другим редюсерам и после этот корневой редюсер принимает измененный state с дргугих редюсеров и возвращает полный измененный state. Основываясь на этом можем типизировать state: const rootReducer = combineReducers({ contentBar: combineReducers({ dialogsPage: dialogReducer, profilePage: profileReducer, usersPage: usersReducer }), navBar: navBarReducer, auth: authReducer, // form: formReducer, app: appReducer, settings: settingsReducer, }); type rootReducerType = typeof rootReducer; // (globalState: appStateType) => appStateType type appStateType = ReturnType Теперь можем обращаться к state, создав переменную: let state: appStateType теперь экспортировав appStateType можем типизировать все что связано со state напрямую Итого, запись ReturnType помогает получить то, что возвращает уже имеющаяся функция //@ts- ignore запись говорящая игнорировать ts компилятору последующий код

[@n0escape]

Props приходящие в комопненту есть 3 видов: stateToProps, пропсы из стейта dispatchToProps, пропсты для диспатча (передаваемые функции) ownProps, пропсы приходящие как атрибут при вызове компоненты При типизации раздели их: type mapStateToPropsType = { currentPage: number, pageSize: number, totalUsersCount: number, isFetching: boolean, users: Array, followingInProcess: Array, } type mapDispatchToPropsType = { getUsers: (currentPage: number, pageSize: number) => void, unfollow: (userId: number) => void, follow: (userId: number) => void, } type ownPropsType = { // own props } type propsType = mapStateToPropsType & mapDispatchToPropsType & ownPropsType таким образом мы можем обращаться к этим частям напрямую: let mapStateToProps = (state: appStateType): mapStateToPropsType => ({ ... }) Однако для обращения к dispatchToProps есть несколько способов: 1) как и с глобальным state можем обратиться к connect как к функции и запросить то что она вернет в виде типов. (пример connector из докментации) 2) типизировать connect используя generics: перешли в декларационный файл, нашли connect и увидели что для его типизации наужны: TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = DefaultState следуя такому патерну типизируем коннект передвая наши типы: export default compose( connect( mapStateToProps, {follow, unfollow, getUsers}) )(UsersContainer)

[@n0escape]

Типизация локального state клссовой компонеты: type stateType = { editMode: boolean } class ProfileStatus extends React.Component { state = { editMode: false } }

[@user-ik5hm6mh5x]

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

[@user-iq3fs8ey7l]

#reactJS #typescript #практика #примеры #уроки #курс

[@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 внятного ответа дать не мог, что с этим делать

[@genapolyakov]

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

[@VladislavAxt]

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

[@ITKAMASUTRA]

Супер!

[@user-tp4fn2dl9w]

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

[@ArtemBo_UA]

👍👍👍👍👍👍

[@dimasdom3051]

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

[@Vnikny]

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

[@ITKAMASUTRA]

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

[@promax866]

Канишуа!