08 - Redux-Form + TypeScript + Generic или как решать проблемы / React JS - Путь Самурая 2.0

it-incubator.io/education/?ut... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Библиотека redux-form немножко сложновата для типизации, особенно для новичков!
Но ничего нет невозможного. Самое главное помнить, для чего мы вводим типизацию: чтобы типизировать ВСЁ чтобы было так, или типизировать то, что опасно, что нам важно, чтобы контролировалось компилятором, то есть чтобы решалась конкретная проблема?
Я за второй вариант. На эту тему сегодня и буду размышлять, решая проблемы с типизацией, возникшие при типизации Redux-Form
Так же в данном выпуске мы впервые напишем свою первую Generic-функцию. Если тяжело понять Generic в TypeScript на данном примере - не переживай.. Мы скоро ещё одно обощение напишем, оно будет попроще для понимания. Летим ;)
Мы красавчики, друзья! Мы - самураи! Летим в космос, братья и сестры!
Поддержать проект монеткой: 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
#reduxform #typescript #generic #axios #api #практика #примеры #уроки #курс
Удачи нам, друзья!

[@johnunderwood4904]

Как я рад, что потратил время ещё давно, переписав полностью всё на Formik.

[@sash159]

Димыч запили Saga, нигде нет толкового объяснения

[@Krzysiekoy]

I don't speak the language, but I understood everything and I have managed to type my reduxForm component successfully including the injected props. Thank yo so much.

[@user-pc9bl7uf1l]

Димыч, благодарю за то , что тренируешь наши мозги! Есть спорт/йога для тренировки тела, а есть Димыч для тренировки мозга ! Arigatō

[@user-wr3dz2op1t]

Летим, Redux-Form + TypeScript + Generic или как решать проблемы / React JS - Путь Самурая 2.0 !!!

[@danilblack8296]

Generic, TypeScript, React, redux-form, assign. Dimych is the best teacher of the world!)

[@RomanKalugin]

Redux-Form, TypeScript, Generic, React, Redux. Добрешей души человек

[@Abdul-hy4cy]

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

[@alexanderkozlov7416]

Чем дальше, тем больше люди сливаются. Но ты, Димыч, не сдавайся, бомби! Все равно польза колоссальная. Я еще не видел нигде, чтобы так все доходчиво объясняли. Redux-Form, TypeScript, Generic - будут изучены. Идем на взлет с React JS.

[@mrmicolka]

переворачивался рабочий стол ещё в первом сезоне) Спасибо за женерики!

[@vadimsetsko173]

Ничего не понял, но очень интересно! Типизация Redux-Form задачка не из легких, на этом месте перестает нравиться TypeScript

[@user-op5bq9tt1p]

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

[@elenakniazeva5388]

очень актуальный для меня сейчас контент, спасибо тебе! redux-form typescript generic ДАЕШЬ ПРОДОЛЖЕНИЕ =)

[@user-je1el3gj9d]

3 часа это прямо марафон типизации, ждем)

[@Subconst]

Вдруг кому интересно, как можно redux-form meta типизировать: type FormsControlType = { meta: WrappedFieldMetaProps }

[@user-rg4co7hv7o]

Там ещё важный момент импортировать не из redux-form, а из библиотеки, /lib что-то там...

[@n0escape]

Еще одна тема в "коротком видео": Generic. В нашем частном случае мы хотим сделать "типизацию" параметра name в функции createField. Идея такая, что мы берем типизацию формы и используя ее ключи типизируем name в createField таким образом, чтобы name принимала в качестве параметра ключи типов формы. Для получения ключей типов используем keyof Type для создания дженерика createField переделываем функцию без стрелочной реализации: export function createField ( name: formKeysType, .... ) { ... } Теперь при вызове функции createField передав как джинерик параметр ключей типа (loginFormValuesTypeKeys), у нас будет типизация name параметра {createField("input", "email", [required], "Email", "text")} Получить ключи можно такой записью type loginFormValuesTypeKeys = Extract она означает что мы берем ключи и сравниваем их тип со string и если так, то добавляем в типизацию

