09 - React + TypeScript / Actions Creators, Generic, infer/ React JS - Путь Самурая 2.0

it-incubator.io/education/?ut... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
В общем, не круто создавать кучу interface\type для того, чтобы типизировать объекты, типы из которых можно получить автоматически средствами TypeScript
В этом видео мы применим технику, о которой я узнал из этой статьи:
habr.com/ru/company/alfa/blog...
Детальный разбор данной темы на основе этой статьи я сделал в отдельном видео:
• 01. TypeScript / Gener...
Вы красавчики, самураи! Я вами горжусь! Спасибо за поддержку! Летим в космос вместе!
Поддержать проект монеткой: 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 #практика #примеры #уроки #курс
Удачи нам, друзья!

[@petroboiko3019]

1:20 - "мы уже мидлы...", а я даже не джун ещё... так на синьйора скоро пойду)))

[@user-je1el3gj9d]

Этот курс лучше любого сериала, особенно короткие ролики

[@michelealeer]

фух думал ты перестал снимать. Спасибо что продолжаешь

[@viktorshcheplyagin9576]

Типизация - это просто офигенно) На первой работе писал проект без typescript. Когда проект начал состоять из 200+ файлов, суммарно 100+ тысяч строк кода - мы просто увязли в баговом болоте) Большая часть багов была спровоцирована как раз тем, что где-то как-то не тот тип прилетал. А когда обновили апишку на бэке - вообще кабзда как непросто было. Жаль, что тогда не знал typescript. Было бы все нормально

[@viktorshcheplyagin9576]

P.S. Да, команда еще состояла из джунов и мы выкручивались как могли) Затыкали костылями все дыры, а потом не могли разобраться как это работает и приходилось тупо переписывать этот кусок... функционала XD Не стоит говорить о том что не один дедлайн был запорот)) Это в подтверждение к тому что быть растерянным тупящим джуном-говнокодером - это естесственно. Обычная стадия развития личинки программиста, которая поначалу, вызывает у многих отвращение и все только портит, но затем, рождается восхитительное создание)

[@user-ey6em3my8p]

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

[@kurtmiller77]

7:00 Димыч, можно не альтом, а дабл ктрл нажимаешь но второй раз его не отпускаешь а держишь. и стрелку вниз/вверх и будет тебе тоже самое только намного быстрее, мышкой целится не надо. Для позиционировани используешь home/end cntl+стрелки для перехода через слова.

[@maxim.saharov]

супер, спасибо!

[@denisr344]

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

[@rahalmamut01]

Супер, спасибо!) Ждем большой видос 🦝

[@narutominer]

6:55 можно не только альт зажать, но и просто зажать колёсико мыши и потянуть в низ. Таким образом тоже выделится прямая линия.

[@militant6709]

Говорил что надо покупать пиво и попкорм к следующему выпуску а тут всего лишь 20 мин))

[@ITKAMASUTRA]

Оказались моменты, которые всё-таки нужно выделить в отдельный урок!🙏

[@spacerider9426]

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

[@bdrimik]

Димыч, лови лайкос 👍 Переход 🔥

[@user-fs4sl5my1o]

Всё как всегда на высшем уровне! Лучшие обучающие уроки по TypeScript ) Всё досконально понятно по темам: Actions Creators, Generic, infer. Летим в космос !!! React, Redux, TS

[@user-ig5jm2mk7k]

Лучший, не сдавайся!!! Спасибо за урок!!

[@youfavorite]

Все супер, продолжай в том же духе)))

[@user-jf7mk1ju3t]

Супер видео, до этого пытался все типизировать сам , уже хотел разочароваться, НО все же заглянул дальше и не пожалел, крутой способ типизации actions! React + TypeScript / Actions Creators, Generic, infer/ React JS - Путь Самурая 2.0

[@hostiseeyou]

супер, уже зарефакторил actions) раньше действительно выносило мозг все это описывать

[@user-mu7xd2lg7z]

