RTK Query или альтернативный Redux по работе с API

Новая фича от создателей 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]

Этот коментарий создан в качестве уважения автору и для продвижения его канала.

[@mishanep]

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

[@max_mrtnv]

Самое потрясающее и понятное объяснение RTK Query! Такое видео должно быть в официальной документации!

[@neodinok-it3ym]

Самые адекватные уроки на ютубе. Без воды, все четко понятно человеческим языком

[@larss2772]

Огромная благодарность за урок, всё понятно и доступно. Считаю Вас одним из лучших авторов по программированию и web разработке в целом. Да прибудет с вами сила))

[@user-qc1cn4dl8q]

Максимально доступно, понятно и интересно. Спасибо, Михаил!!!

[@mikhail-khoroshev]

Вау! Хорош! И структура информации и подача мне нравится! Однозначно подписка!

[@konglomora3230]

Респект за усилия с которыми Вы доносите материал!

[@user-jz7pn6cd2q]

Спасибо за урок, доступный, понятный материал за короткое время, хорошая работа 💪💪💪👍👍👍

[@xkochevnikx.]

Михаил большое спасибо за Ваши труды, как всегда вовремя) приобрел 4 Ваших курса на степике)

[@JIKAIII]

Достаточно детально и ёмко изложено, очень легко вникать. Большое спасибо!

[@serjdenisov2114]

Спасибо, Михаил за понятное объяснение!!! Классная вещь!!!

[@ufuf731]

Прекраснейшее объяснения, низкий поклон! Подписка

[@serg9888]

Михаил, спасибо за видео. Для меня это уже ваше третье по счету про RTK. Кратко, но достаточно, чтобы зацепиться. А дальше уже намного легче с официальными гайдами разбираться. Отличная подача материала!

[@yodgor585]

Просто по божески объяснил! Моё величайшее почтение

[@unlimitedgames8357]

Насколько же вы шикарно преподносите информацию❤

[@romankrytski8687]

Спасибо большое за урок! У тебя отлично получается объяснять не самые лёгкие вещи, не самым продвинутым юзерам)

[@romanchenko8048]

объясняете просто супер! все четко и понятно, спасибо!

[@anatoliyrotskin5088]

Мишаня, ты прекрасно подаешь информацию, продолжай дальше просвещать нас!

[@mestacey8120]

Честное слово, это самое вменяемое объяснение данной темы! Огромнейшее спасибо!

[@I248]

я присоединясь к множеству одобрильных отзывов, браво!

[@user-iy1kh9bz2n]

Михаил, спасибо за видосы. всё супер с одним но. на сегодняшний день практически все проекты стартую на TS'е. а типизация всего этого добра это ещё один видос на столько же времени

[@user-yj4wt8nr6v]

Очень круто объяснил, спасибо!

[@HaveFun77777]

Спасибо вам, как раз с РТК работаю, буду внедрять!

[@user-eq3ph4qc9g]

Респект за уроки, одни из самых лучших на ютубе

[@krlkonstantine]

очень классный и понятный урок, большое спасибо!

[@user-xk2yp5nq6x]

Самое понятное и краткое объяснение. Обожаю автора, все нравится, от тембра голоса до логики объяснения, супер!

[@user-vp3je6jj8p]

спасибо, большое! объяснение на высшем уровне! желаю вам крепкого здоровье!

[@ylcsl4378]

Очень хорошо объясняешь, очень нужные вещи, спасибо

[@aliicomua1369]

Спасибо. Очень подробно и главное все понятно.

[@blgarOk]

И правда, RTK Query - крутейший инструмент! Спасибо за разжеванное объяснение!

[@fira1308]

Очень доходчиво объяснено!!!Спасибо!!!

[@sour5786]

Михаил спасибо большое за видео, я очень жду больше информации о rtk query (например как сделать перехватчики как в axios, про middleware) да и в принципе я думаю лучше сразу с typescript показывать примеры

[@konstantinzhirnov3013]

