04 - Redux + TypeScript / React JS - Путь Самурая 2.0

🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT -INCUBATOR:
Front-end
it-incubator.io/front-end/?ut...
Back-end
it-incubator.io/back-end/?utm...
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Коничива, самураи! 👌
Ну что, пора становиться взрослыми и нашу соц. сеточку мигрировать на TypeScript? Начнём с reducer-ов, определим типы для всех объектов, которые будем встречать в редьюсерах!
В первую очередь типизируем initialState-ы, а так же наши action-ы
Видео длинное. Не делайте под диктовку всё, пытайтесь после каждого моего редьюсера следующий редьюсер селать самостоятельно! Я в вас верю! Летим 🚀
Вы красавчики, самураи! Я вами горжусь! Спасибо за поддержку! Летим в космос вместе!
Поддержать проект монеткой: 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 #практика #примеры #уроки #курс
Удачи нам, друзья!

[@user-xd6ev4gz2k]

4-19: видео все будут примерно по пол часа 4-20: видео длится 1:14:59 ))))))))

[@user-xd6ev4gz2k]

мне даже так лучше, быстрее пройду.))

[@dimageorgiev5798]

Путь самурая непредсказуем )))

[@ITKAMASUTRA]

Ребят, скажу об этом в процессе! Посоветуйте, пожалуйста, вот как надо было поступить с данным видео????

[@liberty2862]

@@ITKAMASUTRA я люблю длинные например. Тут делай как тебе удобнее. Просто сложно все разжевать за 20 минут,согласен)) Я за длинные - кто за лайкаем ))

[@kardinalco]

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

[@user-sn5nu8mz7f]

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

[@user-hg5sc1yi8t]

эт жесть))

[@user-be7pc2of8n]

Это далеко не для мидлов, так, развлекаловка

[@vladosononame6376]

Это требования джуна для работадателей

[@sheshko_pavel]

@@vladosononame6376 мда(( уже требуют typescript и scss на джуна

[@user-eb5mc1ib4b]

@@sheshko_pavel тоже с этим столкнулся, сегодня TS маст хев на большинстве требований для джуна

[@atomix8159]

Может случится, что тайпскрипт не будет работать, это через то, что в папке с вашим проектом не создался tsconfig: Тогда создаем "tsconfig.json" вручную в общей паке с начинкой: { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": [ "src" ] } Всё должно заработать после перезагрузки сервака.

[@Karifax]

уточню - файл tsconfig.json должен находится в том же месте, что и package.json. Я его поначалу создал рядом с App, и он естественно не работал.

[@user-ou6ir7zv3z]

ОГРОМНОЕ СПАСИБО

[@karapet9annnn]

Респект тебе чел, СПАСИБО ОГРОМНОЕ!

[@sheshko_pavel]

Не делал app-reducer, а оставил авторизацию в authreducer. Поменял расширение на .ts и проект перестал запускаться. Пришлось в импортах явно указать расширение .ts, чтобы заработало... странно, но типизировать при этом не было необходимости. Типа: import authReducer from "./authReducer.ts"; import {login} from "../../redux/authReducer.ts"; Ух... сколько кода нужно написать... сложнова-то для понимания. Димыч красавец, подробно объясняет. #React #Redux #TypeScript #TS #types #.ts #understanding #тайпскрипт #типизация

[@konstantinvoronin4687]

Мне больше нравится светлая тема, потому что у сайты в браузере светлые, интерфейс операционной системы тоже светлый, инструменты разработчика в браузере тоже светлые. Когда часто переключаешься от светлой темы того же браузера/ операционной системы к темной теме IDE, то появляется дискомфорт. Ну это так, мое субъективное мнение.

[@dmitriij5685]

Сейчас почти везде можно поставить темную тему (и в браузере и в системе). У меня везде стоит темная тема, первое время было немного непривычно, сейчас только темная тема. Многие сайты, кстати, тоже берут тему в зависимости от темы браузера

[@user-fs4sl5my1o]

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

[@gurgenal4401]

Ты просто меняешь мир к лучшему бро тебе огромное спасибо.

[@ruslanla4654]

Димыч, любое видео твое смотрится на одном дыхании, даже если оно полуторачасовое . Самый крутой курс по Реакт - спасибо огромное.

[@goshana1987]

Чувак, спасибо. Так ты круто информацию доносишь. Смотрю весь твой контент, даже если знаю тему. У тебя формируется хорошее осознанное понимание. Вообщем удачи большой и спасибо огромнейшее.

[@mikhaildevichensky6407]

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

[@ITKAMASUTRA]

Спасибо за обратную связь и добрые слова ✊

[@user-xs2dx2mh3f]

Лучший курс по React. Димыч как всегда красавчик. Спасибо за топовые уроки!!

[@gagikkhachatryan3141]

Очередное бомбоческое видео, уже понятно как типизировать Redux Reducer-ы с Typescript-ом

[@rahalmamut01]

Димыч, спасибо за урок по typescript, сначала отношение такое же как в начале изучения тестов, под конец видео стало даже нравится типизировать 🚀

[@ivanmiarkulau8320]

Спасибо за урок, мы типизировали наши Reducers в React приложении с помощью TypeScript, все понятно, летим дальше!)

[@rva3674]

Наконец-то! Целый день ждал!

[@user-ji9nk6ef3i]

Как всегда очень понятно и разжевано. Спасибо Димыч за урок)

[@loopitsmusic]

Темная тема one love. Спасибо большое за видосы! Очень помог понять как работает React и Redux. Пожалуйста, продолжай делать такие крутые видосы! :D

[@sergiistryzg9699]

Темная тема) и глазам проще и привычнее=)