Очень крутой курс👍👍🔥

[@gagikkhachatryan3141]

Бомба а не урок )). Переворотный урок потому что мы можем уже не делать то что мы делали почти 100 урок, я про action types. Но у меня есть две вопросов 1) а что если вместо этих двух типов написать один и более 'легкий' : type InferActionsType = T extends { [keys: string]: (...args: any[]) => infer U } ? U : never вроде работает)) 2)но все же если удалить константы будет же длинные у нас объекты в Action Creator-ах если мы соблюдаем redux-ducks Заранее спасибо за ответ Димыч , ты лучший

[@mykhailostepanishchev6472]

Спасибо ! React + TypeScript / Actions Creators, Generic, infer/ React JS

[@mariiatkachova570]

Спасибо Дима за твой труд!!!!

[@user-np9mq5xc7j]

Круто. Спасибо! React + TypeScript / Actions Creators, Generic, infer/ React JS

[@user-il3vn7ye4n]

Cупер! За Hotkeys отдельное спасибо!

[@user-tf6jz7hj9d]

Good job, broh! Action Creators typesation, TypeScript, Generic, infer, React js

[@alexanderkozlov7416]

Остались только самые скилловые и самые настойчивые, кто до этих сложных штук с Typescript дошел. Action creators, generic, infer - раскрыты. Димыч, спасибо.

[@BobbyBob21]

Спасибо за информацию. Несколько лет назад приходилось методом тыка это понимать. Зато теперь найти и вспомнить проще. Насчёт констант типов, у тебя получается в двух местах надо менять, если нужно. Ты сам правильно перед этим сказал, что если более одного раза значение повторяется, то лучше вынести в константы. При реф-ге меньше потом меньше править придётся))

[@dimzinnatov7242]

Самое крутое, что type script дает больше возможностей, чем типизация в C#)) Возможно ошибаюсь) Спасибо за такие апгрейды кода, они очень спасают!

[@aleksandrglebik8033]

Спасибо, Димыч! React + TypeScript / Actions Creators, Generic, infer/ React JS

[@Yuriy2311]

Этот видос вообще крутой!

[@anthony_fed]

Димыч! огромное спасибо! полёт нормальный)

[@user-cl7cy7ze5z]

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

[@user-cl7cy7ze5z]

Как получу первую зп, закину донат!

[@Abdul-hy4cy]

включаю видео, лайк автоматом

[@evgeniychip]

Димыч лайкос, ты лучший

[@user-ku2cf7dw4t]

До конца года конечно не получилось, но Димыч не уточнил до конца какого года)))))) Generic, infer. Димыч очень тебе благодарен уже работаю Jun - спасибо. Лечу с тобой в космос, ну как минимум до mid +

[@user-wd3tl2rx9p]

Димыч, спасибо) React + TypeScript / Actions Creators, Generic, infer/ React JS

[@user-pc9bl7uf1l]

Огонь! Благодарю! Дякую, Xièxiè, Merci, thanks

[@user-ti8ol2zo3l]

Катану самураи ведь не бросают!(( А вообще очень крутой курс) Очень крутое объяснение! Сколько раз попадалось на глаза расширение *.d.ts. Принципы типизирования очень круто описаны.

[@sandorkligan2208]

Спасибо, Димыч! React TypeScript Actions Creators Generic infer

[@ivolokha9146]

ахаха, умеешь повеселить Димыч (начало с мечом)))) !спасибо. интеренсо обьяснил за Generic TypeScript

[@user-qc1cn4dl8q]

Привет всем. Спасибо, Дима за оч крутые уроки. Хочу поделится проблемой с типизацией по этому уроку и ее решением. При использовании констант TS не видел никаких полей у экшенов кроме поля type. После того как убрал константы и поменял на строки все заработало)

[@mrakov]