[@Drezerak]

Я думал, что один этот урок мало понимаю! А оказывается, по комментам, тут много кто не понимает вообще ничего! Бомбим, фигачим! Всем удачи и деньжат в придачу!

[@TheSkimless]

Спасибо за уроки! Ждем saga

[@alexleshenko]

Ох человечище) как я рад что ты есть)

[@user-lz5wf1sn3e]

Лучшие видосы по redux form + typescript! :)

[@alira2924]

Mой мозг взрывается. Спасибо за уроки!

[@user-pc9bl7uf1l]

Kon'nichiwa, Дмитрий! Доброе время суток!

[@chtotutunas432]

Благодарю Димыч !!! Приходит понимание

[@user-ig5jm2mk7k]

Спасибо большое. Классный урок!

[@user-gv3le1rb5k]

Спасибо, Димыч!) Понятно объяснил сложный материал. React, TypeScript, Generic, Redux-Form

[@bystryisokol1546]

Димыч как всегда красава! Знания полученные и первых 100 выпусков, позволяются самому бомбить приложения на реакте свободно. Главное однонаправленный поток понимать, а остальное нарастёт со временем. А сейчас ещё и type script'a основы как на тарелочке.! +++ Благодарность

[@dimzinnatov7242]

Спасибо биг, что показал Exact!!! Очень полезные вещи дает Typescript)) Больше возможностей крутить-вертеть свой код, исключая человеческий фактор))

[@sandorkligan2208]

Спасибо, Димыч! Redux-Form TypeScript Generic

[@mykhailostepanishchev6472]

топчик,спасибо ! Redux-Form + TypeScript + Generic

[@spraer7622]

Жду новое видео, очень качественные курсы

[@maxim.saharov]

Так как Redux-Form уже не используется - то я делал все формы через Formik и в формике типизировать все намного проще - пару строк кода добавил и все). Весь код можно посмотреть в моем репо.

[@maxim.saharov]

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

[@maxim.saharov]

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

[@elenaswiderskaya718]

Отличное объяснение generic!

[@user-ku2cf7dw4t]

Ууууфх!!! Выдохнули. Смотрел весь день чтоб осознать и проглотить. Это конечно было не просто, но я въехал в Generic, Typescript. Димыч сенкс. Как всегда жирный лайк.

[@user-ij9qf9yx8z]

Кажется мы действительно на Midle уровне. Димыч спасибо за видео! Redux-Form + TypeScript + Generic или как решать проблемы

[@user-ey6em3my8p]

Спасибо за разжовывание типизации redux-form :) Но мозг все равно лопнул))) (TypeScript + Generic + Redux-Form)

[@user-je1el3gj9d]

Ждем тебя!! Возвращайся Димыч))

[@SemenAlexndrovich]

Спасибище ! =)

[@user-tf6jz7hj9d]

Super! Very interesting information and practice, Dymych!!! Thx a lot for Redux-Form TypeScript and Generic and solving all of that promblems occuired :)

[@MJstart]

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

[@dmitrykirilenko9293]

круто!

[@ITKAMASUTRA]

Спасибо!!

[@aleksandrglebik8033]

Спасибо, Димыч! Redux-Form + TypeScript + Generic или как решать проблемы / React JS

[@marianfree3543]

Если честно,единственыый урок из 108 которые я уже посмотрел,который мне не понравился.Слишком много поиска по документации и внутри компилятора информации о том как нужно типизировать.Я понимаю что это тоже плюс,ведь мы так же должны учиться искать,но все же,мне кажеться перебор,очень много времени занимает и ещё больше не понятно.А так то остальные уроки бомба,все очень понятно и легко,спасибо за курс!!)React,redux,typescript

[@otto-vector]