[@castiliOR]

какой же вы впечатлительный

[@sergiistryzg9699]

@@castiliOR да, я такой. Люблю когда все не резко

[@stanislavaksenov9000]

а ничего что это вредно для зрения

[@castiliOR]

@@stanislavaksenov9000 всё зависит от яркости монитора

[@stanislavaksenov9000]

@@castiliOR нет, долго работать за темным фоном вредно не только для глаз, но для психики (повышается утомляемость, склонность к депрессии). это не я придумал, это результаты серьезных исследований. Темная тема подходит для развлекательного контента, но не для работы. Но это дело каждого, я никого не заставляю, кто по умнее тот задумается

[@resenpaii]

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

[@user-pc9bl7uf1l]

Как всегда - - все на высоте! Летим !

[@arayoflight]

Это было очень круто! 04 - Redux + TypeScript / React JS - Путь Самурая 2.0

[@miguelgrushetckii4839]

Спасибо Димыч! все круто! лучше длинные видео, их всегда можно перемотать, если кто-то уже все это знает) а др обязательно посмотрят от начала и до конца! здорово объяснил! typescript react redux thunk actioncreator reducer

[@dataway_]

Спасибо, за всю твою работу)

[@mykhailostepanishchev6472]

Спасибо,как всегда высший класс !!! Redux + TypeScript

[@sergeo8752]

Супер! Спасибо! У кого не получается стартануть после апгрейда cra - добавьте tsconfig.json в корневую директорию (достаточно, вроде, вставить базовый из интернета), потом пару раз перезапустите проект. Подсказал человек в нижних камментах, ему спасибо! Повторно сообщение найти не получилось, так что дублирую. Всем удачи! Димычу спасибо!

[@vladyslavhalchyshak1176]

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

[@user-tp4fn2dl9w]

Спасибо! Пока в голове вопросы 🤔 новый подход, надо привыкнуть

[@dmitriymovchan6563]

Черная тема намного лучше - пусть дальше будет черная тема.

[@ervinabliamitov2149]

Спасибо Дима, бомбим!

[@naix136]

А мне нравиться заставка с песенкой, ни разу не перематываю когда новые ролики открываю:D

[@user-il3vn7ye4n]

Димыч, твои песни огонь, а объяснения топчик! Успехов тебе!

[@mrbluff4489]

Самурай! Особенно на скорости 2)) Спасибо за урок!

[@vadikpanchuk4978]

04 - Redux + TypeScript / React JS - Путь Самурая 2.0 +++++Даеш 1000 лайков Димычу за труд!!! +++А нам-бы времени и терпения побольше. Когда стараешся разбираться в уроках, листнуть доп литературу, Habr, Git ..., разложить в голове по полочкам и одновременно рефакторить, то 7-9 часов в день мало! Не представляю что успевают ребята у которых 2 свободных часа. Не сдаваться ! Всем удачи на пути к вершине React JS - Путь Самурая 2.0 !

[@oconnor4417]

Димыч ты как всегда - лучший! Спасибо большое тебе! Допили пожалуйста Этот курс!!!!

[@user-xs2dx2mh3f]

Как всегда все разжевано и понятно. Летим в космос вместе с TypeScript 🤑🤑🤑

[@lovefliymon9912]

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

[@user-wd3tl2rx9p]

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

[@maxim.saharov]

на 4:25 - tsconfig.json у меня не добавился в текущий проект автоматом и соответственно была такая ошибка «File is not included in any tsconfig.json» - я скопировал его с пустого чистого проекта и вставил в наш существующий и все стало ок) - ошибки стало как у Димыча показывать.