Димыч, ещё очень удобно, когда выбираешь несколько строк, как ты делал, если строки одинаковые, ты также можешь стрелками курсор двигать, и 'home' 'end' клавиши также работают на все выделенные строки. ускоряет очень.

[@SemenAlexndrovich]

Возможно кому то будет полезно: В случае если нужно поменять несколько строк, где есть совпадающие слова, например "type: ", можно воспользоваться сочетанием клавиш "Alt + J", которое выделяет по одному совпадения с выделенной областью, добавляя к каждому кусор. Соответственно не придётся целиться мышкой чтобы поставить второй курсор (в VS Code эта функция на Ctrl + D вроде работает) Так же очень удобно в таких случаях пользоваться следующими сочетаниями клавиш: Ctrl + backspace / del - удалить все слово home / end - перемещение курсора в начало / конец строки Ctrl + Shift + направление - выделить все слово в определённом направлении (если не нажимать shift то можно просто перемещать курсор через все слово) P.S: Лучше уроки по TypeScript + React. Спасибо =)

[@mrmicolka]

React + TypeScript / Actions Creators, Generic, infer. Вынос мозга. Летим дальше) Все чаще возникает мысль акшинкриейторы в отдельный файл вынести.

[@ITKAMASUTRA]

Попробуйте! Ищите свою структуру файлов и объектов/функций

[@ruslanla4654]

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

[@user-tr8hr4xm1l]

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

[@brucewayne_007]

Буквально болит мозг, но круто!

[@axi._.x4043]

Забавно смотреть на статистику просмотров 1й выпуск 546 000 просмотров 109й* 12000

[@maxim.saharov]

не доживают люди наверно)

[@robbinthebank1121]

В конце ролика пообещал что доделаешь обещанные 100 выпусков за этот год, 17 апр. 2020 г. Жду и надеюсь твои "ОЧЕНЬ мощные 2 проекта" стоят того что бы забрасывать путь самурая 2.0.

[@oconnor4417]

Actions Creators, Generic, infer, Димыч спасибо! Допили, пожалуйста, курс!!! Путь Самурая 2.0 ❤❤

[@user-pc9bl7uf1l]

Переход клевый!!!

[@visokogroup7922]

О май гад ! infer React TypeScript !

[@user-vo6vd9uo6o]

React + TypeScript / Actions Creators, Generic, infer - всего 20 мин, но насколько код сократили, круто! p.s. Может кому пригодится - в Safari после последнего обновления перестала работать авторизация - в настройках браузера нужно снять галочку "Предотвращать перекрестное отслеживание"

[@maxim.saharov]

18:23 мне кажется что сейчас переключалка страниц не будет работать у Димыча и т.д. все что он поудалял)

[@vanunisakanyan853]

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

[@Al4ii]

Бомба!

[@StepanVorobiov]

Вот чёто TS на бизнес уровне мне гораздо больше заходит. Наверное вообще правильно использовать TS идя от BLL, ведь так? Тогда он будет скорее помогать в разработке... За видос Спасибо! Кратенький и нужный!

[@ITKAMASUTRA]

В 10-11 уроке об этом говорю! По сути есть смысл идти от api...

[@vladyslavkravchenko5955]

alt + ctrl и стрелочками вверх вниз по вертикальной линии курсоры плодит, тоже очень нужная hot btn

[@user-pc9bl7uf1l]

React + TypeScript / Actions Creators, Generic, infer/ React JS - Путь Самурая 2.0

[@militant6709]

можно не Alt зажимать и кликать, а зажать колесико и тянуть мышкой

[@ITKAMASUTRA]

Нет мышки)) но спасибо)

[@Artem.20]

с колесиком получилось. А с Alt не получилось. У меня убунту

[@Artem.20]

нашел, в убунту надо вместе нажимать Ctrl Alt Shift

[@user-gv3le1rb5k]

Спасибо, Димыч!) Очень понятно объясняешь) Вот бы в универе были такие же преподы как и ты..

[@waltergibbs3041]