Протипизировал весь проект сначала, теперь многое понятно из того что ты говоришь здесь. Буду это использовать чтобы пофиксить то, что сделал самостоятельно. Оказывается можно просто объяснить то что выглядит совершенно абстрактно. Это талант. Для тех кто ищет типизацию [квадратных скобок] при обращении к объекту, используйте следующую конструкцию. type ExampleObjectType = {a: string, b: number}; const ExapmleObject={ a: 'blabla', b: 33}. {k=...неопределённая логика высчитывающая ключ a или b в переменную..., c = [k as keyof ExampleObjectType]}. Возможно это костыль, но на данном уровне знаний он мне очень помог. TypeScript. Простое и понятное объяснение Extract 1:14:20. Redux-Form. Generic.

[@user-wd3tl2rx9p]

Димыч, спасибо) Redux-Form + TypeScript + Generic или как решать проблемы / React JS

[@eugenep9592]

Почти весь проект протипизировал, оставалась проблема с redux-form, а именно formData, после просмотра понял как исправить. Пока generic плохо заходит, а так топ, бомби дальше) Redux-Form TypeScript Generic

[@yuliyareichbaum9582]

Ой-ой-ой, первый урок за весь курс, где мозг на середине отказался воспринимать информацию и полностью потерял нить. Конечно, попробую завтра еще раз вникнуть на свежую голову, может быть, я просто устала... Типизировали, типизировали, да невытипизировали...

[@user-bl4dl9ke7b]

Спасибо

[@user-on9ul4zx6n]

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

[@SerhiiNesterov]

спасибо !

[@kurtmiller77]

Димыч мне хоть трехчасовые версии видосов, жду больше инфы, больше!

[@user-pc9bl7uf1l]

Вот это тренировка - мозг отказывается понимать происходяще ) Но я его заставлю )

[@rebel6052]

В redux-form есть итерфейс WrappedFieldProps, типизирует сразу все пропсы кастомного филда, остальные пропсы через в деструктиризации через ...custom кидал

[@swan3769]

Спасибо большое за уроки! Отличная подача и заряд энергией) Дим, будет выпуск по установке разных ролей для приложения? Очень актуально

[@TheLevius]

Ну что будущие мидлы, кто уже в своем познании (после этой серии) настолько преисполнился Typescript в React, что не нужны вам уже все эти тачки, квартиры, срачки, яхты...? там впереди еще выпусков на 4 с половиной часа типизации)))

[@bugaga8144]

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

[@user-pc9bl7uf1l]

Redux-Form + TypeScript + Generic

[@tema_skakun]

Димыч, я сейчас каааак понял что такое geniric))) Объявляем в функции параметр типа, а потом передаём через него нужный тип и наша функция уже не зависит от захардкодженного типа.

[@vasylharastei9205]

В redux final-form все намного проще с типизацией, советую перейти на RFF или на Formik! Redux-form умерла

[@Abdul-hy4cy]

Redux-Form

[@Manya937]

Generic можно сделать для стрелочной ф-ии: const funcName= (name: T) =>{...}

[@crypto4elik]

если не понимаете англ слово, например что значит асайнится, вглядитесь в корень. assign --> Sign в переводе знак, символ. То есть assign это что то вроде дословно оЗНАЧать, оСИМВОЛить, а в нашем тайпскрипт контексте становится ясно, что сей термин значит)

[@visokogroup7922]

Я просто в шоке как ты быстро определяешь ошибки и решаешь их..

[@artempavlenko5147]

54:30 Димыч, где ты был раньше ))) жесть как полезно

[@vladyslavkravchenko5955]

8:30 у меня папа временами приносит свой ноутбук и говорит: "ой я тут что-то сделал и все перевернулось, верни как было пожалуйста"😂 Всегда не понимал как он это делает, теперь знаю что на интеле есть такие кнопкосочитания

[@bugaga8144]

Просто, жесть, на прошлом выпуске приходила мысль что TS это не так сложно как кажется, в этом выпуске пришла мысть что да ну ее эту библиотеку redux-form, еще потом типизировать заставят

[@supitacantora413]

Очень качественные уроки.Когда будет продолжение??

[@user-lg3uy2lx9h]

летим) #TypeScript #React #Redux

[@Abdul-hy4cy]

35:00 - о. Я читал какую-то статью, которую этот человек написал.

