RTK Query или альтернативный Redux по работе с API
Рет қаралды 95,327
Күн бұрынНовая фича от создателей Redux Toolkit - RTK Query позволяет удобно организовать работу с API, без необходимости дополнительно хранить данные на клиенте. Инструмент позволяет делать кэширование, автообновление и многое другое. В этом видео мы рассмотрим базовые кейсы использования RTK Query.
00:00 Основная идея
02:43 Настройка окружения
04:59 Базовый пример получения данных
14:34 Пример с кэшированием
17:58 Мутации - добавление данных
23:59 Автообновления после мутаций
27:37 Мутации - удаление данных
Стартовые файлы
github.com/michey85/rtk-query...
Код итогового приложения
github.com/michey85/rtk-query...
#redux
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep
@user-ky4vq5jm5u 2 жыл бұрын
Этот коментарий создан в качестве уважения автору и для продвижения его канала.
@mishanep 2 жыл бұрын
Этот ответ создан, чтобы поблагодарить автора комментария =)
@max_mrtnv 2 жыл бұрын
Самое потрясающее и понятное объяснение RTK Query! Такое видео должно быть в официальной документации!
@neodinok-it3ym 4 ай бұрын
Самые адекватные уроки на ютубе. Без воды, все четко понятно человеческим языком
@user-xk2yp5nq6x 3 ай бұрын
Самое понятное и краткое объяснение. Обожаю автора, все нравится, от тембра голоса до логики объяснения, супер!
@n3trnnr 14 күн бұрын
Михаил, спасибо вам за обучающие ролики! Всегда доступно и понятно!
@kostyakirieri7141 2 жыл бұрын
Очень круто и актуально, то что нужно было!!! еще бы с TS и тогда полный кайф был бы)
@awenn2015 2 жыл бұрын
Эм, какой смысл сейчас вообще без ts делать ? Сейчас все начинают на ts делать , видео какое то неполное получаеться
@SlouMan 2 жыл бұрын
в действительности, там всё легко типизируется. Пришлось бы dto описать, что заняло бы еще какое то время урока
@user-qc1cn4dl8q 2 жыл бұрын
Максимально доступно, понятно и интересно. Спасибо, Михаил!!!
@user-jz7pn6cd2q 2 жыл бұрын
Спасибо за урок, доступный, понятный материал за короткое время, хорошая работа 💪💪💪👍👍👍
@konglomora3230 2 жыл бұрын
Респект за усилия с которыми Вы доносите материал!
@serg9888 2 жыл бұрын
Михаил, спасибо за видео. Для меня это уже ваше третье по счету про RTK. Кратко, но достаточно, чтобы зацепиться. А дальше уже намного легче с официальными гайдами разбираться. Отличная подача материала!
@xkochevnikx. 9 ай бұрын
Михаил большое спасибо за Ваши труды, как всегда вовремя) приобрел 4 Ваших курса на степике)
@romankrytski8687 Жыл бұрын
Спасибо большое за урок! У тебя отлично получается объяснять не самые лёгкие вещи, не самым продвинутым юзерам)
@mikhail-khoroshev Жыл бұрын
Вау! Хорош! И структура информации и подача мне нравится! Однозначно подписка!
@mestacey8120 9 ай бұрын
Честное слово, это самое вменяемое объяснение данной темы! Огромнейшее спасибо!
@JIKAIII Жыл бұрын
Достаточно детально и ёмко изложено, очень легко вникать. Большое спасибо!
@unlimitedgames8357 10 ай бұрын
Насколько же вы шикарно преподносите информацию❤
@romanchenko8048 2 жыл бұрын
объясняете просто супер! все четко и понятно, спасибо!
@yodgor585 Жыл бұрын
Просто по божески объяснил! Моё величайшее почтение
@serjdenisov2114 Жыл бұрын
Спасибо, Михаил за понятное объяснение!!! Классная вещь!!!
@ufuf731 2 жыл бұрын
Прекраснейшее объяснения, низкий поклон! Подписка
@anatoliyrotskin5088 Жыл бұрын
Мишаня, ты прекрасно подаешь информацию, продолжай дальше просвещать нас!
@blgarOk Жыл бұрын
И правда, RTK Query - крутейший инструмент! Спасибо за разжеванное объяснение!
@larss2772 Ай бұрын
Огромная благодарность за урок, всё понятно и доступно. Считаю Вас одним из лучших авторов по программированию и web разработке в целом. Да прибудет с вами сила))
@user-eq3ph4qc9g 8 ай бұрын
Респект за уроки, одни из самых лучших на ютубе
@leshiq4214 2 жыл бұрын
Отличные гайды! Спасибо!
@igormalykhin5528 23 күн бұрын
Автору браво. Это самое понятное обьяснение ртк квери что я только видел в рунете.
@I248 Жыл бұрын
я присоединясь к множеству одобрильных отзывов, браво!
@user-vp3je6jj8p 7 ай бұрын
спасибо, большое! объяснение на высшем уровне! желаю вам крепкого здоровье!
@ylcsl4378 Жыл бұрын
Очень хорошо объясняешь, очень нужные вещи, спасибо
@user-yj4wt8nr6v Жыл бұрын
Очень круто объяснил, спасибо!
@sour5786 Жыл бұрын
Михаил спасибо большое за видео, я очень жду больше информации о rtk query (например как сделать перехватчики как в axios, про middleware) да и в принципе я думаю лучше сразу с typescript показывать примеры
@HaveFun77777 2 жыл бұрын
Спасибо вам, как раз с РТК работаю, буду внедрять!
@fira1308 Жыл бұрын
Очень доходчиво объяснено!!!Спасибо!!!
@krlkonstantine 9 ай бұрын
очень классный и понятный урок, большое спасибо!
@konstantinzhirnov3013 2 жыл бұрын
Спасибо за Вашу работу.
@aliicomua1369 10 ай бұрын
Спасибо. Очень подробно и главное все понятно.
@frontendonly 2 жыл бұрын
i'm not understand your language but understand the whole video it's too simple and amazing.thanks for sharing
@kenanhaciyev3759 10 ай бұрын
если что то сейчас достаточно в get-запрос написать: providesTags: ['Products'] а в post-запрос: invalidatesTags: ['Products'] - спасибо за уроки - максимально понятно
@user-ms7bq1rn6u 3 ай бұрын
Огромное спасибо🥰 Теперь у меня заработало автообнобление
@bentonfraizer69 4 ай бұрын
Михаил, спасибо за труд
@mukanidrissov5487 5 ай бұрын
Большое спасибо за отличное объяснение такой непростой вещи
@gritsienkooleg3447 Жыл бұрын
Блин, как же это круто! Спасибо огромное! ОХх... )
@user-eh6yu6wh9f 11 ай бұрын
супер объяснение, благодарю!!!
@user-ml4gu3sl5l 2 ай бұрын
очень крутой инструмент и очень понятно рассказан. очень хотелось бы подробно изучить все возможности RTK Query.
@user-yn5sq1fd5e Жыл бұрын
раньше признавал только ulbi) Теперь + к нему еще и Миша) лайк оставил, комен оставил, видео лот корки до корки посмотрел) спасибо большое!
@Goddamn_Right 8 ай бұрын
15:15 При использовании доп. параметров в endpoint'е лучше написать: "query: {limit = ""} => ({url: 'goods', params: {_limit: limit, и все остальные нужные параметры, если есть, тоже сюда, как ключ: значение}})". Это не только правильно с точки зрения RTK, но и делает код более читаемым 😉
@maxkurylo Жыл бұрын
кэширование, работающее из коробки, и запрос на получение всех данных при каждом удалении или добавлении выглядят очень стремно) Но, скорее всего, это все настраивается. Спасибо большое за видео!
@REDH3ADd Жыл бұрын
"и запрос на получение всех данных при каждом удалении или добавлении", а как подругому? изменив данные на сервере их сразу же и нужно подгрузить, чтобы у пользователя произошли изменения
@CyberDanilka Жыл бұрын
@@REDH3ADd согласен, когда суть библиотеки это перенос состояния на бэк такой коммент выглядит как минимум забавно)
@nursultanyerzhan4432 Жыл бұрын
Как раз думал по этой проблеме, я фуллстэк разраб. Думал как связывать бд и редакс. Контент простой для понятия, автору большой респект ❤❤❤
@andreykachur3827 6 ай бұрын
Хорошее объяснение! Понял! Спасибо!
@user-mp6zm2nk6m Жыл бұрын
Большое спасибо за видео!
@denistrapeschonok471 2 жыл бұрын
Спасибо большое. Круто!
@aominka3767 2 жыл бұрын
спасибо большое)больше про редакс тулкит, очень полезные знания
@user-jo6ug2hj1e Жыл бұрын
Супер! Спасибо😀
@artedza 2 жыл бұрын
Спасибо за видео!
@kkambucha 2 жыл бұрын
Класс! Суперкруто!
@beznamea9549 2 жыл бұрын
Крутой видос, спасибо!
@andretku 4 күн бұрын
Круто! сложное - простыми словами!
@SabilasSalam 4 ай бұрын
Крутой вы, лайкнул, спасибо вам, желаю успехов!
@hpcforum Жыл бұрын
Спасибо. Хорошее видео.
@oleksiihmyrko7969 2 жыл бұрын
Очень крутая штука!!! Только закончил пет проджект с этой фичей ! Спасибо актуальный контент!
@el_marca4987 Ай бұрын
Больше всего нравится такой стиль изложения. Ulbi tv тоже годные видосы снимает, но очень быстро все показывает и частенько приходится нажимать на паузу, чтобы понять что вообще происходит, а в твоих видео, пока ты печатаешь уже можно смысл уловить.
@user-bj3gc6xs9p Жыл бұрын
Просто невероятно! Очень прошу вас на основе этого видно сделать бесконечную загрузку данных при скроле. На самом деле проблема не маленькая а решения на нее не так просто и найти адекватного именно с RTK query. Был бы очень благодарен.
@maximbagrayntsev5154 Жыл бұрын
Круто!!!
@Quentinrei 19 күн бұрын
Этот комментарий создан в качестве уважения автору и для продвижения его канала.
@deadme8039 2 жыл бұрын
nice one,keep doing that!
@user-dp1ke7bx7c Жыл бұрын
Спасибо 👍🏻, после zustand начал понимать работу Redux, а дальше Redux toolkit там и до крольече норы можно дайте.
@user-pp7cp6ix1z 2 жыл бұрын
Спасибо 👍🏿
@azamatzhamakeev670 2 жыл бұрын
Man you are the best!
@saramaz4l 2 жыл бұрын
Спасибо!
@user-gn7bh1rx6o 10 ай бұрын
Спасибо!!!
@Sweet-Bubaleh 7 ай бұрын
Кааааайф! Спасибо!
@dr.livesey5157 Жыл бұрын
Самое лучшее объяснение из всех!
@rustam_gasymov 2 жыл бұрын
Очень круто!! Спасибо за такую качественную работу!!!Можно попросить сделать видосик связки rtk querry и websocket?
@mishanep 2 жыл бұрын
Спасибо за обратную связь. По websocket пока не планирую. Просто потому, что серьёзно с ним не работал. Возможно на одном из проектов по работе он пригодится, тогда будет пища для видео. Сейчас квалификации не хватит.
@ssurrokk 2 жыл бұрын
очень круто рассказываешь 👍
@ilaymorozoff4113 2 жыл бұрын
Михаил, спасибо!! Пушка, огонь, пожар!
@user-wr4br7sr9q Жыл бұрын
Капец как удобно! Правда придётся многое переписывать))
@kawaikaino5277 Жыл бұрын
Все прячется под капот, иногда мне кажется что это является проблемой
@user-wr4br7sr9q Жыл бұрын
@@kawaikaino5277 ты прав, но это очень удобно. Можно смотреть внутренности в документации, но и она меняется постоянно) так что один глаз в доку, а другой на код)
@kidsShow1998 Жыл бұрын
от души like
@23LS023 9 ай бұрын
Все это очень круто, единственное, пожалуйста, переключись на dark mode ))
@vladislavbogdashev1803 2 ай бұрын
26:13 это всё, что нужно знать про RTK Query "Мы сделали для вас новый крутой инструмент, который позволяет писать меньше кода, но выучите миллион новых синтаксисов под каждый конкретный случай". Это всё конечно здорово звучит, но ровно до тех пор, пока у вас простой CRUD, а не большое сложное приложение, где вы можете в респонсе синхронизировать много данных. На мой сугубо личный взгляд, связка redux-toolkit + классическая redux-saga + axios - это лучшая сборка для вашего проекта.
@rustam6287 2 жыл бұрын
крутоооооооооооооооооо))
@mivalb7979 2 жыл бұрын
Спасибо, Михаил!
@techno-tramp Жыл бұрын
Привет. Присоединяюсь к поблагодарившим, в целом все четко, по полочкам, в удобно перевариваемой последовательности. Но хотелось бы уточнить, на 29:00 речь про то, что если кто-то в соседней комнате что-то удалит, то мы получим свежие данные. На сколько я понимаю, автоматом мы уже их не получим. RTK Query в нашем экземпляре приложения ничего не знает об операциях в чужом приложении.
@user-bl8jr7eb9d 2 жыл бұрын
Ждём RTK Query TS)
@user-yk9nj6co9d 5 ай бұрын
Гранд мерси. Что значит большое спасибо )
@druf5962 Жыл бұрын
на многих ютуб гайдах часто вместо с rtk query еще и axios фигачат. есть ли реальный смысл аксиос юзать или rtk query самодостаточен? спс за видос, один из лучших сенсеев на ютубе
@Amelin1207 Жыл бұрын
господи ты бог)
@johnconnor9787 Жыл бұрын
18:38 - Говоря об айди, недавно узнал, что в RTK еще есть nanoid() который тоже можно импортировать для создания ID
@ice_records 7 ай бұрын
Спасибо автору за весь контент очень понятно и информативно. Такой вопрос RTK Quary это замена или альтернатива Thunk? просто по функционалу в RTK Quary больше возможностей и упрощений под капотом и его (как я понял) лучше использовать в компонентах, а Thunk более настраеваемая вещь которая работает в сугубо в слайсах. Как я понял если все упростить то в случаи: RTK Quary сначала грузиться компонент => идет запрос на сервер => выполняется логика компонента => меняется стейт в сторе redux . Thunk Сначала делаеться запрос на сервер => меняеться стейт в сторе => грузиться компонент => Выполняеться логика компонента Буду рад если скоректируете моё понимание об этих 2х расширениях, так как пока не могу понять что нужно и в какие моменты использовать и как их между собой связывать и нужно ли? Зарание спасибо.
@kyryloovsiannik7207 2 жыл бұрын
пушка, спасибо!
@van_za 2 жыл бұрын
Спасибо за видео!!! Как быть если нужно получить объект с сервера..., пользователь его редактирует и только потом делаем запрос на обновление, как в таком случае использовать RTK Query?
@rustam6287 2 жыл бұрын
классный контент
@vladimirmuratov2220 Жыл бұрын
Большое спасибо. Все просто и понятно. А про React Query расскажите? 😊
@mishanep Жыл бұрын
Со временем =)
@platonyasev1913 2 жыл бұрын
Михаил, спасибо большое, отличное видео! А вы используете RTK-query на проде? Сейчас решаем с командой, что выбрать для нового проекта, где уже используется rtk - этот инструмент или react-query. Может быть, есть опыт работы с обеими библиотеками, что посоветуете?
@mishanep 2 жыл бұрын
Приветствую! С react-query пока не работал. В продакшн rtk в моей текущей компании не используется, но у нас по специфике проекта не так много редакса.
@pandalove6795 Жыл бұрын
Не уверен, что после удаления или добавления объекта прямо настолько круто делать еще запрос на получение всех продуктов. Если объектов много, то они постоянно будут запрашиваться. Или это не так работает?
@user-hd3ov5lj1u 2 жыл бұрын
очень круто! будет ли видео о createEntityAdapter, очень хотелось бы посмотреть
@mishanep 2 жыл бұрын
Приветствую, Евгений! Пока не планировал. Возможно в будущем рассмотрю такую опцию.
@user-hd3ov5lj1u 2 жыл бұрын
@@mishanep мне кажется многим будет полезно, на русском ютубе нету хорошего разьяснения на эту тему. спасибо, что ответили
@vana__f7570 2 жыл бұрын
Большое спасибо за видео! Но почему много кода взято подкопирку их документации?
@sergeym889 2 жыл бұрын
Благодарю за гайд! Но у меня кое что не получается. Подскажите что делать, если в API с которым я работаю, в data ещё есть items, и только в нем находится массив объектов, который я хочу вывести?
@sivkaburka1062 2 жыл бұрын
Досмотрел до 21:02
@true227 3 ай бұрын
Михаил, а какой метод получения данных через api предпочтительнее? CreateAsyncThunk или RTK Query?
@user-cw4op6hd8i 2 жыл бұрын
Очень доступно! А можно эти получаемые данные диспачить в стейт, определенный в каком-либо слайсе, и по необходимости использовать? Или хуки RTK Query сами являются таким хранилищем, которое можно подключать и использовать в нужных местах приложения?
@tutnichegonet Жыл бұрын
тоже интересно
@user-im5rd5wc9g 4 ай бұрын
привет, узнал? что то у меня не получается диспатчить
@railbatyrshin377 9 ай бұрын
Спасибо автору за ценную информацию. Подскажи пожалуйста, как мне создать и использовать хук для получения каких то товаров по slug. Slug берется из параметров url, то есть динамический. Я получаю этот параметр из url и как его пропихнуть в хук query? Желательно через useEffect, в котором будет привязка к slug, и внутри useEffect вызов для получения списка? Благодарю заранее, если конечно увидишь коммент)