Спасибо за Вашу работу.

[@leshiq4214]

Отличные гайды! Спасибо!

[@bentonfraizer69]

Михаил, спасибо за труд

[@mukanidrissov5487]

Большое спасибо за отличное объяснение такой непростой вещи

[@gritsienkooleg3447]

Блин, как же это круто! Спасибо огромное! ОХх... )

[@user-eh6yu6wh9f]

супер объяснение, благодарю!!!

[@andreykachur3827]

Хорошее объяснение! Понял! Спасибо!

[@user-mp6zm2nk6m]

Большое спасибо за видео!

[@denistrapeschonok471]

Спасибо большое. Круто!

[@artedza]

Спасибо за видео!

[@nursultanyerzhan4432]

Как раз думал по этой проблеме, я фуллстэк разраб. Думал как связывать бд и редакс. Контент простой для понятия, автору большой респект ❤❤❤

[@user-ml4gu3sl5l]

очень крутой инструмент и очень понятно рассказан. очень хотелось бы подробно изучить все возможности RTK Query.

[@beznamea9549]

Крутой видос, спасибо!

[@user-jo6ug2hj1e]

Супер! Спасибо😀

[@frontendonly]

i'm not understand your language but understand the whole video it's too simple and amazing.thanks for sharing

[@aominka3767]

спасибо большое)больше про редакс тулкит, очень полезные знания

[@kostyakirieri7141]

Очень круто и актуально, то что нужно было!!! еще бы с TS и тогда полный кайф был бы)

[@awenn2015]

Эм, какой смысл сейчас вообще без ts делать ? Сейчас все начинают на ts делать , видео какое то неполное получаеться

[@SlouMan]

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

[@SabilasSalam]

Крутой вы, лайкнул, спасибо вам, желаю успехов!

[@user-yn5sq1fd5e]

раньше признавал только ulbi) Теперь + к нему еще и Миша) лайк оставил, комен оставил, видео лот корки до корки посмотрел) спасибо большое!

[@hpcforum]

Спасибо. Хорошее видео.

[@kkambucha]

Класс! Суперкруто!

[@el_marca4987]

Больше всего нравится такой стиль изложения. Ulbi tv тоже годные видосы снимает, но очень быстро все показывает и частенько приходится нажимать на паузу, чтобы понять что вообще происходит, а в твоих видео, пока ты печатаешь уже можно смысл уловить.

[@maxkurylo]

кэширование, работающее из коробки, и запрос на получение всех данных при каждом удалении или добавлении выглядят очень стремно) Но, скорее всего, это все настраивается. Спасибо большое за видео!

[@REDH3ADd]

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

[@CyberDanilka]

@@REDH3ADd согласен, когда суть библиотеки это перенос состояния на бэк такой коммент выглядит как минимум забавно)

[@oleksiihmyrko7969]

Очень крутая штука!!! Только закончил пет проджект с этой фичей ! Спасибо актуальный контент!

[@user-pp7cp6ix1z]

Спасибо 👍🏿

[@user-gn7bh1rx6o]

Спасибо!!!

[@Sweet-Bubaleh]

Кааааайф! Спасибо!

[@deadme8039]

nice one,keep doing that!

[@dr.livesey5157]

Самое лучшее объяснение из всех!

[@user-bj3gc6xs9p]

Просто невероятно! Очень прошу вас на основе этого видно сделать бесконечную загрузку данных при скроле. На самом деле проблема не маленькая а решения на нее не так просто и найти адекватного именно с RTK query. Был бы очень благодарен.

[@azamatzhamakeev670]

Man you are the best!

[@user-dp1ke7bx7c]

Спасибо 👍🏻, после zustand начал понимать работу Redux, а дальше Redux toolkit там и до крольече норы можно дайте.

[@maximbagrayntsev5154]

Круто!!!

[@saramaz4l]

Спасибо!

[@ilaymorozoff4113]

Михаил, спасибо!! Пушка, огонь, пожар!