[@Abdul-hy4cy]

TypeScript

[@vadikpanchuk4978]

08 - Redux-Form + TypeScript + Generic или как решать проблемы / React JS - Путь Самурая 2.0 ++++ Учим дальше!

[@petrovpetrov6095]

Непонятно но очень интересно )

[@shsh01212]

Тролить девчонок на лабах переворачиванием монитора - отдельное развлечение)))

[@bohdanbilun9745]

Если столкнулись с проблемой типизации FormControl на 49 минуте то спокойно смотрите дальше, всё разрулится 🙂

[@daniilpautkin]

Круто быть самураем! Есть ли где то плейлист с твоими треками?

[@user-gi9xk7jt1f]

Можно использовать не react.FC, а VFC - это компонента возвращающая Void, тогда не будет childrenа внутри и это будет более быстро.

[@user-vj8hj9jk2b]

Надо переходить на Formik...

[@user-pc9bl7uf1l]

React JS - Путь Самурая 2.0

[@user-je4zx5vf3p]

На 54 минуте если исправить child на children то оно перестанет подсвечивать

[@oconnor4417]

Димыч ты лучший!!! Подскажите, кто то сталкивался с проблемой в FormControls : Initializer type ({meta: {touched, error}, children}: {meta: {touched: any, error: any}, children: any}) => JSX.Element is not assignable to variable type React.FC Все светит красным, но компилится и работает

[@mashadraguta]

спасибо твои титанический труд актуален и в 2022 с меня подписка на патреоне с первой зарплаты #react #typescript #redux #generic #redux-form #formik

[@alessarver7216]

ReduxForm TypeScript Generic

[@sivkaburka1062]

Доделал до 1:19:17

[@Abdul-hy4cy]

Generic

[@user-xt9nl7no8e]

Димыч, где можно послушать эту твою песню полностью? Заряжает энергетикой капец!!

[@Volodymyr.S]

Redux-Form, TypeScript, Generic, React, Redux

[@gagikkhachatryan3141]

Урок как всегда хороший , но если честно я не думаю что redux-form это прям необходимость.Как по мне redux-form приносит столько проблем сколько он решает.

[@shamilsalakhutdinov5519]

а что лучше? formik?

[@gagikkhachatryan3141]

@@shamilsalakhutdinov5519 я имел ввиду что можно без каких то библиотек сделать,, просто хранить информацию в state-е

[@user-np6yg2gv3l]

Typescript!!

[@vitbar5998]

Димон, где новые видосы? Я думал мы тут в светлое будуйщее идем? ))) react, redux, typescript, redux-form

[@iGotton]

+

[@Erebor99700]

Я правильно понимаю , что сложности с типизацией в этом выпуске во многом из-за того , что мы юзаем redux-form . Если бы использовали формик или что то подобное , я бы не чувствовал себя идиотом ?))

[@nashuarash]

тяжко...

[@ringnull]

Димыч ) Ты зря в описании к видео не пишешь ссылку на репозиторий с программой. Люди могут не знать где репо.

[@otto-vector]

нагуглил эту репу в первой же строке поиска. пусть учатся :)

[@ringnull]

@@otto-vector лучше в описании ссылку ставить, гуглить и так есть что

[@user-xd6ev4gz2k]

Привет, Димыч! а ты говорил о 100 уроков до мидла + самостоятельное обучение - это понятно. А вот эти 100 уроков рили будут, просто видосы больше часа (мне норм, так даже лучше). Просто интересно, реально столько много инфы надо, чтобы стать мидлом?) или из-за такой большой длительности ты сбавишь до 50 уроков или как?) А так спасибо за курсы))

[@akionka]

Учиться мало не бывает

[@ITKAMASUTRA]

Ребят, все эти лычки - суперусловности! Просто мегаУСЛОВНОСТИ! Я сужу по ситуации на рынке сейчас - знаний первого сезона хватает для трудоустройства на джуна... Мидл, тот кто сам может принять решение и построить более или менее адекватное приложение сам, может не самое оптимальное, но все же! Поэтому моя задача будет за второй сезон добить возможную организацию приложение до конца! Но опять же... все условно! 🙋🏻‍♂️🚀🙏