@Vlad Balabkin я как студент-программист универа могу сказать,что в тюрьме отсидеть 4 года было бы полезнее

[@Vlad-us9xt]

top)

[@mykolakozub675]

спасибо! а из-за чего не используете prettier and linter? прописывать несколько раз action.names лучше чем деструктуризация? const {a,b,c} = actions

[@genesismens9898]

Лайк за взрыв мозга

[@user-yx7in9nl1d]

09 - React + TypeScript / Actions Creators, Generic, infer/ React JS - Путь Самурая 2.0

[@MaxKievSky]

Димыч, посоветуй когда переходить с первой низкооплачиваемой работы джуна, на более высоокплачиваемую но тоже джуна? Или ходить по собесам теперь не останавливаясь прка не устроит уровень ЗП?

[@kek_pupold]

Приветик. Когда примерно будет Ant Script?

[@Abdul-hy4cy]

React + TypeScript

[@user-sn5nu8mz7f]

Не плохо однако... но с каждым хитрым подходом, все равно идут танцы с бубном :) До такого подхода, у нас была плюшка в виде типа из всех actions ... Что б в другом редюсере вызвать санку из первого... пришлось именовать actions и его типизацию и пробрасывать в нужный редюсер. Потом делать микс типа : type ActionsTypes = ProfileActionsTypes | AuthActionsTypes | FormAction и пихать это в типизацию санки... Если редюсеры раздуть хорошенько, будет головная боль опять. В общем, если типизировать всё и вся а не только ключевые вещи, типа структуры данных и функции... начинает подгорать слегка.

[@ITKAMASUTRA]

Да, блин, свои плюсы/минусы у любого подхода!

[@user-xd6ev4gz2k]

а я сразу вынес все типы в папку types (и сделал огромный тип из всех вообще actions и вообще всех thunks + FormType из redux-form и все))

[@n0escape]

Типизация Actions Creators часть 2 типизируем usersReducer как пример удаляем все типы у объектов action и очищаем actionTypes ставя заглушку any запихиваем все Actions Creators в объект actions превращаем Actions Creatorsв стрелочные функции export const antions = { setCurrentUsersPage: (currentPage: number) => ({ type: SET_CURRENT_USERS_PAGE, currentPage }), ... } Чтобы создать типы создадим функцию которую поместим в reduxStore Для определения типа объекта создадим джинерик который принимает объект экшнов, у которого есть ключ - значение, где ключ это название экшнкреейтора, а значение - чтолибо (в нашем случае функция) и мы это значение определяем с помощью infer и возвращаем тип экшнкреейтора. Так же если не передается указанная конструкция то ничего не возвращаем (never) type PropertyTypes = T extends {[key: string]: infer U} ? U : never Для определения типа экшнкреейторов создадим так же джинерик: В него мы передаем объект с экшнами и говорим что он extends (является) объектом у которого ключ это string в значение это функция которая может быть с любыми передаваемыми параметрами и с любым возвращаемым значением: T extends {[key: string]: (...args: any[]) => any } Для опредениения типа просто используем ReturnType джинерик передавая как значение тип PropertyTypes. Итого ActionTypes выглядит: type InferActionTypes any}> = ReturnType Теперь для определения типа экшнов используем InferActionTypes передавая как аргумент typeof объекта с экшнкреейторами type actionTypes = InferActionTypes Также исправляем экшнкреейторы. Возвращаемым объектам присваеваем тип const Т.к у нас есть типизация экшнов, нам ts помогает избежать опечатки при написании типов экшнов (типы которые отвечают за разные события (не типы из ts)), мы можем избавится от констант типов экшнов (const FOLLOW = 'socialNetwork/users/FOLLOW')

[@user-vj8hj9jk2b]

Спс за урок. Есть чувство, что убирать константы в reducer при типизации - хоть круто и продвинуто - но ухудшает читаемость и общую картину кода. Прокачаный чел поймет, а остальные призадумаются.

[@territory_of_manifestation]

