Zustand и React query. State management в React без боли
HTML-код
- Опубликовано: 30 янв 2023
- В этом ролике мы рассмотрим стейт менеджер в React Zustand, который активно набирает популярность.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Плейлист с роликами по архитектуре - • Архитектура ПО
Поддержать меня и мой канал вы можете по ссылкам ниже.
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469 
Наука
Очень хотелось бы разбор React Query.
Есть ещё один замечательный подход к сторам во фронте - это Effector. Невероятно функциональный и декларативный. Контрибуторы - те же люди, кто делал Feature-Sliced-Design. Хочется увидеть обзор на Effector. Залайкайте коммент, чтобы Ульби увидел 😄👍
Я FSD проникся и внедрил в проект. Просто пушка 🔥Не знал что эффектор их продукт. Обязательно теперь чекну и попробую. Спасибо за мысль)
плюс! использую еффектор на постоянной основе уже давно - он классный
@@enslit FSD частично нарушает философию модульной архитектуры, когда из любой точки приложения ты достаешь компонент или хук из /user/hook/...
@@user-kh7rf2yf2d не знаю о "модульной философии" =) Методология FSD говорит нам о том, что нефиг что попало, импортить куда попало.
Взять к примеру хук о котором ты пишешь - useHook (или что угодно из директории /user/hook).При правильном использовании FSD мы не сможем зависеть от этого хука в компонентах shared слоя и это отлично! так и должно быть. В остальном, кладешь этот хук, предполагаю в entities/user/ и юзай себе спокойно как ты говоришь из любой точки
@@user-kh7rf2yf2d Это где ж в FSD такая схема? /shared/hooks/ - это да. Никаких /user/hook быть не может. И в шаред лежат только компоненты, не несущие бизнес-логики: кнопки, дропдауны, все вот это...
Цуштанд - с немецкого "состояние" или State 😀
Спасибо за видео! Отличная подача информации, и даже не играет роли произношение слов на разных языках. Главное - это знания, которыми Вы с нами делитесь 🎉
Застанд 😂
Коллегам немцам показал, очень смеялись 😂
Z нацисти😅
Очень странно, что на том же гитхабе нет транслитерации. Что-то вроде
Zustand [ˈtsuːʃtant] - a german word for "state"
А вообще, кончено забавно как это произносят остальные блогеры. "Застанд" и "зЮстЭнд" пока мои самые любимые )))
На самом деле ухо режет ппц, так как живу в Германии и с коллегами разговариваю на немецком...
Только без т на конце, просто Цуштанд :)
Я тоже так и прочитала😂когда знаешь немецкий, читать английский становится сложнее 😂
Насчёт React-Query, было бы хорошо если ты расскажешь в каких случаях стоит его использовать с стором, потому что в основном, если не всегда на мой взгляд react-query полностью убивает всякие сторы, потому что там можно хранить данные в кеше вечно и полностью сторы теряют смысл работы с сервером. + Так же react-query умеет работать с persist.
А прикол в том, что стор кроме как хранения юзера и каких-нибудь вещей для отрисовки сложного ui не нужен. все решается с помощью react-query + конекст с локальным состоянием для каждой страницы
Хранить в кэше на фронте можно очень ограниченное количество информации, которое долго остается актульным типа данные юзера или данные о событиях, которые не могут измениться. В высоконагруженных системах возлагать контроль за актуальностью кэша на фронт будет глупо с точки зрения перфоманса и этим чаще всего занимается бэкенд(есть специальные алгоритмы поддержания кэша). Мы использовали персист на фронте для хранения токенов и каких-то ключей, уже и не вспомню
React query - server state (данные), zustand/jotai/valtio - client state
@@doichev-kostia большинство клиентских Стейт менеджеров предоставляют работу с асинхронными данными, но если выбирать между клиентским стейтом и react-query, то логичнее использовать react-query.
А для клиентских данных ну тут на самом деле можно использовать обычный контекст. Зачем я буду в проект заносить лишний "вес" ради того чтобы хранить какая цветовая тема сайта стоит у пользователя? Тем более если брать пример все же с получением данных, то после обновления страницы все слетит.
Насчёт комментария выше соглашусь, то что для большого проекта вместо клиентского Кеша можно вынести на сервер, но опять же тут клиентский стор и не нужен, если так же будем использовать react-query. Мы просто отключим кеширование.
@@daddyj2049 да, соглашусь, но, если честно, контекст не очень хорош, потому что после любого изменения стейта, он полностью перерендеривает всех children, что не очень прикольно.
В наших SPA для любых данных с API, мы используем react-query, но иногда есть куски, где стейт нужно чисто клиентский и, честно говоря, я бы предпочёл zustand или jotai вместо react context
раскидал за 10 минут! Просто и понятно! Огромное спасибо за твои старания! Ждём такой же ролик по effector)
спасибо, Тимур! Как всегда всё кратко, понятно. Лучший)
Ждём про React Query, спасибо за титанические труды!
Просто для информации: это немецкое слово и читается как цуштанд👍 . Видео огонь как всегда! Спасибо 🙏🏻
Отличный ролик, краткий, лаконичный, по существу
Так держать
Видео как всегда очень приятное! Да, видео по React Query было бы здорово посмотреть, спасибо
Привет. Про React query, обязательно стоит сделать ролик я считаю. О том как работать с ним в ssr вместе с каким нибудь СТМ с fsd архитектурой.
Ждем React Query!
Спасибо за классный обзор. Хотим еще по React-Query)
Никогда не поленюсь написать "Красава, хорош, так держать, давай еще" если я досмотрел видео до конца :)
спасибо за видос. очень нравится твоя форма изложения материала. всё по делу, в хорошем темпе и все понятноё. Жду продолжения видосов про архитектуру
Спасибо, Тимур👍
Про Реакт интересно)
Интересно было послушать про Zustand, хочется попробовать в деле)
Про react-query обязательно нужен ролик!
спасибо! Стало сразу понятно, что это, и какие есть преимущества
Спасибо огромное за ролик, подача как всегда на высоте!
React Query тоже очень хотелось бы)
Спасибо за видео! Интересный формат, продолжай.
Поддерживаю, очень интересно будет послушать про React-query 🔥🔥🔥
Ждём React Query, да и много ещё чего ждём. Спасибо за шикарные видео)
Спасибо очень информативно! Очень сильно ощутил разницу между redux и zustand
Интересно было послушать, спасибо. Попробую внедрить к себе в проект
Спасибо за видео! Подробный разбор react-query очень нужен!)
Это знак свыше!=) Только сегодня утром искал и просматривал материалы по Zustand!=)))Спасибо за работу!
ваша мольба услышана)
зачем все эти кривые костыли и бойлерплейты когда есть мобкс, где все работает автоматом
Как всегда топ контент !
уже 300 к бор у тебя !) поздравляю Тимур !!!!! ты заслужил !!!
Не очень понятно из видео как работать с версионированием персиста, но это уже в документации почитаю, спасибо за ролик!) Хотелось бы увидеть видео про React Query)
Коммент в поддержку !
Лучшее - однозначно 👍
Ждемс реакт-квери, всякие приколы в нем и хорошие паттерны написание запросов.
Как всегда все круто! React Query очень хочется
Как хорошо, что есть Ваш канал!
Zustand react
RtQ очень нужен видос, спасибо!
Спасибо! Отличное видео!
Давай мясо! В смысле, react-query. За видео плюс)
Интересно, смотрим!💥
Тимур - лучший педагог!
Спасибо за крутое видео!
React query теперь ждём ролик
Классный разбор Zustand. Также хотелось бы разбор и про react-query!
Спасибо за ролик)
как всегда супер
Спасибо большое за твое хорошее дело
Спасибо большое за обзор! Было бы замечательно посмотреть твой обзор React Query!)
коммент в поддержку канала Тимура и выпуска видео по React Query😊
Ждем все , что сейчас актуально
recoil здорового человека
Цу-Штанд (нем. Состояние / англ. state)
Ждем видео про React Query. И не плохо было бы уже заменить create-react-app на Vite.
Отличное видео. И + за видео про React Query
Отличное видео. Как всегда, никакой воды. Спасибо, что уважаешь наше время.
Да, очень хотелось бы посмотреть видео об Реакт Квери т.к. хочу его выучить. Не писал на нем, но точно знаю, что на данный момент это best practice, и нужно идти в ногу со временем, не отставать от рынка. Не зря в редакс-тулкит запихнули тот же РТК
по квери тоже надо видео!) спасибо за видос)
Захотелось написать Тимуру хороший комментарий, оставлю здесь, тк моя мини-стори завязана на этом ролике. Я пришел на замену человечку в проект, написанный наскоро на Svelte. Чинил оставленные баги, старался улучшить архитектуру в меру своих знаний. И так получилось, что один из багов представлял из себя ререндендеринг и рерутинг на главную страничку при любом изменении данных в сторе, даже если измененные данные не имели отношение к отображаемой сейчас страничке и никак не затрагивались. Почему так происходило я вообще не понимал и помочь мне особо никто не мог. В один из дней я пересматривал этот ролик и как раз обратил внимание про оговорку Тимура, что изменение формально не связанных данных в сторе с текущим компонентом все равно триггерит ререндеринг этого компонента. Проверил тестово на сторах Свелта и тоже увидел такое же поведение. Так что только благодаря Тимуру я смог осознать в чем состоит проблема и стал разгребать этого рейд босса) Спасибо большое
🔥🔥
Спасибо за ролик. Пока выглядит как нативный React context только в профиль
Ролик прямо как в старые-добрые:))) давно не видел те ламповые видео, с разбором какой-то локальной темы🤗 Zustand последние пол года постоянно маячит перед носом, но руки пока не дошли... Вроде крайне дружелюбный, как мишка на лого🤣
Последнее время действительно от фронта больше к общим темам ушли, но мне это наоборот нравится
@@dontcodeэто неплохо, но изредка вот такие ролики тоже очень приятно глянуть 👍👍👍
@@ipa_stor согласен
Спасибо за видос
Спасибо большое :)
Спасибо за краткий обзор.
Класс 👍 спасибо
Выглядит весьма!
👍 Жду гайд по React-Query
+++ React Query!!!!
Чтобы в девтулс отображались не анонимные экшены, в сторе при set в опциях можно передать строкой название какое хотите. Тогда в редакс девтулс наглядно всё видно
Всё понятно и круто, спасибо! теперь ожидаем на очереди react query)
Спасибо!
Чотенько, хотелось бы еще реакт квери! Спасибо, Тимуp :)
Цуштанд, это немецкий, переводится как состояние
круто, что обозреваешь такие технологии, которые только на этапе зарождения
его уже используют в проде
это не про zustand, он уже довольно популярный
это редакс вид сбоку, чтоб было немного меньше боли, пока не открыли для себя мобкс, где ее вообще нет
Боли нет пока не пришлось дебажить)
было бы интересно также как использовать react query и zustand вместе. спасибо за ролик!
Хочется ролик про ReactQuery! Спасибо за твои видео
Спасибо за контент! Кто знает, может когда-нибудь дойдём и до valtio.
Забавный факт, у Valtio, Zustand и Jotai один автор
Хотелось бы понять, как работать с react-query, спасибо за разбор zustand!
Спасибо огромное!!! Я почему-то как один раз про mobx посмотрел видео, привык к нему, даже не смотрел на актуальность его и тем более весь, 50 кб.... Сейчас redux чутка подучу и потом на zustund можно спокойно будет переходить
Спасибо за видео!
Нужен обзор на react query)
Цуштанд -- тема классная. Уже используем в проде.
Посмотрим!
Спасибо большое за обзор. Как всегда кратко и содержательно. Хороший стейт менеджер, но если брать мульттстор, то ИМХО эффектор вне конкуренции.
Super tutorial thanks.
оч круто!
React Query - ждемс!
Видосу лайк, и ждём видео react-query ts возможно + Next ssr
react-query обязательно обзор нужен. Причем полный и всеохватывающий. Либа очень полезная, но довольно объемная по документации. Хотчелось бы структуризированную инфу. Спасибо!
Спасибо за видео, как всегда огонь! По поводу state мэнеджеров, не совсем понятно когда нужно использовать RTK, когда обычные редюсеры и extraReducers, такое видео было бы очень полезно)
Да, очень хорошая идея, сделать обзор React-Query
React Query для работы с "серверным" стейтом приложения (server state data management), Zustand - для работы с клиентским стейтом. Если клиентское приложение тонкое (минимум бизнес логики, все данные в нужном формате возвращаются с бекенда), то возможно Zustand и другие стейт менеджеры вообще будут не нужны, но если толстое, то удобно с данными работать как раз таки через Zustand
Круто!
спасибо!❤
класс, хочу!
Очень похоже на Pinia из Vue
Хорош!
У нас в компании это основной стейт менеджер, активно использую и в собственных проектах
Для запросов у нас самописные слайсы с реакциями
Жду видео о React Query
Да, будет круто про реакт квери)
Спасибо. Хотелось бы увидеть именно связку с React Query, как и было заявлено в названии ролика.
Кликбейтить начал чувак, сообщество не одобряет
Уби, спасибо) Непонятно, как ты успеваешь по таймингам в жизни)
Добрый день. Жду обзор за BlitzJS. Использую и очень радуюсь. Жизнь стала проще.
Прикольный стейт, но все равно предпочитаю MobX за его простоту и удобность)
Спасибо за обзор. Интересный стейт менеджер, редух уже изжил себя, а скачиваний много из-за пиара и того, что его по началу засовывали во все проекты... а сейчас мучаются))
ждём React Query !
Даешь React Query!
круто!