[@kenanhaciyev3759]

если что то сейчас достаточно в get-запрос написать: providesTags: ['Products'] а в post-запрос: invalidatesTags: ['Products'] - спасибо за уроки - максимально понятно

[@user-ms7bq1rn6u]

Огромное спасибо🥰 Теперь у меня заработало автообнобление

[@ssurrokk]

очень круто рассказываешь 👍

[@mivalb7979]

Спасибо, Михаил!

[@Goddamn_Right]

15:15 При использовании доп. параметров в endpoint'е лучше написать: "query: {limit = ""} => ({url: 'goods', params: {_limit: limit, и все остальные нужные параметры, если есть, тоже сюда, как ключ: значение}})". Это не только правильно с точки зрения RTK, но и делает код более читаемым 😉

[@rustam_gasymov]

Очень круто!! Спасибо за такую качественную работу!!!Можно попросить сделать видосик связки rtk querry и websocket?

[@mishanep]

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

[@user-wr4br7sr9q]

Капец как удобно! Правда придётся многое переписывать))

[@kawaikaino5277]

Все прячется под капот, иногда мне кажется что это является проблемой

[@user-wr4br7sr9q]

@@kawaikaino5277 ты прав, но это очень удобно. Можно смотреть внутренности в документации, но и она меняется постоянно) так что один глаз в доку, а другой на код)

[@user-bl8jr7eb9d]

Ждём RTK Query TS)

[@kidsShow1998]

от души like

[@rustam6287]

крутоооооооооооооооооо))

[@druf5962]

на многих ютуб гайдах часто вместо с rtk query еще и axios фигачат. есть ли реальный смысл аксиос юзать или rtk query самодостаточен? спс за видос, один из лучших сенсеев на ютубе

[@johnconnor9787]

18:38 - Говоря об айди, недавно узнал, что в RTK еще есть nanoid() который тоже можно импортировать для создания ID

[@23LS023]

Все это очень круто, единственное, пожалуйста, переключись на dark mode ))

[@kyryloovsiannik7207]

пушка, спасибо!

[@AleksandrMaltsev-jm8ph]

🎉🎉🎉🎉 спасибо, подскажите как создать по SOLID, class который делает базовый крад, и от него можно отнаследоваться

[@user-yk9nj6co9d]

Гранд мерси. Что значит большое спасибо )

[@techno-tramp]

Привет. Присоединяюсь к поблагодарившим, в целом все четко, по полочкам, в удобно перевариваемой последовательности. Но хотелось бы уточнить, на 29:00 речь про то, что если кто-то в соседней комнате что-то удалит, то мы получим свежие данные. На сколько я понимаю, автоматом мы уже их не получим. RTK Query в нашем экземпляре приложения ничего не знает об операциях в чужом приложении.

[@railbatyrshin377]

Спасибо автору за ценную информацию. Подскажи пожалуйста, как мне создать и использовать хук для получения каких то товаров по slug. Slug берется из параметров url, то есть динамический. Я получаю этот параметр из url и как его пропихнуть в хук query? Желательно через useEffect, в котором будет привязка к slug, и внутри useEffect вызов для получения списка? Благодарю заранее, если конечно увидишь коммент)

[@ice_records]

Спасибо автору за весь контент очень понятно и информативно. Такой вопрос RTK Quary это замена или альтернатива Thunk? просто по функционалу в RTK Quary больше возможностей и упрощений под капотом и его (как я понял) лучше использовать в компонентах, а Thunk более настраеваемая вещь которая работает в сугубо в слайсах. Как я понял если все упростить то в случаи: RTK Quary сначала грузиться компонент => идет запрос на сервер => выполняется логика компонента => меняется стейт в сторе redux . Thunk Сначала делаеться запрос на сервер => меняеться стейт в сторе => грузиться компонент => Выполняеться логика компонента Буду рад если скоректируете моё понимание об этих 2х расширениях, так как пока не могу понять что нужно и в какие моменты использовать и как их между собой связывать и нужно ли? Зарание спасибо.