[@user-gr7bm5ll5w]

Красавчик Димыч, твои уроки вдохновляют. Typescript рулит

[@user-tf6jz7hj9d]

Круто! Очень интересно! Спасибо большое! typescript React reducer action creator

[@sevs700]

Димыч, спасибо тебе за крутые уроки!

[@user-mj2xm5lm4g]

Привет. Очень крутой трек в начале. Здорово, что ты так загоняешься с музыкальным оформлением. Было бы здорово послушать полностью, если таковой есть

[@ctumyji9737]

Супер! Делал сам и сверялся с Димычем - все получилось :) Вылетаю дальше! За Dark тему отдельное спасибо! Redux + TypeScript

[@user-rg4co7hv7o]

Sdsddss: 'dich' - это просто мощно, Димон, ты лучший

[@user-jf2ic3up1k]

Тоже ору)

[@dimageorgiev5798]

Темная ;) коничива )))

[@nopplman]

Димыч, лайк за работу и подачу, а за starcraft broodwar рабочем столе - мега респект! ))

[@ITKAMASUTRA]

😊✊

[@apa6368]

Вижу новый урок-ставлю лайк

[@ITKAMASUTRA]

Спасибо 🙏

[@vyvaida]

Спасибо вам за труд.

[@user-gl8vn7ys4t]

Осилил, летим дальше!

[@MJstart]

Супер Димыч! Спасибо

[@marynakosiv3750]

дима ты тру ментор! было бы круто еще что бы ты рассказал так же про гит и работу с ним легко и доступно=))) лайк

[@user-dc6ih8rc7m]

Димыч спасибо за такой отличный материал. Хотелось бы подробнее узнать про redux-saga

[@blizzzzful]

Поддерживаю, нужен видос перевода всех Thunk на Saga

[@mylife-myart4916]

TypeScript перфекционистам зайдет =)Дмитрий, спасибо !

[@elizaarzanukaeva1825]

Spasibo tebe, DOBRY CHELOVEK!!!!!!!! 👍

[@4wesome_maks30]

Бомба ... Бомба , бомба , бомба :)

[@ollegat]

Привет... Привет, привет, привет)

[@user-wf8bu6mt2i]

Харош!

[@marina-ej4qd9kc1wh]

Все супер

[@denkodatskyi3381]

Тёмная тема =) 04 - Redux + TypeScript / React JS - Путь Самурая 2.0 Лучшие уроки по React JS !!! The BEST!!! lessons of React JS!!! Programming and Coding!!! Just simply about information technology =)

[@user-fe9uq7jh5h]

Лично я люблю ВСЕГДА темные темы, я и весь интерфейс всегда делаю темным, и только после уже добавляю белое в проект )))

[@user-dz3wr9vp6w]

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

[@JIuHaTuK32]

Тупо сразу лайк! Даже еще не смотрел

[@ITKAMASUTRA]

спасибо большое за поддержку

[@dimalukashenko4865]

Отличное видео

[@xtereone]

Димыч Красава!)

[@sokol666ov]

authReducer не типизирует возвращаемое значение потому что ты туда диструктуризируешь action.payload , который имеет тип any! any - это вообще очень скользкая дорожка, оно как снежный ком. Если ты один раз заюзал, сломалась типизация всего приложения. По этому я считаю, что как бы сильно у тебя жопа не горела ни в коем случае нельзя оставлять any

[@sandorkligan2208]

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

[@dimalukashenko4865]

Классное видео, лучше темная тема

[@genesismens9898]

Было полезно. Лайк

[@user-ey9mw8sx8t]

Если все подчеркивает красным, используй расширение файла *.tsx* вместо .ts (auth-reduser.tsx). п.с. Димыч ты лучший!

[@placid3495]

Я один раз звоню девушке и вместо "привет" говорю "конничива!", а она мне "что? кончила?", и тут я понял, что японский он только для самураев))

[@user-on9ul4zx6n]

Огонь!

[@vadimkurikin5269]

трек вначале огонь)

[@TheMalekula]

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

[@JavaScriptcher]

Коням Шаурма!!!😎💪🏽

[@alexanonymous5823]

крутой видос=)) спасибо=))

[@n0escape]

