SWR для CRUD операций в React-приложении
HTML-код
- Опубликовано: 13 дек 2022
- Небольшая библиотека SWR может принести много пользы при работе с API. Простая абстракция useSWR и mutate позволяет отказаться от использования стандартных хуков useState, useEffect при CRUD операциях, а заодно добавляет всевозможные оптимизации, в том числе кэширование.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep 
Наука
Михаил поражаюсь вашей подачей, все четко и понятно ! Спасибо
каждый раз когда хочу что-то опробовать на проекте, Михаил выпускает видео ) мейджик, спасибо !
Миша, ты Красава!!! Ролик в тему!
Да, SWR штука интересная) Объяснение супер! Спасибо, Михаил.
Супер! 🎉
Привет, Михаил. Сделайте, пожалуйста, видео по fsd. Набирает обороты эта методология построения фронта.
React query тоже попробуйте!
Добрый день очень интересное видео! Есть вопрос как организовать свой стор в SWR(как в Redux), т.к. в приложении должна быть одна точка доступа?
Подскажите пожалуйста, в компоненте Cart , в fetcher не указан параметр куда отправлять запрос, как он определяет адрес запроса?
Михаил, спасибо за ролик. После довольно громкого доклада про отмену useEffect от создателя xState, хочется узнать, что вы думаете по этому поводу? Будете ролик на эту тему выпускать?
Я периодически вижу пяток-другой юз эффектов в компонентах моих коллег, поэтому всячески поддерживаю всевозможные абстракции во избежании усложнений. В целом, кастомные хуки и абстракции вроде SWR или react-query отлично справляются с этой задачей. Да и xState - шикарный инструмент, чего уж там.
Здравствуйте, сделайте обзор на новую бета доку react, где рассказывают про современные паттерны в реакте
класс
Михаил, можно link на репо, посмотреть?
Для mutation есть isLoading?
Я так понял эта тема нужна что бы мы не городили огороды из передач по контексту или редаксов и в ручную их постоянно не менять в стейте когда делаешь запрос, прикольная тема, надо будет пощупать
У тебя по сути два выбора: либо при каждом заходе будет заново запрашиваться инфа, либо ты кешируешь данные. SWR нужен для кеша
Контекст нужен часто. Много вещей проще прокинуть через контекст. Начиная от полученных данных с сервера, заканчивая темами css и инстансов какого нибудь класса из какой нить библиотеки. Так что нет выбора между контекстом и свр.
Михаил, привет! С чего лучше начать, пройти курс и разобраться с TypeScript или сразу начать изучать ReactJS и уже потом изучить TypeScript?
Отвечу за автора сразу, а что такое ТС? Тот же джс только типизированный. Тебе платят деньги за работу, а не за знания тайпскрипта. Больше пиши кода, а тс можно изучать параллельно
TypeScript вам может и не понадобиться. Вам нужен уверенный JavaScript для начала. Если это есть, то можно изучать React. Есть и другие комбинации, в том числе и сначала TypeScript, но тут уж зависит от уровня подготовки. Для начинающих слишком много концепций за раз, как правило, сложно. Поэтому шаг за шагом.
@@mishanep спасибо!
Может я привык к React Query, но просмотрев видео не появилось желания переезжать на SWR. React Query прекрасен, рекомендую.
У меня на новом проекте swr проработал с ним месяц, до этого работал с react-query и всегда хотел попробовать swr. По итогу, лично для меня, swr оказался жалкой пародией на react-query с фиговой работой с кешем и отвратительным девтулс. Swr для меня это огрызок от react-query
@@user-tn9fs9vi1l Что именно плохо в работе с кешем? swr минималистичен в отличие от огородного react-query
В чём преимущество этой библиотеки по сравнению с redux toolkit + rtk query?
Если вам не нужен Редакс, то необязательно использовать RTK Query - SWR или react-query делают то же самое.
это что-то типа react query?
Да
Добрый день! не понимаю, что за ошибка: TypeError: (0 , swr__WEBPACK_IMPORTED_MODULE_3__.default) is not a function
Выглядит как неправильный импорт из библиотеки.
Не понимаю, почему данные на сервере то хранятся?
мне кажется наш тимлид тоже вас смотрит. включили swr в проект.
и я даже после видео ничего не понимаю ((
м, убрала юзэффекты, красиво
Как ты прочитал мои мысли?
Я только хотел гуглить про свр
Совпало)) Видео неделю назад было записано) Пока отдашь в монтаж, пока нарисуют картинку)
образно надстройка над аксиосом которая заменяет собой стейт? еще упрощение даже в сравнении с тулкитом. даешь вообще конструктор чтобы только адрес сервера вписывать и заголовок.
Стейт - на бэкенде. На фронте - идет с кэшированием и автообновлением зависимостей, плюс прочие плюшки.
@@mishanep спасибо за перевод моих слов на правильный техничекий. удивляют тенденции.
Привет Миша, можешь снять видосы по valtio(state managment) и как поднять архитектуру фронта. Будем очень благодарны.
Приветствую! Никогда раньше о нем не слышал. В ближайших планах было разобрать другой state manager - zustand.
Что вы понимаете под поднятием архитектуры?
@@mishanep valtio лучше чем zustand
@@mishanep ну, чуть не правильно задавал вопрос. Например у Вас новый большой проект. Вы как и с чего начали бы проект? Дерево проекта как должно быть? И в целом какие фишки или нюансы, и какие библиотеки лучше для ui, т.п.
Apollo, SWR, React Query, RTK Query 🤯🤯🤯 Что же выбрать?
Отличный вопрос)) Ответ на него будет зависеть от обстоятельство в виде особенностей проекта и уже выбранных подходов и инструментов, а также опыта команды и ее желания попробовать что-то еще 😄
Михаил, там разработчики react router подкинули вам идею для нового ролика) v6.5
Михаил, добрый вечер, привет из Украины!
Как насчёт видоса про админку?
Refine к примеру...!? :)
Привет вам из Испании.
Пока не смотрю в эту сторону. Админки как-то всегда пилились из тех же инструментов, что и клиентская часть. Да, есть абстракции, но пока ни на одном проекте не доводилось с ними работать.
а еще SWR умеет SSR )))
короче RTK Query с инвалидацией кеша
в rtk разве нельзя реализовать инвалидацию кеша?
может ли человек с IQ 90 стать крутым программистом ????
Может.
Благодаря этому будет писать простой и понятный код ))
у крутого программиста не может быть 90 iq, так что сначала у тебя будет 90 iq, потом 100, 110...И тогда уже будешь крутым программистом)