Где то уже был вопрос по поводу redux- toolkit?

[@endorphinair8166]

vs code делает автодополнение констант, а шторм не хочет, только в ошибке тс указывает какие типы доступны, невкурсе в чем может быть проблема?

[@furzaa]

Как потом эти actions использовать в контейнерах, как правильно импортировать?

[@legmo]

kzbin.info/www/bejne/ip-1qWuVo5mGj6s

[@narutominer]

Совет: Если вас как и меня бесят названия стандартных типов (number, string и тд), то можно в корневой папке проекта сделать файл с расширением d.ts (например type.d.ts), и там переименовать те типы которые вам не нравятся (например: type num = nymber, type str = string, и тд), таким образом переименованные вами типы будут доступны во всём проекте без каких либо импортов. P.S. работает только с файлами которые находятся на том же уровне с файлом с типами или файлами ниже, с файлам выше по файловай системе работать не будет, поэтому лучше всего ставить в корневой папке проекта если эти типы глобальные. P.S.S Как вы понимаете таким образом можно переименовать не только только стандартные типы, но и сделать новые, свои, и импортировать их не прийдётся.

[@masha18able1]

ага, а потом твой дерьмо-код никто не поймет и тебя уволят

[@narutominer]

@@masha18able1 Да 😅 лучше так не делать. Был зелёным и глупым когда это писал)

[@iGotton]

+

[@user-pn2wz2ns8q]

Ссылка где-то здесь не вылезла.

[@nashuarash]

Первый вариант работает ? оставить как есть : переделать

[@sivkaburka1062]

Доделал до 19:54

[@user-xd6ev4gz2k]

привет димыч! не понравилось, что в объекте, где хранятся actions, если начинать писать код неправильный (не функцию к примеру), то ошибка падает "где-то там" (в данном случае в redux-store, но или где-то еще, но главное, что не там, где мы допускаем собственно саму ошибку). То есть делаем ошибку в одном месте, а подсвечивается, что мы ошиблись в другом! - это подбешивает,ибо надо вникать и читать ошибку, где она вылезла.

[@user-xd6ev4gz2k]

+ - код короче, но что-то меня смушают эти два минуса))

[@ITKAMASUTRA]

Можно для этого объекта попробовать создать тип и типизировать его при объявлении: const actions: ActionsWrapperType = { action1: () => {}, notFunc: 16 // ts error } Несложно написать такой тип

[@user-xd6ev4gz2k]

еще один минус как я понимаю (или нет, но если нет, то объясните почему), но по-моему, если использовать thunks в разных файлах (а используем мы к примеру одну лишь санку из 20), но импортить мы должны все 20??? Ведь экспортируем мы объект целый, а не по отдельности каждую санку, влияет ли это на производительность?

[@user-xd6ev4gz2k]

@@ITKAMASUTRA ок. понял, попробую))

[@user-xd6ev4gz2k]

@@ITKAMASUTRA Привет Димыч! А мог бы записать минут на 10, что лучше: apollo graphql или mobX или redux и вкратце почему и какие фишки они дают, и каких нет минусов?)

[@user-qb9ys4nd9f]

Какие крутые курсы у вас, большое спасибо вам. А какие ресурсы для изучения питона можете посоветовать?

[@YuriiBondarenko]