Ответ Димычу: везде где можно юзаю черную тему, для глаз комфортнее. Хотелось бы видео по 30 мин... Что касается дз. Посидел часик словил десяток разных ошибкок. Результат: установил ts в проект и откатил все изменения файлов до момента установки ts. З.ы. Возникла ошибка совместимости при инсталяции redux-form (Решение пока не найдено) З.ы. ошибки не решились благодаря димычу... Чат гпт помог. Вкратце про ошибки, их было две: устаревание какихто компонент их eslint ERROR in [eslint] [0] src edux\appReducer.ts [0] Line 0: Parsing error: DeprecationError: 'originalKeywordKind' has been deprecated since v5.0.0 and can no longer be used. Use 'identifierToKeywordKind(identifier)' instead ошибка импорта после изменения расширения файла ERROR in ./src/App.js 17:0-51 [0] Module not found: Error: Can't resolve './redux/appReducer' in 'E:\Projects\web eact\01-first-project\my-app-1\src' Решения: Первая ошибка решилась обновлением пакетов eslint и typescript до последних версий. Важно! По опыту скажу, что это опасная операция т.к проект может полететь в дальние края и вылетит не 2 а 10000 ошибок изза различия версий. Решение на свой страх и риск npm install --save typescript@latest @typescript-eslint/parser@latest Вторая ошибка решилась изменением импорта (добавление приписки .ts в конце) import appReducer from "./appReducer.ts";

[@n0escape]

По поводу урока. Кратко. Санки не типизируем. Типизируем объекты и функции (частично): чтобы типизировать передаваемые параметры то просто указываем тип в скобках там же. Чтобы зафиксировать возвращаемое значение (не всегда нужно, но нужно в случае reducer), нужно после скобок поставить двоеточие и указать тип возвращаемого параметра: export type initialStateType = { initialized: boolean }; let initialState: initialStateType = { initialized: false }; const appReducer = (state = initialState, action: any): initialStateType => { ... } Экшны типизируем как объекты: указываем тип во внешнем коде (тип берем как typeof от соответствующей константы), и после присоединяем к экшн креатору как к возвращаемому значению функции: type initializingSuccessedActionType = { type: typeof INITIALIZING_SUCCESSED } //action creators export const initializingSuccessed = (): initializingSuccessedActionType => ( { type: INITIALIZING_SUCCESSED })

[@olgamazurenko8142]

Хотелось бы углубленный оффлайн по typescript :-)

[@dimakalinichenko4913]

Красава!!! спасибо за уроки! У меня такая же проблема возникла в одном ридюсере не работала типизация, как у тебя в этом уроке. Но может глюк из за конструкции switch(case). Потому что если делаешь изменения state у default в switch(case) то там все работает.Хотя может быть это только у меня так)))

[@jses8560]

Лучший!

[@randomizer3589]

за черную тему отдельное спасибо !!!

[@user-bl4dl9ke7b]

Спасибо!

[@user-tr8hr4xm1l]

Спасибо за темный фон редактора кода! Redux + TypeScript

[@sqpine]

Друг посоветовал проходить Пусть Самурая 1.0 используя Type Script, сначала я против был, но сейчас сижу, просто проверяю)

[@VladislavAxt]

летим дальше!

[@lubomirkavetskiy9248]

Thanks a lot, man

[@Al4ii]

Спасибо!!!

[@alekseyborkovsky9456]

Черная тема круче у себя в среде разработки, но если смотреть на видео, то лучше белая. Элементарно лучше видно

[@user-en8fd9ut5q]

темная тема лучше, спасибо за уроки

[@michelealeer]

just thank you)

[@stigmatixmaloy5395]

Темная тема)

[@radimbig]

мне норм такие длинные видео, не вижу ничего плохого!

[@ivanmisnik3885]

спасибо за видео а еще выделить слово можно комбинацией Ctrl+W

[@stepanpetei2405]

Ты чево наделал?🤣

[@stigmatixmaloy5395]

Спасибо

[@viktorshcheplyagin9576]

Перешел с redux-form на formik - пока всем доволен) Какие выделил преимущества: 1. Проще документация, на мой взгляд (меньше текста) => проще освоить 2. !!! Проще работать с TS !!! 3. Легковеснее (если верить тому что написано в доке) , чем redux-form

[@Al4ii]

спасибо!!

[@viktorshcheplyagin9576]

31:15 - может можно разбить один выпуск на части? Помню, ты так сделал в 1-ом плейлисте, когда объяснял про санки)

[@messivatague]

Ты лучший

[@riclud4772]

Хотелось бы услышать твое мнение про Preact

[@Vllad_Ko]

тема темная лучше и "исчо" )) сделай, плзз, шрифт побольше, а то когда ты купил новый бук шрифт не увеличиваешь, видать экран на новом буке огромный ))) За курс большое Спасибо!!

[@jmksm]

Темная топ)

[@ROXYC585]

Белая тема;))