[@user-xd6ev4gz2k]

@@ITKAMASUTRA понял, спасибо! Так я вот перепрошел твой курс (второй раз конспект переписал, смотрел на х2 скорости и прошел весь курс снова)))) Сейчас все сделаю по одному разу (все что было в данном курсе, но по одному разу) и получается, если я сам смогу повторить - я мидл?)

[@n0escape]

проходя уже 8 урок, не пропадает ощущения, что типизация это код ради кода. (местами даже дублирующийся). 18:55 "я противник избыточной типизации" (Димыч) - По факту 18 уроков про типизацию всего что есть 🤣🤣 по уроку: типизируем ligin.tsx и formControl.ts login.tsx: Фиксим пропсы не инсталил types react-router-dom т.к не было ошибок Типизировали mapStateToProps и mapDispatchToProps. Также использовали эти типы чтобы типизровать пропсы компоненты Login Типизируем форму. Тк. форма добавляет свои пропсы (помимо наших пропсов) нужно их както внести в типизацию. Redux-form поpаботилась об этом? добавив InjectedFormProps тип (импортируется из redux-form). Синтаксис как и с Array только параметром передаем типы элементов формы (loginFormValuesType) и наши личные пропсы (loginFormOwnProps). Так же не забываем добавить наши пропсы (через &), которые мы сами передаем в форму type loginFormValuesType = { email: string, password: string, rememberMe: boolean, captcha: string | null } type loginFormOwnProps = { captchaUrl: string | null } const LoginForm: React.FC = ({handleSubmit, error, captchaUrl}) => { ... } Типизируем hoc reduxForm. Чтобы типизировать нужно джинериком передать тип значений формы (loginFormValuesType), наши пропсы (loginFormOwnProps) и тип ошибки (не обязательно, по умолчанию string) const LoginReduxForm = reduxForm({form: 'login'})(LoginForm)

[@gavandroid6435]

катарсис наступает, когда час решаешь проблему с помощью гугла и какой-то матери, а потом понимаешь, что просто забыл поставить скобочки {}

[@n0escape]

Крч геморой по типам филдов. Я на свою голову блин придумал сделать универсальный компонент который будет обрабатывать разные филды. С типизацией все пошло к чертям. Благодаря комменту и гуглу зацепился за WrappedFieldProps и джинерик к параметру component в Field. Итого код выглядит так: type FormControlPropsType = { child: "input" | "select" | "textarea", name: string, validators?: Array, placeholder?: string, type?: string, text?: string, value?: string, } export const FormControl: React.FC = ({input, meta, ...restProps}) => { const hasError = meta.touched && meta.error return( {hasError && {meta.error}} ) } export const createField = ( child: string, name: string, validators?: Array, placeholder?: string | null, type?: string | null, text?: string | null, value?: string | null, props={} ) => { return ( { text } ) } Ошибка вылазит на строчке component={FormControl}, однако я на 80% уверен что сделал все правильно, т.к тип FormControl на который оно ругается, по исходному коду redux-form должен быть: ComponentType | "input" | "select" | "textarea" | undefined В нашем случае он React.FC. то, что в нашем случае это измененная запись ComponentType где P это наши пропсы (FormControlPropsType ) а WrappedFieldProps содержат пропсы для input и meta Как итог. Код рабочий, однако оно все еще подчеркивает component, хотя код правильный

[@user-hg2sy3wi6t]

common!!

[@artemzavhorodnii1969]

нормально же общались 7 уроков до этого )) зачем такой вынос мозга хаха #Typescript

[@RassamahRass]

Можно узнать о каких суммах идет речь хотя бы примерно для обучения с нуля? Что бы хотя знать стоит ли мне Вам звонить и договариваться об уроках и обучении.

[@user-wo9rm5vw2w]

kzbin.info/www/bejne/f4qUnmichNF2Y6c

[@max_boy7470]

не компотeбыл) 53:13