Продвинутый Redux. Redux Toolkit, RTK query, TypeScript.
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- В этом ролике мы на более продвинутом уровне рассмотрим связку React Redux. Будем использовать Redux toolkit & TypeScript & RTK query
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Исходный код тут - t.me/ulbi_tv/34
Плейлист по Redux - • Redux
Redux Toolkit - • Redux Toolkit
Таймкоды:
00:00 ➝ Введение.
00:55 ➝ Начало разработки. Конфигурация store.
03:40 ➝ Кастомные хуки для redux.
05:00 ➝ Redux toolkit slice.
13:00 ➝ Обработка стандартного сценария.
20:00 ➝ Начало работы с RTK query. Запросы на получение данных (query)
33:00 ➝ json-server.
34:05 ➝ Мутации.
42:30 ➝ Итоги, лайки, комментарии!)
Мой канал в telegram и канал для общения подписчиков - t.me/ulbi_tv
Поддержать меня и мой канал вы можете по ссылкам ниже.
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469 - วิทยาศาสตร์และเทคโนโลยี
![[4K] BABYMONSTER(베이비몬스터) “FOREVER” Band LIVE Concert “영원히” 베몬만을 사랑하게 되…💗 [it’s KPOP LIVE 잇츠라이브]](http://i.ytimg.com/vi/TQfC0xdpiw4/mqdefault.jpg)
![[페이스캠4K] 베이비몬스터 치키타 'FOREVER' (BABYMONSTER CHIQUITA FaceCam) @SBS Inkigayo 240707](http://i.ytimg.com/vi/x9VRNTV4VDI/mqdefault.jpg)
Друг, спасибо тебе. Уже вроде писала комент, но это видео - моя библия по rtk. когда только начинала учить - заходила смотреть, повторила, попробовала сама сделать, записала, но ничего не поняла) и вот я уже джун разработчик, которого озадачили переписать на rtk. посмотрела это видео еще раз и достигла просветления. дай бог тебе здоровья и много денег.
Отлично! Очень рад, что в своё время наткнулся на твой канал. Огромный пласт полезной информации.
Спасибо огромное за содержательное видео! Без воды, всё по делу! И такими порциями, которые можно усваивать!
Тимур, большое спасибо, очень ждал.
Обязательно завтра утром просмотрю!
Тимур, хоть я работаю с React достаточно давно, но ты мне открыл глаза на некоторые моменты в работе с toolKit. Спасибо тебе! Я думаю, что ты очень многим помог своими видео. Продолжай в том же духе и миллион тебе подписчиков! P.S. Я позаимствовал у тебя некоторые идеи касательно файловой структуры. Она очень продумана!
Отлично!
Кратко, информативно и по делу.
Спасибо.
Спасибо за урок. Очень полезная информация в сжатом виде с примерами без монотонного изучения документации библиотеки.
Огромное спасибо! Redux toolkit TypeScript RTK query
Как всегда, Тимур на высоте!
Максимально качественный контент в сжатые тайминги.
Уважуха и респект тебе))
Спасибо огромное за такие видео! Крайне полезно в обучении и работе. Ну и подача как всегда шикарная 🙏
Спасибо Вам большое Тимур за ваш труд.
Просто нет слов. Браво!!!
Как всегда великолепный ролик! Redux Toolkit разобран очень подробно. Спасибо ))
Спасибо огромное за видео!!! Все сжато и по делу, никакой воды. Столько качественного контента нигде не еще не видел.
Спасибо, отлично разложено про redux-toolkit и rtk query, как раз то чего мне не хватало для четкого понимания как его использовать
Поставил сразу лайк, как только в рекомендациях увидел свежий видос! Не сомневаюсь, что там топ, но просмотр оставил на вечер )
Очень ёмко и целостно рассказал о Redux Toolkit и RTK query! Спасибо большое, Тимур!)
я просто не знаю, как тебя отблагодарить, мне как раз нужен был такой видос!!! ты меня сильно выручил, ОГРОМНОЕ ТЕБЕ СПАСИБО
Спасибо за Огромную проделанную работу
УАУ! Тимур, спасибо большое за видос!!! Предчувствую, что ближайший час будет просто мега крутой !!!!!!!
Тимур самый лучший сэнсей учител
Великолепный и очень крутой урок
Как всегда все четко и ясно. Спасибо за труд.
Очень хороший урок. Узнал много нового. Спасибо!)
единственный сэнсэй, которого я смотрю не на 1.5, а на 0.75)
лол, я всех смотрю на 1.75, а его на 1.5 ))
жиза ++++
Я смотрю его на скорости 2 и мой мозг работает на 200%
@@neys4171 воу
1.25
сильный ролик! Спасибо за информацию, буду использовать redux toolkit
Лайк заочно!
Вот и цель на вечер.
Спасибо тебе, мой друг!
Да, мощный урок, узнал очень много нового. Твои уроки постоянно подогревают интерес, это круто!
Очень качественно объяснил все, отличное видео, спасибо)
Офигенный редкий контент! Спасибо за разбор актуальных технологий!
Спасибо, Тимур. После каждого твоего видео начинаю переписывать свой проект =)
Невероятный труд, вы лучший
Лайк не глядя. Я ждал это видео. Спасибо!
недавно неделю убил на то, чтобы разобраться конкретно в такой же связке)
контент как всегда топ!
Тимур! Огромное спасибо тебе за мега качественный контент. redux, Redux toolkit & TypeScript & RTK query.
Спасибо за полезный материал в доступном виде!
Сразу лайк и коммент! Шикарный контент! Спасибо
Тимур, спасибо за мегакачественный контент! Вы просто талант! Так понятно объяснять сложные вещи могут единицы, мне кажется.
Спасибо за отличный урок!
Спасибо за хороший материал. Искала информацию по работе со стором с использованием toolKit, но столкнулась с информацией по RTK query, оказалась очень полезной
Тимур, ты как всегда огонь - кратко, по делу и без воды.
Спасибо.
Спасибо, было очень полезно, буду использовать Квери!
очень годная инфа, спасибо тебе большое за такую теорию, за наглядный пример на практике и за старание конечно). Благодаря тебе, люди узнают много полезной информации
Спасибо, как раз хотел что-нибудь по редаксу посмотреть!
Спасибо большое за подробное пособие по технологии, успехов Вам в работе!)
Отличный мини-курс!
Боже, дядь, хватит пилить такое количество качественного контента, им можно просто брать и обмазываться) P.S Очень ждем полный и обновленный курс по NextJs. Для идеи - продвинутый таск менеджер)
Спасибо за видео, полезный и нужный урок, постоянно слежу за вашей страничкой
Еще не смотрел, сначала посмотрю твой ролик по тайпскрипту, потом вернусь сюда!
Уверен, ролик отличный, лайк авансом)
Лайк не глядя. Давно ждал такой стек.
Очень хорошие уроки, большое спасибо! Насколько сильно влияет речь на восприятие материала, супер!
Еееее! Мои просьбы были услышенны)) сколько я оставил комментов автору чтобы он запилил про тулкит видос!!
Приятно когда тебя слышат!
Отлично!!!! Дождался)))) Спасибо!
Респект и благодарность.
Супер информативно и понятно. Порой слишком быстро, но думаю намного лучше отмотать назад, чем слушать нудятину. Спасибо огромное.
Топ, впрочем, как и всегда, спасибо огромное 🤙
ООООчень крутой и полезный урок! Спасибо!
Я еще смотрел , но уже палец вверх поставил
Спасибо 🙆♂️ уверен материал супер 👍
Привет!)
Классный ролик, спасибо!)
Очень понравилась часть про RTK Query, я сам ее почему-то обделил вниманием, когда знакомился с тулкитом, теперь буду нагонять!)
Успехов в развитии и продвижении канала!)
Полезнее контента чем это э не смотрю в ютубе. Большое спасибо!
Redux понял только благодаря твоим видосам и уже полгода активно использую его на проекте, теперь посмотрю в сторону toolkit
Спасибо за ликбез (React Redux Toolkit RTK query TypeScript)
Тимур, ты лучший, спасибо, когда есть время что-то выучить или повторить новое, не задумываясь включаю твои ролики)
Замечательный ролик! Спасибо за четкое и понятное изложение материала
Очень круто, спасибо большое))
Очень мощно, спасибо!
Это просто сказка какая-то! Благодарю!
Спасибо за видос, ты один из лучших кто пилит хороший контент!
Просто пушечная технология! Спасибо огромное!)
Спасибо! Очень годный контент!
Круто, молодец RTK Query очень понятно рассказал. Нравится стиль твоего изложения. Без воды, коротко, по сути. Продолжай.
Запили видос по Material UI или StoryBook плиз
RTK query конечно мощная штука. Спасибо!
Четко, ясно.) Спасибо!
Большое спасибо за курсы, лучший контент для начинающих )
Спасибо !!! Очень крутой коонтенттт
вот что-что, а этот видос я точно ждал)
Большое спасибо за качественньій материал!
Е-е-е Redux, Redux Toolkit! Топ!
Потрясающий ролик, большое спасибо, перед выполнением тестового проекта - самое то)
Спасибо за очередное полезное видео
Спасибо, полезное видео, чтобы быстро обновить хорошо забытые знания и кое-что узнать нового)
Спасибо тебе большое за твой огромный труд. Маловато просмотров для такого видео
контент отнюдь не для новичков
Кайф. Спасибо за видос !! Как раз вчера решил РТК вместо обычного редакса в проект вкатить
Очень понятно обьясняешь, спасибо за видео, проолжай в том же духе)
Спасибо большое за подробное объяснение, благодаря Вам начинаю понимать redux ❤❤❤
Твоё видео как всегда лучшее!!!Сейчас на работе RTK используем, благодаря тебе получилось изучить максимально быстро.
в 2 версії видалять extraReducers "map object" notation, тепер треба білдер використовувати.
extraReducers: builder => {
builder
.addCase(fetchUsers.pending, (state, action) => {
})
.addCase(fetchUsers.fulfilled, (state, action) => {
})
.addCase(fetchUsers.rejected, (state, action) => {
state.isLoading = false;
state.error = action.error?.message || 'Error 404'
})
}
Топовый материал чтобы максимально быстро познакомиться с RTK query, премного благодарен 😌
Для тех, у кого возникает ошибка с типизацией "e" в try...catch (e) {...} (15:14):
У ошибок в TS по умолчанию тип unknown, она может быть чем угодно (грубо говоря, мы можем сделать throw new Promise(() => {}) и это будем ошибка с типом Promise или, аналогично, throw 7 и это будет ошибка с типом number).
Для того, чтобы избежать проблем с типизацией и крашей в рантайме я рекомендую использовать следующую функцию для получения message из error:
function getErrorMessage(error: unknown) {
if (error instanceof Error) return error.message
return String(error)
}
Далее делаем следующее:
try {
// логика
} catch (e) {
dispatch(userSlice.actions.usersFetchingError(getErrorMessage(e)))
}
Можно просто выполнить приведение типов:
dispatch(userSlice.actions.usersFetchingError((e as Error).message))
@@soulbringer6521 я описал в начале комментария, что ошибка не всегда может быть типа Error и иметь поле message. Обычно, конечно, это так, но если произойдет что-то непредвиденное - приложение сломается. Лучше сразу привыкать к best practice, а не рефлекторному применению any и as
@@kr4chinin771 Полностью согласен. Был невнимателен.
Спасибо)
Потратил больше часа, поэому пожалуй оставлю
try {
// логика
} catch (e) {
return thunkAPI.rejectWithValue("Ошибка загрузки пользователей");
}
_______
...
.addCase(fetchUsers.rejected, (state, action) => {
state.isLoading = false;
if (typeof action.payload === 'string') {
state.error = action.payload;
} else {
state.error = "Неизвестная ошибка";
}
});
Какая лютая тема этот rtk query, обяхательно нужно будет переписать под него проект :D
Комент в поддержку канала! p.s. Спасибо.
Автор молодец. Очень качественный материал
И снова ты лучший.
Поздравляю, Тима!!!!! 50к подписчиков!!!👌🎊🎉👍
как всегда прекрасный материал и подача, спасибо)
Это просто кладязь мудрости!
Шоооооооооооооооооок! Как это легко, какая синхронизация, сколько возможностей!
Тимур, спасибо огромное за твою работу!!!!
Тимурыч, от души))
Я был одним из тех, кто просил это видео: Redux Toolkit Advanced Edition 😁
вижу улби тв - ставлю лайк
Спасибо за чудесный контент!
сам пишу на ангуляре, отсюда понимаю некоторые концепции, и это видео идеально для меня т.к в одном видео затронуто сразу 2 важные вещи, которые я не знал как реализовать в реакт - управление состоянием и работа с апи, спасибо больше, вы сэкономили мне много времени )