React Query за 10 минут! Быстрый курс
Vložit
- čas přidán 7. 06. 2024
- В этом ролике я расскажу о том, что такое React Query, как делать запрос на бэкенд, пагинацию, отправку POST запроса (мутации) и расскажу про плюсы и минусы этой библиотеки. Всё это за 11 минут!
⏰ Таймкоды:
00:00:00 Начало
00:00:46 Пишем код с помощью Axios
00:02:47 Переписываем на React Query используя useQuery
00:04:50 Делаем пагинацию useState + useQuery
00:06:00 Крутая фича с помощью refetchOnWindowFocus
00:07:22 Зачем нужен keepPreviousData
00:07:39 Используем хук useMutation для создания продуктов
00:09:05 Что такое инвалидация кэша
00:10:04 Итого
🔗 Следите за обновлениями и информацией в:
- Telegram-канале: t.me/archakov_im
- VK: archakov_im
- Личном блоге: archakov.im
- GitHub: github.com/Archakov06
- Моё резюме: career.habr.com/archakovim
#react #usestate #reactquery #query #reduxquery #fetch #axios #request #cache #junior #реакт #разработка
Одно удовольствием теперь вас смотреть. Подача информации, структурно, последовательно, c примерами, без воды. Вы необычайно выросли над собой, сжатость полезной информации и визуальные подсказки - просто шик.
Отлично. Без лишней воды. Коротко и по существу. Мне нравится такой стиль - суровый)
Спасибо за шикарное объяснение, для начала в изучении react querry самое то🔥
Пожалуй одна из лучших подач материала. Нет ненужного лайвкодинга с кучей опечаток и потери времени в видео как у большинства.
Рад видеть новый видос!)
У вас отличная дикция и супер голос :)
и очень доходчиво объясняете задачи. Спасибо большое, с меня лайк и подписка + колокольчик ))
Новый уровень.
Лайк сходу)
Отличный и информативный видос! Дерзай😊
Спасибо! Классная подача, классный материал.
Огнище! Благодарю за учебный материал) Для новичков - на вес золота такой разжёванный контент)
Наконец-то новое видео! Спасибо.
Вот такому контенту ЛАЙК не глядя 💪👍
С возвращением :)
🔥🔥🔥 огонь! спасибо большое!
Спасибо, как всегда отлично!
большое спасибо, это то, что я хотел получить за 10 минут по запросу react query
+
Классное видео, спасибо!
Спасибо за урок, останусь на swr))
Классное объяснение!
Ура новый видос )
Арчаков как всегда доступно понятно
из всех, всех доступней объяснил
огонь, спасибо большое!!!
Отличный гайд, рекомендую начинающим.
Спасибо за шикарный видос, хотелось бы увидеть что-то по нексту, особенно про датафетчинг, т.к я до некст 13 не пользовался им, а новый экспериментальный апп вызывает затруднения
Зашибенный ролик!
спасибо большое, классное видео
Всё шикарно
Благодарю ❤
Мужик, ты лучший
Это лучший материал, который я когда либо видел по реакту.
Спасибо за контент
Супер!!
братан, контент топ!
круто обяснил👍
привет .спасибо большое за видео , очень полезно ) не планируешь сдлеать болле большой ролик по React Query?
Можно гайд по SSR? Твой формат очень заходит
Отличный формат, картинка улучшилась, и скорость подачи возросла!
В последнее время Растет такой стэйтер как Zustand, который в юзабилити считается более простым чем Toolkit и классический Redux.
Большая просьба сделать видос по его основным возможностям (20 минут) - люблю redux, но многовато кода надо писать, особенно для асинхронщины.
P.S. Спасибо за твой труд, один из лучших каналов по Js в Рутубе
Zustand - это Redux Toolkit без говнокода. А асинхронный код не надо писать на Redux - есть React Query, которая делает его ненужным говном мамонта.
@@paemox есть rtk query из коробки который выебал реакт квери
@@user-kz3xe7ps9j React Query требуется меньше boilerplate code писать и архитектура у него проще, легче отлаживать.
@@paemox Zustand нужен в случае сипорейта логики и вию, когда React Query выступает как глобальный стейт. Просто их область применения немного разная
@@rostislavpotapov7215 Некоторые "индивидумы" умудряються использовать Zustand/Redux для запросов на сервер, хотя для этого лучше подходит React Query.
Как же ты хорош
спасибо!👏👍
Круто было бы разобрать также RTK Query)
Наконец-то новое видео) когда next pizza?)
Как вы задообали найдите себе работу ужн
Че грозный такой
Тест поднял видимо) меняется погода, люди растут..
горячий кавказец реактмен
Сопли вытри 🤨👊
Спасибо
Подскажи пожалуйста, как ты выделил цветом кастомные теги в WebStorm?
Можешь показать, как использовать query вместе с rrd (желательно выброс ошибки и использовать в errorPage)
Голос сильно изменился)
Денис, спасибо большое за твои видео!! Всегда очень интересно и понятно объясняешь! Только у меня вопрос, а разве нельзя использовать React Query вместе с Redux?
да нахера тебе редакс то? почему не взять более простой контекстный стейт менеджер, почему все так эту хуипню превозносят?
RQ совмещают с RTK ? Или он нужен если ты не хочешь использовать стейт менеджер ?
спасибо
Круто, спасибо, а что это за редактор кода?
Я использую rtk query, похож на react query, хотелось бы дополнить, что надо пробовать разные технологии, чтобы найти лучшее для себя и не застревать на одном месте
Лепшы )
Кайф
Сделайте pls видео о настройках Webstorma
👍👍👍👍👍👍
запросы на сэрвер и изЭффект 👋
Ого, а что за UI в шторме? Тема какая?
а нельзя было использовать refetch заместо invalidateQueries ?
Ура, спасибо за контент ))
Что с голосом стало ?)
Впритык к микро говорит
малый арчаков повзрослел посеньорел
Спасибо за твой труд, но давай пусть на пять минут дольше но по людски. А то как улби тв - вроде норм, а усваивать тяжело)
Посмотри западных видеоблогеров.Там есть на 50 минут и больше
Какая тема Webstorma?
Оооо контент однако,давай след заходом rtk query😊
Доку прочти епта
@@user-kz3xe7ps9j так доку по любой теме прочитать можно,сам смак в том что бы любимый ютубер видос сделал
У него есть закрытая трансляция где он делает тестовое 6000$ на rtk query, ссылка на бусти
@@darkside2436 подпишусь,хорошее дело нужно поддержать
Вдруг у кого-то линка на исходники есть?
а что делать, если эти же данные нужны для другой страницы\компонента?
Disable cache не забудьте отключить при проверке кэширования
Что профитнее будет , react query или rtq query?
Если планируется работать с редаксом, то второй вариант. Если релакса не будет, то первый
const formData = new FormData(event.target); У меня formData получается пустая, потому что event.target это ... Что не так? или это из-за того что я bootstrap не использую
тоже самое у меня. пустой объект возвращает
Как темка для WebStorm называется?
это скорее fleet
обычно при просмотре роликов ставлю скорость 1.5 тут же поставил 0.75)))
Когда планируешь видео про Вю ?
А в чем отличие rq от tanstack query ?
Tanstack query это и есть react-query новой версии, у библиотеки ребрендинг произошёл.
посмотри zustand
Бро мне срочно нужно твой совет . Вот 1 год прям работал на Реакте ( после курса в доме собирал проекты для портволио) но в итоги сейчас работаю на Vue 2 бля даже не 3 ) у нас в компании так. как то в депрессию попал . В работа не ощущаю хороший рост ( юзаем старие технологии) Скучаю по Реакту 😢 . Блин до сих пор люблю Реакт . ( работаю уже 6 мес на Вю ). Дай какой нибудь совет Арчаков бро
Продолжай работать и паралельно начинай искать работу на реакте
@@user-kz3xe7ps9j тяжело
@@user-kz3xe7ps9j может я сам решу , что мне делать?
@@user-kz3xe7ps9j да я тебя и не спрашивал, чтобы ты мне что-то разрешал,Робертониус
@@user-kz3xe7ps9j Можешь маме своей похвастаться
почему не v4 версия?
Как ты оставил коментарий за 2 дня если видео было опубликовано 18 сек назад?
Скорее всего с бутси ссылка была. Теперь Ден сделал видео общедоступным
5:58
Голос понизил прям как я перед тем, как принять звонок с незнакомого номера😁
объясните зачем редакс нужен, что он решает? Выглядит как оглобля из костылей для менеджмента элементарного потока данных.
те же что и дефолтный state management или Context. Задачи те же - хранение и распределение state.
По нативному Js что-то планируется?
А что по нему можно снять?
@@vladimirivanov4756 практику. Какие-то пректы
а где сам код
так ты жывой
Супер...но кадык не опускай
Наконец-то, теперь Archakov понимает, что в предыдущих видео он делал глупость:
1. Получить данные с сервера
2. Положить в redux
3. Достать из redux
4. Отобразить
Погугли, что такое flux архитектура и не пиши больше своих глупых комментариев. Библиотеки развиваются и предоставляют новый функционал, отсюда возникают новые подходы к построению архитектуры. И да, стейтменеджеры никуда не делись, их продолжают использовать вместе с query.
@@hryashqне ужели я тебя так задел и тебе в кайф класть данные с сервера в стейт, конда они должны периодически обновляться. Гений. Открой блог tanstack поизучай почему они к этому подходу пришли. Подумай почему многие в том числе и facebook отказались от своего же дитя redux. Ты видимо застрял где то в 2017.
@@hryashq и да насчет клиентских стейт менджеров с комбинацией React-query. Более современные "КЛИЕНТСКИЕ" стейт менджеры предоставляют только асинхронные методы для работы с сервером такие как RecoilJS, EffectorJS, ZustandJS и не слова про react-query, Не спорю так можно делать, но если твое приложение и близко не похоже на какой нибудь Aviasales или Банк, то это полная глупость.
А зачем React Query если есть RTK Query?
а зачем реакт если есть вью и ангуляр?
RTK query вроде позже появился чем react query, но могу и ошибаться. А вообще они обе пошли от apollo client
React Query требуется меньше boilerplate code писать и архитектура у него проще, легче отлаживать.
@@paemox у меня мало опыта с ним поэтому не могу это отрицать, но как по мне react query и rtk query примерно на одном уровне сложности находятся.
@@darkside2436 Так вы попробуйте написать один и тот же запрос на обеих библиотеках и увидите разницу.
Интересно конечно но оооочень быстро
а зачем ты обозреваешь старую третью версию, которая уже давно устарела? Уже скоро пятая версия выйдет)
голос грубее стал))
а мне незашло. слишком быстро и нихера непонятно.
думаю самое убого решение под реакт
Я из мобильной разработки. Глядя на это я понимаю что это сделано для умственно отсталых ибо куда уже проще)))
Поняли, что для вас сделано? Приятно
Это новая эпоха фронтенда
@@darkside2436 уже проще нейронку научить генерировать подобное, все очень стандартно. Это сложно назвать программированием.
@@Polite_person_ Программирование - это процесс создания компьютерных программ. В нашем случае веб приложений(сайтов), так что это всё ещё программирование.
Ну да, ну да. Один из принципов программирования (здорового человека) - не пиши код заново. В том смысле, что если какую-то задачу нужно решать постоянно, то найди/напиши библиотеку. В веб разработке данные по API нужно получать и отправлять постоянно. Поэтому логично, что для этого делаются удобные инструменты. И это хорошо: разработчик не думает над рутинной стандартной задачей, не пишет кучу одинакового кода в каждом проекте.
Не, если у тебя, "в мобильной разработке" с этим не согласны, и все пишут максимально сложно и копипастят - ну, тогда извини, кто умственно отсталый, по-моему, очевидно
а мне не оч зашел ускоренный режим. в первый раз вижу эту библу и оч сложно инспектировать код в видео