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

Пікірлер: 213

  • @user-ky4vq5jm5u
    @user-ky4vq5jm5u2 жыл бұрын

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

  • @mishanep

    @mishanep

    2 жыл бұрын

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

  • @max_mrtnv
    @max_mrtnv2 жыл бұрын

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

  • @neodinok-it3ym
    @neodinok-it3ym3 ай бұрын

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

  • @konglomora3230
    @konglomora32302 жыл бұрын

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

  • @user-qc1cn4dl8q
    @user-qc1cn4dl8q2 жыл бұрын

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

  • @kostyakirieri7141
    @kostyakirieri71412 жыл бұрын

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

  • @awenn2015

    @awenn2015

    2 жыл бұрын

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

  • @SlouMan

    @SlouMan

    2 жыл бұрын

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

  • @romanchenko8048
    @romanchenko80482 жыл бұрын

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

  • @user-jz7pn6cd2q
    @user-jz7pn6cd2q2 жыл бұрын

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

  • @serg9888
    @serg98882 жыл бұрын

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

  • @romankrytski8687
    @romankrytski8687 Жыл бұрын

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

  • @xkochevnikx.
    @xkochevnikx.8 ай бұрын

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

  • @frontendonly
    @frontendonly2 жыл бұрын

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

  • @yodgor585
    @yodgor585 Жыл бұрын

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

  • @mestacey8120
    @mestacey81208 ай бұрын

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

  • @mikhail-khoroshev
    @mikhail-khoroshev Жыл бұрын

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

  • @serjdenisov2114
    @serjdenisov2114 Жыл бұрын

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

  • @unlimitedgames8357
    @unlimitedgames83579 ай бұрын

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

  • @JIKAIII
    @JIKAIII11 ай бұрын

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

  • @ufuf731
    @ufuf7312 жыл бұрын

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

  • @ylcsl4378
    @ylcsl4378 Жыл бұрын

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

  • @user-iy1kh9bz2n
    @user-iy1kh9bz2n2 жыл бұрын

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

  • @user-yj4wt8nr6v
    @user-yj4wt8nr6v Жыл бұрын

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

  • @blgarOk
    @blgarOk Жыл бұрын

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

  • @leshiq4214
    @leshiq42142 жыл бұрын

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

  • @user-vp3je6jj8p
    @user-vp3je6jj8p6 ай бұрын

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

  • @user-xk2yp5nq6x
    @user-xk2yp5nq6x2 ай бұрын

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

  • @aliicomua1369
    @aliicomua13699 ай бұрын

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

  • @anatoliyrotskin5088
    @anatoliyrotskin508811 ай бұрын

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

  • @sour5786
    @sour5786 Жыл бұрын

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

  • @HaveFun77777
    @HaveFun777772 жыл бұрын

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

  • @larss2772
    @larss277227 күн бұрын

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

  • @user-eq3ph4qc9g
    @user-eq3ph4qc9g7 ай бұрын

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

  • @el_marca4987
    @el_marca498728 күн бұрын

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

  • @I248
    @I248 Жыл бұрын

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

  • @krlkonstantine
    @krlkonstantine9 ай бұрын

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

  • @mukanidrissov5487
    @mukanidrissov54874 ай бұрын

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

  • @fira1308
    @fira130811 ай бұрын

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

  • @konstantinzhirnov3013
    @konstantinzhirnov30132 жыл бұрын

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

  • @user-eh6yu6wh9f
    @user-eh6yu6wh9f10 ай бұрын

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

  • @user-ml4gu3sl5l
    @user-ml4gu3sl5lАй бұрын

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

  • @bentonfraizer69
    @bentonfraizer693 ай бұрын

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

  • @andreykachur3827
    @andreykachur38275 ай бұрын

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

  • @nursultanyerzhan4432
    @nursultanyerzhan4432 Жыл бұрын

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

  • @user-mp6zm2nk6m
    @user-mp6zm2nk6m Жыл бұрын

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

  • @SabilasSalam
    @SabilasSalam3 ай бұрын

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

  • @Goddamn_Right
    @Goddamn_Right7 ай бұрын

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

  • @gritsienkooleg3447
    @gritsienkooleg3447 Жыл бұрын

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

  • @denistrapeschonok471
    @denistrapeschonok4712 жыл бұрын

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

  • @kenanhaciyev3759
    @kenanhaciyev37599 ай бұрын

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

  • @user-ms7bq1rn6u

    @user-ms7bq1rn6u

    2 ай бұрын

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

  • @user-yn5sq1fd5e
    @user-yn5sq1fd5e11 ай бұрын

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

  • @maxkurylo
    @maxkurylo Жыл бұрын

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

  • @REDH3ADd

    @REDH3ADd

    Жыл бұрын

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

  • @CyberDanilka

    @CyberDanilka

    Жыл бұрын

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

  • @user-jo6ug2hj1e
    @user-jo6ug2hj1e Жыл бұрын

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

  • @artedza
    @artedza2 жыл бұрын

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

  • @beznamea9549
    @beznamea95492 жыл бұрын

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

  • @aominka3767
    @aominka37672 жыл бұрын

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

  • @hpcforum
    @hpcforum Жыл бұрын

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

  • @user-bj3gc6xs9p
    @user-bj3gc6xs9p Жыл бұрын

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

  • @kkambucha
    @kkambucha2 жыл бұрын

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

  • @druf5962
    @druf5962 Жыл бұрын

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

  • @user-dp1ke7bx7c
    @user-dp1ke7bx7c Жыл бұрын

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

  • @oleksiihmyrko7969
    @oleksiihmyrko79692 жыл бұрын

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

  • @maximbagrayntsev5154
    @maximbagrayntsev5154 Жыл бұрын

    Круто!!!

  • @user-pp7cp6ix1z
    @user-pp7cp6ix1z2 жыл бұрын

    Спасибо 👍🏿

  • @ice_records
    @ice_records6 ай бұрын

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

  • @dr.livesey5157
    @dr.livesey5157 Жыл бұрын

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

  • @user-gn7bh1rx6o
    @user-gn7bh1rx6o9 ай бұрын

    Спасибо!!!

  • @23LS023
    @23LS0238 ай бұрын

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

  • @van_za
    @van_za2 жыл бұрын

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

  • @Sweet-Bubaleh
    @Sweet-Bubaleh6 ай бұрын

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

  • @sergeym889
    @sergeym8892 жыл бұрын

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

  • @azamatzhamakeev670
    @azamatzhamakeev6702 жыл бұрын

    Man you are the best!

  • @saramaz4l
    @saramaz4l2 жыл бұрын

    Спасибо!

  • @platonyasev1913
    @platonyasev19132 жыл бұрын

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

  • @mishanep

    @mishanep

    2 жыл бұрын

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

  • @rustam_gasymov
    @rustam_gasymov2 жыл бұрын

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

  • @mishanep

    @mishanep

    2 жыл бұрын

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

  • @deadme8039
    @deadme80392 жыл бұрын

    nice one,keep doing that!

  • @true227
    @true2273 ай бұрын

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

  • @vana__f7570
    @vana__f75702 жыл бұрын

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

  • @ilaymorozoff4113
    @ilaymorozoff41132 жыл бұрын

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

  • @user-yk9nj6co9d
    @user-yk9nj6co9d4 ай бұрын

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

  • @pandalove6795
    @pandalove679511 ай бұрын

    Не уверен, что после удаления или добавления объекта прямо настолько круто делать еще запрос на получение всех продуктов. Если объектов много, то они постоянно будут запрашиваться. Или это не так работает?

  • @weynemeynen
    @weynemeynen2 жыл бұрын

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

  • @user-wr4br7sr9q
    @user-wr4br7sr9q Жыл бұрын

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

  • @kawaikaino5277

    @kawaikaino5277

    Жыл бұрын

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

  • @user-wr4br7sr9q

    @user-wr4br7sr9q

    Жыл бұрын

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

  • @burialstance
    @burialstance Жыл бұрын

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

  • @techno-tramp
    @techno-tramp Жыл бұрын

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

  • @vladislavbogdashev1803
    @vladislavbogdashev1803Ай бұрын

    26:13 это всё, что нужно знать про RTK Query "Мы сделали для вас новый крутой инструмент, который позволяет писать меньше кода, но выучите миллион новых синтаксисов под каждый конкретный случай". Это всё конечно здорово звучит, но ровно до тех пор, пока у вас простой CRUD, а не большое сложное приложение, где вы можете в респонсе синхронизировать много данных. На мой сугубо личный взгляд, связка redux-toolkit + классическая redux-saga + axios - это лучшая сборка для вашего проекта.

  • @kidsShow1998
    @kidsShow1998 Жыл бұрын

    от души like

  • @ssurrokk
    @ssurrokk2 жыл бұрын

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

  • @user-bl8jr7eb9d
    @user-bl8jr7eb9d Жыл бұрын

    Ждём RTK Query TS)

  • @rustam6287
    @rustam62872 жыл бұрын

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

  • @profuter
    @profuter3 ай бұрын

    Правильно ли я понял: мы когда получаем товары добавляем к ним тег Products, который содержит актуальную базу продуктов, а потом когда добавляем и удаляем говорим что этот тег стал инвалидным (invalidate - сделать неактуальным) и его надо актуализировать и потому идёт автоматический запрос?

  • @SabilasSalam
    @SabilasSalam3 ай бұрын

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

  • @fil1806
    @fil18065 ай бұрын

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

  • @mishanep

    @mishanep

    5 ай бұрын

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

  • @railbatyrshin377
    @railbatyrshin3778 ай бұрын

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

  • @user-cw4op6hd8i
    @user-cw4op6hd8i2 жыл бұрын

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

  • @tutnichegonet

    @tutnichegonet

    Жыл бұрын

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

  • @user-im5rd5wc9g

    @user-im5rd5wc9g

    3 ай бұрын

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

  • @simpsomk
    @simpsomk Жыл бұрын

    А если апи поддерживает пагинацию и я в хук useGet...Query передаю номер следующей страницы и хочу, что бы данные с предыдущим запросом не исчезали, а к ним добавлялись данные из нового запроса (следующей страницы), то мне надо заводить отдельный слайс через createSlice для этого и хранить всё в сторе? Без создания слайса никак, да?

  • @boogeymanqq
    @boogeymanqq6 ай бұрын

    Михаил подскажите пожалуйста, когда после каждой мутации я перезаписываю кэш (используя invalidatesTags) и сразу идёт запрос на повторное получение данных (query), как сильно это будет нагружать сервер?

  • @johnconnor9787
    @johnconnor9787 Жыл бұрын

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

  • @mivalb7979
    @mivalb79792 жыл бұрын

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

  • @AleksandrMaltsev-jm8ph
    @AleksandrMaltsev-jm8ph9 ай бұрын

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

  • @user-bh2qf9qp4s
    @user-bh2qf9qp4s Жыл бұрын

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

  • @mishanep

    @mishanep

    Жыл бұрын

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

  • @alexvoid8717

    @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