сделал все по видео, прочитал статью, указал as const внутри action creater`ов. Typescript ругается на payload. (Property 'payload' does not exist on type)

[@ITKAMASUTRA]

Попробуйте посоветоваться с сообществом в телеграм канале t.me/reactjs_samurai

[@alexcherepanov2116]

добавь as const

[@aershow]

Поделись, плз, как решил проблему? У меня такая же ерунда.

[@mishachernov8784]

Димыч, а будет видосик про саги? Я просто смотрю паралельно ещё курс и там парень говорит шо санки фигня, юзайте саги, но он не обьясняет как ты.

[@ITKAMASUTRA]

Саги в отдельном выпуске попробую объяснить! Но я противник саг на фронте! Это сложный паттерн, который настой взгляд на фронте избыточен в 9Х% случаях!

[@andreiovsenev6573]

Надеюсь Димыч против не будет, в этом докладе пусть кратко, но очень понятно и с аналогиями на санки объясняют саги kzbin.info/www/bejne/iJCngZauoJmgopo

[@user-ly5ez5ln7y]

классная фича, но не слишком универсальная, на мои actions, которые немного отличаются не смогло подойти, возможно ответ есть в статьи, спасибо)

[@ITKAMASUTRA]

Беда в нюансах (((

[@darthvader3559]

@@ITKAMASUTRA привет, я использую слайсеры вместо редюсеров, и там обычно идет Action.payload, а тут у нас в проекте Action сидят id, user, number, isAuth. И тайпскрипт ругается на несоответствие количества аргументов, что можно сделать? И будут ли уроки, хоть один по типизации редакс тулкит

[@alexup7437]

React + TypeScript + Actions Creators+ Generic+ infer+ React JS

[@KilungChannel]

чувствую дрож хахах

[@chtotutunas432]

аааааааааа

[@bugaga8144]

Димыч где 100 выпусков? 20:05

[@kek_pupold]

Я оставил константы, не вижу смысла их удалять

[@shmatkoplus]

Кто еще не лайкнул ???

[@crypto4elik]

повторил но ниче не понял)

[@user-cd6pc5fj8z]

Для тех кому было очень интересно, но нихрена не понятно, у Димыча на канале есть более понятное видео, о том как это все работает. МБ кому пригодится kzbin.info/www/bejne/iHzVnISue759Z8U

[@user-yx7in9nl1d]

На момент просмотра мной этого видео - 666 лайков и 6 дизлайков))

[@vadimbrovich]

На момент просмотра мной этого видео - 895 лайков и 0 дизлайков))

[@user-pb3yt3bo9u]

21 год только 21 выпуск(((

[@user-kn2ou2pu3e]

Для тех, кто как я хочет использовать переменные, а не строки для названий экшенов const FOLLOW_USER = `${APP_NAME}/users/FOLLOW_USER` as const followUser: (user_id: number) => ({ type: FOLLOW_USER, user_id }) Нужно написать as const после значения константы Может кому то будет полезно)

[@genapolyakov]

можно только одну строчку написать в Redux-Store : export type InferActionsTypes = T extends { [key: string]: infer U } ? U : never тогда в User-reducer : type ActionsTypes = ReturnType и нужно везде подправить ссылки на action. Димыч удалил setCurrentPage. Зря. Теперь у него не будет сохранятся страница, честно он и не написал код для setCurrentPage. Еще с первой части идет ошибка. я бы еще не убирал как Димыч const для action.types проверка будет проходить. Но теперь не будет работать Redux-ducks. Я объединил все типы в один объект types. Ниже пример. В action и reducer добавил types. перед названием типа. const types = { FOLLOW: 'network/users/FOLLOW' as 'network/users/FOLLOW', UNFOLLOW: 'network/users/UNFOLLOW' as 'network/users/UNFOLLOW', SET_USERS: 'network/users/SET_USERS' as 'network/users/SET_USERS', SET_CURRENT_PAGE: 'network/users/SET_CURRENT_PAGE' as 'network/users/SET_CURRENT_PAGE', SET_TOTAL_USERS_COUNT: 'network/users/SET_TOTAL_USERS_COUNT' as 'network/users/SET_TOTAL_USERS_COUNT', TOGGLE_IS_FETCHING: 'network/users/TOGGLE_IS_FETCHING' as 'network/users/TOGGLE_IS_FETCHING', TOGGLE_IS_FOLLOING_PROGRESS: 'network/users/TOGGLE_IS_FOLLOING_PROGRESS' as 'network/users/TOGGLE_IS_FOLLOING_PROGRESS' }