[@van_za]

Спасибо за видео!!! Как быть если нужно получить объект с сервера..., пользователь его редактирует и только потом делаем запрос на обновление, как в таком случае использовать RTK Query?

[@vana__f7570]

Большое спасибо за видео! Но почему много кода взято подкопирку их документации?

[@Amelin1207]

господи ты бог)

[@weynemeynen]

Михаил, покажи, пожалуйста, как RTK query может работать с GraphQL?

[@platonyasev1913]

Михаил, спасибо большое, отличное видео! А вы используете RTK-query на проде? Сейчас решаем с командой, что выбрать для нового проекта, где уже используется rtk - этот инструмент или react-query. Может быть, есть опыт работы с обеими библиотеками, что посоветуете?

[@mishanep]

Приветствую! С react-query пока не работал. В продакшн rtk в моей текущей компании не используется, но у нас по специфике проекта не так много редакса.

[@sergeym889]

Благодарю за гайд! Но у меня кое что не получается. Подскажите что делать, если в API с которым я работаю, в data ещё есть items, и только в нем находится массив объектов, который я хочу вывести?

[@rustam6287]

классный контент

[@true227]

Михаил, а какой метод получения данных через api предпочтительнее? CreateAsyncThunk или RTK Query?

[@user-bh2qf9qp4s]

Спасибо за полезный контент , скажите пожалуйста планируется ли подробный обзор redux saga ?

[@mishanep]

Не планирую. С saga работать не доводилось ни на одном проекте пока. Не уверен, что встречусь с ним))

[@alexvoid8717]

createListenerMiddleware - It's intended to be a lightweight alternative to more widely used Redux async middleware like sagas and observables. While similar to thunks in level of complexity and concept, it can be used to replicate some common saga usage patterns

[@user-hd3ov5lj1u]

очень круто! будет ли видео о createEntityAdapter, очень хотелось бы посмотреть

[@mishanep]

Приветствую, Евгений! Пока не планировал. Возможно в будущем рассмотрю такую опцию.

[@user-hd3ov5lj1u]

@@mishanep мне кажется многим будет полезно, на русском ютубе нету хорошего разьяснения на эту тему. спасибо, что ответили

[@user-cw4op6hd8i]

Очень доступно! А можно эти получаемые данные диспачить в стейт, определенный в каком-либо слайсе, и по необходимости использовать? Или хуки RTK Query сами являются таким хранилищем, которое можно подключать и использовать в нужных местах приложения?

[@tutnichegonet]

тоже интересно

[@user-im5rd5wc9g]

привет, узнал? что то у меня не получается диспатчить

[@fil1806]

Спасибо за видео. Будет ли что то по state в nextjs13+, и вообще имеет ли смысл это использовать в nextjs, или там есть другие методики?

[@mishanep]

У меня было видео про клиентские компоненты nextjs 13+ и там я немного затрагивал тему использования стейт-менеджеров. По сути, в текущем варианте вы можете использовать редакс, как и прежде. Но только в клиентских компонентах.

[@burialstance]

В конце была фраза про один источник истины, и все хранится на сервере. Я беккндщик и сейчас штурмую ртк. Хорошая практика в стейте хранить данные по пользователю?(Юзернейм, мыло итд) Вот у меня сейчас два эндпоинта, получение токена, и после кверифулфилда сразу диспатчится квери на получение пользователя через инитиате. Два эндпоинта через экстра подключены к своим слайсам. Можно ли назвать это оверхедом сохраняя пользователя в отдельном слайсе? Или пусть он в кеше хранится, а по необходимости/тайм-ауту инвалидировать его?

[@johnconnor9787]

АП что если у нас много Base Url? Создаем отдельный Slice?

[@vladimirmuratov2220]

Большое спасибо. Все просто и понятно. А про React Query расскажите? 😊

[@mishanep]

Со временем =)