Знакомство с Zustand - лучшей заменой Redux
HTML-код
- Опубликовано: 16 июн 2024
- Стейт менеджер Zustand позволяет легко управлять состоянием приложения, не усложняя разработку обилием кода. Для работы даже не требуется провайдер, а стор представляет из себя готовый хук. Причем количество сторов может быть любым.
Библиотека поставляется с неплохим набором готовых миддлвейров, а также значительно упрощает асинхронные действия над состоянием.
Код из видео github.com/michey85/zustand-t...
00:00 Введение
00:50 Обзор приложения
02:26 Базовая работа с Zustand
10:54 Метод get
13:56 Создание второго стора
18:01 Миддлвейры в Zustand
21:30 Асинхронные операции
26:52 Оптимизация рендера компонентов
28:06 Итоги
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep 
Наука
Бедный энтер))
Спасибо за видео😊
Согласен. Покупаешь специально "бесшумную" клавиатуру, а тут такое))
Только отказался от redux и начал внедряеть Mobx в проект, как это видео попалось. Попросил ИИ сравнить Zustand с Mobx.
Вот ключевые различия между Zustand и MobX как решениями для управления состоянием в React:
Подход. Zustand функционален, а MobX использует классы и декораторы.
Структура. Zustand - это просто хранилище состояния. MobX требует определить models, actions, reactions.
Производительность. Zustand чуть быстрее за счет использования React Hooks.
Масштабируемость. Zustand проще масштабировать благодаря более простой структуре.
Легкость настройки. Zustand требует минимальной настройки. MobX нуждается в декораторах и классах.
Размер. Zustand меньше по размеру, что полезно при вопросах производительности.
Типизация. Zustand легче типизировать, так как использует TypeScript.
Отладка. Проще отлаживать Zustand из-за функциональной природы.
Тестирование. Zustand проще тестировать без настройки mocks.
В целом, выбор зависит от предпочтений и задач. Но для многих проектов Zustand может оказаться более простым и подходящим решением.
Только вперед Миша. Ты просто красавчик.
Огромное спасибо! Который раз убеждаюсь в ваших способностях доносить всё максимально просто и понятно!!!)
Спасибо, Михаил!
Как всегда хорошо и понятно объяснено!!!
Спасибо огромное за труды! Как всегда объясняешь без воды и очень доступно. С твоим контентом просто удовольствие вкатываться в какую-то новую для себя технологию
Спасибо, Михаил! Один из лучших, кто доходчиво объясняет темы. А главное, что без воды и с важной информацией
Михаил, ты делаешь самый полезный контент по фронту, уже несколько раз выручаешь, спасибо!
Спасибо. Очень удобный стейт менеджер. Попробуем в проде.
Михаил ограмно вам благодарен, только посредством ваших роликов я наконец то научился стейт менеджерам)!
Выглядит очень интересно для небольших проектов )
Блин, подход написания как в Pinia , реально круто и все понятно и просто. Спасибо огромное Михаил, а то я думал придется мучится с rtk !!!
Блин. Как это всё легко оказывается, спасибо вам! У вас талант легко и плавно объяснить...
Реально выглядит намного удобнее и проще, даже чем rtk. Надо попробовать, спасибо
спасибо! это буквально то, что я делаю сейчас на своем проекте - запихиваю логику в хуки и вытаскиваю там, где она нужна для UI. первое впечатление, что зустанд делает то же самое, но со всякими плюшками. это определенно следующий стейт-менеджер, который я впилю в свой проект)
Миш, второй раз натыкаюсь на твоё видео, и второй раз то, что нужно =)
Дополняю.Сейчас еду на работу, смотрю твое видео, это просто кайф.
1. Хорошо поставлена речь.
2.Отлично объясняешь даже для меня чайника, который работал максимум с Redux.
3.Отличный пример на ToDoList.
upd: Спасибо огромное.Знай, что где-то в Москве есть человек который учит библиотеки по твоим видео.Выделяю плюсы, так как сам работаю преподавателем(очно), но ты заочно смог отлично все передать.
Да этот лектор довольно хорошо объясняет сравнительно с другими
Интересная штука, обязательно нужно затестить
Михаил спасибо, ( и спасибо за курс по ReactJS на Udemy )
Расскажи про react query (только не на примере Иудушки а например блога с комментариями))
Было бы оч классно
Спасибо за хорошие уроки!)
Никто еще так ласково апостола-предателя не называл. Иудушка :)))
Один из немногих любимых каналов по фронту. Уверен, автор пробьёт в течение пары лет 100к.
чего это "пары лет"?! давай репост в свои соцсети!))
большое спасибо)
спасибо оч крутая штука
Блин только ваш курс по редакс купила, а тут уже новый инструмент. 🤣 интересно приживется ли он
Redux во всех вакансиях указывают, так что он в любом случае нужен
Только вчера мне на работе сказали его потыкать, так как используют его на проектах. Ахаха. Прям чит-код какой-то от автора. Спасибо)
супер! спасибо. вопрос, если мы получаем один селектор const filter = useFilter((state) => state.filter), то сюда нужно добавлять shallow чтобы не было перерисовки? или перерисовка в FetchTodos происходила из-за деструктуризации?
Сделайте, пожалуйста, ролик про next 13 и стейт менеджмент с примерами rtk или mobx
класс! а ещё можно видео чем отличаются друг от друга разные стейт-менеджеры? я их плохо различаю, у всех одна и та же функция ведь, а особенности я не понимаю в силу отсутствия опыта.
Сложная тема. Здесь нужно и перепробовать набор стейт-менеджеров и глубоко их проанализировать. Причем есть инструменты не заменяющие, а дополняющие другие (например, xState).
Я еще не успел ее использовать, но это лучшее, что я видел. После мучитильного redux и redux/toolkit - zustand выглядит как рай
ты еще не видел RecoilJS и EffectorJS
❤🔥
Впервые слышу про эту либу, но выглядит прикольно) В продакшен я бы, наверное, ее не стал тащить, все же там нужны более проверенные годами, хоть и не всегда удобные инструменты, но вот в пет-проекте или вспомогательном сервисе однозначно стоит попробовать. Спасибо за обзор, как всегда огонь!
Эта либа уже год хайпует, видимо вы узнаете про новые либы с русскоязычных видео на ютубе)
В проде уже используют ее, например loveholidays
на тс с ней как-то сложно мне показалось(( стейт-менеджер для продвинутых
@@user-888azim-97 точно не сложнее редакса))
@@user-888azim-97 библиотека не сложная. но например мне сложно понять, как на этой библиотеке можно делать сложную бизнесовую логику разделенную по доменам.
Ахренеть, как же гениально и просто это выглядит на фоне экшенов/асинхронных экшенов, которые нужно импортировать, потом оборачивать в диспач, мучаться с одноимёнными названиями и прочий гемморой.
Наверняка есть какие-то подводные) Но на первый взгляд о редаксе вообще забыть хочется
Чем вам не нравится redux toolkit query в связке redux toolkit?)
@@aleksandrmatyka3118
1. RTK query это немного про другое.
2. RTK query это сложное интуитивно непонятное апи, мб это оправдано его кучей возможностей, хотя хз.
3. RTK query генерирует хуки с ублюдскими названиями.
4. Правильней наверное сравнивать с Thunk'ами, у которых тоже ублюдское вызывающее отторжение апи. Создаёшь через creteAsyncThunk, потом блять в этот экстроредюсер добавляешь, потом какой-то билдер вытаксивать, господи я уже хочу умереть, тем не менее он уже предоставляет работу с пендингами, ерорами, но боже мой как это всё погано выглядит.
5. В видео чел просто создаёт async метод в объекте и возвращает его из хука. Это же очень просто и понятно и чисто что-ли, как по мне. Поэтому я не понимаю о чём тут вообще можно говорить.
6. У меня мало компетенции чтобы "на серьёзном" уровне рассматривать эти библиотеки, я могу судить только по каким-то основным моментам, которые для меня понятны, но наверняка есть куча всего, чего я не знаю в силу опыта, и не могу заглянуть дальше и увидеть какие могут быть последствия того или иного выбора)
Просто попробуй поработать со вложенными объектами , это ад , кране не удобно , миллионы спредов , но есть кастыль которое у застанда является решением которое немного уменьшает бойлерплейт код , но и там есть нюансы
@@MK-td2dt в тулките в комплекте есть immer, который решает проблему изменением глубоких объектов. Собственно и в zustand его также легко добавить
Сделайте уже кто нибуть курс по effector , ну он же лучше чем вот это вот все)))
up
Размер стейт менеджера чуть меньше классического redux, синтаксис очень простой. Если верить источникам, то намного производительнее redux и redux toolkit. Дебагинг аналогичен редакса. В чем подвох? Спасибо Михаил, отличное пособие к которому я буду однозначно возвращаться.
Effector использует событийную модель для управления состоянием, в то время как Redux Toolkit использует архитектуру Redux
Effector имеет более краткую конфигурацию, в то время как Redux Toolkit имеет более расширенную конфигурацию, которая позволяет настроить множество параметров. Так же имеет более гибкую систему для работы с асинхронными данными, в то время как Redux Toolkit имеет более ограниченную систему.
Михаил, Ваш Enter любит боль?))
Здравствуйте, Михаил спасибо, чисто случайно на ваш канал зашёл, думал просто посмотрю и выйду. Подскажите ребята, что лучше использовать для чайника Redux или Zustand ? Zustand легче, но есть сомнения. (Пишу дипломную)
Для чайника Zustand будет намного проще. У него лаконичное API и нет легаси истории. С Redux, если не было опыта, можно заковыряться основательно.
Спасибо уважаемый Михаил за этот и не только этот контент)
Видео огонь, но звук клавиатуры просто бесит, особенно когда нажимается Enter
Прикольно. Надеюсь это надолго)
Приттиер почему-то не форматирует нормально код в зуштанд-файле. Кто сталкивался с этим?
А подскажите, что за тема на VS Code?
боже, астанавитись) Очередная 2047-я библиотека. Верните мой 2017 с Г-Квери
Г-Квери - это забавно))) Теперь придется жить с этим))
@@mishanep =) я настолько стар, что помню, как JQuery так обзывали.) Хотя библиотека была норм, если код не на 10000000000 строк.
А вы не работали с Recoil? Очень простой state manager, используется как хук useState, только глобально
Пока не работал. Я слышал про него и немного листал их доку, но не пробовал в деле
все кому не лень пошли клепать свои поделки. с одной стороны хорошо тем что может и вырвется вперед реально лучшиее решение. но происходит рассредоточение ресрсов как создающих поделки так и их использующих.
Люди вместо того чтобы развивать общее решение идут и делают 100500 своих, дефолт.
Спасибо за видео! Боже, я когда-нибудь смогу выучить что-то до конца? 😂 С мая учу фронтенд... Мне говорили, что фронт "быстрый как река", но чтоб настолько😂😂😂 В том же реакт роутере не поспеваешь за документацией... И это я полгода учу😂 Вас спасибо огромное!!! Очень выручаете - мне новичку сложно читать сухую документацию, а Вы объясняете супер!
я уже 3 года работаю, и ты никогда не перестанешь учить все)
А вы подумали что за пару месяцев сядьте в кожаное кресло , и станьте фронт разрабочиком ?
Неплохо.
Несколько месяцев назад накатал подобный менеджер, но чуть проще.
Если интересно, то лежит на npm под названием react-state-sub
Я посмотрел, забавно - действительно выглядит просто. Не вызовет в более сложном проекте повторный рендер?
@@localixdots9698 нет, если придерживаться стандартных правил реакта. А вообще, я просто его накатал для собственной практики. Особо его не тестили.
@@KissMyS а почему не используется для себя? Выглядит так что поддерживать его там нечего и оно особо не поменяется с годами ну типо должно работать. Я пока написать самостоятельно такое не смогу наверное. Сколько лет потребовалось втыкать в js? Чтобы осилить такое
@@localixdots9698 я решил разобраться в реакте. Разобрался, но столкнулся с проблемой под названием Redux. Он оказался абсолютно неюзабельным(слишком много действий приходилось совершать). Сделал свой манагер стейта, наигрался и забыл про реакт в целом. Сам же юзаю php в связке с node.js(в основном для webSocket).
Отвечая на второй вопрос: с js дружу c 15 года.
@@KissMyS ну бойлерплейта да много, видимо поэтому и зустанг и подобное появляется. Почему на PHP вернулся? Я его когда-то щупал, не понравился. Делал ли веб сервисы на node.js с высокой нагрузкой (не бизнес критикал)?
вот это поворот!
только я ставлю какую-то библиотеку незнакомую в проект с мыслью: вот бы у Михаила видео по ней вышло, как через неделю у вас выходит видео!) такое совпадение уже раз 6той. по фреймер моушен, то рамда, то ант !)
в очередной раз, - огромное спасибо!)
раньше смотрел на алерт колокольчика и думал - вот бы там ваше видео, а теперь думаю - вот бы там ваше видео, и если там оно, то совпадет ли оно со свеже установленной библиотекой в проект )))
по стейт-менеджерам:
начинал с редакса, устроился на работу а там мобх. мобх сразу показался проще - никаких экшенов, редюсеров. там стор достал-там засетал. но вся бизнес логика у нас валяется в компонентах. бывают компоненты по 700 строк и по 100500 разных сетов-гетов в разные сторы.
начал свой проект, он разросся и стал вопрос менеджмента. подумал - редакс не понравился, мобх на работе..хочу что-то новое и простое. в голове держал что у вас есть видео по ртк. посмотрел и решился. разобрался быстро, перевел на него весь проект без проблем, но почему-то парит то, что надо экшены импортировать :-) я постоянно забываю какие они там есть, и приходится много по файлам шариться что бы вспомнить что писал, что не писал. в общем, как-то неудобно. решаю посмотреть есть ещё и натыкаюсь на zustand. отбранчевался, попробовал - как будто редакс, только в 100 раз проще. никаких хоков и провайдеров. 1 импорт хука из которого и стейт вытянул и сеттеры с геттерами - ну супер. про персистентный стор вообще молчу))) а главное, copilot сразу весь crud вкидывает, только успевай таб нажимать.. так удобно, что кажется как будто где-то есть подвох :-)
основываясь на том что писал вначале комментария, предлагаю в следующем видео рассмотреть mantine-ui, feature-sliced архитектуру или новый 18 некст :-)
год как юзаю в проде на одном внутреннем проекте одного не гос банка.
А какие минусы если сравнивать с редакс тулкитом ? Инструмент понравился, но актуально ли его юзать на продовых проектах ?
Стандартный ответ - это для небольших проектов Zustand, для больших - Redux Toolkit. Но ведь всё относительно. Я видел Zustand и в продакшн (сам использовал по работе). Он моложе, поэтому Редакс всё ещё идет "по дефолту", в том числе и потому что людям он уже знаком.
Махил, а что думаете о Effector?
Я им толком не пользовался. Помню только как соседняя команда на проекте свою часть делала с ним и очень нахваливала. Я планирую до него добраться, но пока никак.
@@mishanep спасибо, очень жду, и все комьюнити эффектора тоже наверное ждет что-то подобное =)))
Михаил, что за тему используете в редакторе?
CodeSandbox Black 2021
Ну почему, можно и несколько сторов в redux сделать. :P
А nanostores не пробовали? Он от того же автора, что и nanoid
Нет. Пока не довелось.
Будет ли обзор на effector?
В ближайших планах не было. В перспективе возможно.
Клавиатура из бетона ?)
27:25 - а почему вообще происходит перерендер? В других компонентах его нет?
По всей видимости есть во всех компонентах, которые используют этот стор. Но там нет console.log, чтобы явно было видно
Redux mini 😆
Здравствуйте, это лучший стэйт менеджер?
Всё относительно. Лучшего не существует. Но на сегодняшний день Zustand выглядит очень хорошим игроком на рынке стейт менеджеров.
Стор здорового человека, а не вот эти все редаксы
Просто обернуть в persist(useZustnund). Как у вас это работает что за магия ? хD.
Я пока не передал в persist второй параметр, вида:
{
_name: 'favoritesStorage',_
_storage: createJSONStorage( () => localStorage )_
}
У меня просто фонтан ошибок был, как у вас все работает в чем секрет?
Может версии разные. Для второго параметра, конечно, имя ключа для хранения надо хотя бы передать.
@@mishanep Ну я нашел много реализаций, в основном, все обертки(композиции) добавляют уже при дефолт экспорте после написания стора. Будь то devtools, Persist, Immer, ну или кастомные middleware, у уже к ним добавляют нужные параметры. Выглядит конечно страшно, ну compose в помощь! Мне же помогло просто передать параметры на месте xD
Чем он лучше effector-a?
Популярностью) Пока не доводилось слышать про эффектор от западных коллег. А zustand на устах у многих.
@@mishanep Так же по структуре, зачем писать селектор внутри компонента, особенно если там как в примере switch. Селекторы желательно вынести в отдельные файлы.
Так-же, не очень понятно как вытягивать данные в одном сторе из другого.
@@evgeny_mdr Селекторы легко вынести в отдельное место. Это несложно. Подобные приложения часто вообще в одном файле пишут для простоты объяснения самой концепции.
А читать другие сторы - через параметры селекторов. Пишете функцию, которая принимает данные и возвращает функцию селектор. Напрямую они и не должны быть связаны и зависеть друг от друга.
@@mishanep Посмотрите в сторону effector там все это уже из коробки есть. И подход больше напоминает MVVM.
что за snippet reactfc?
Кастомный) Сам писал. На канале есть видео как писать свои сниппеты.
а как его скрестить с React-Query?
Смотря какой функционал требуется. Можно сохранять какие-то пользовательские фильтры в Zustand и использовать их в качестве параметров при запросах через react-query.
Почему не с балалайкой?..
Вообще инструмент больше на укулеле похож)) Мне тоже кажется, что балалайка подошла бы лучше))
Балалайка для лаптеногих рабсеянцев. Создатель этого продукта явно не такой
а с персистом умеет ?
Так есть же и персист на видео.
@@mishanep не добрался😅
очередной убийца редакс, где di? где код ген? где поддержка gql? где разделение на слои?
жаль редакс(
Цуштанд
Язык странный
Z - Ц
S - З
V - Ф
ST - ШТ
@@mishanep я больше внимание ставил на первую букву. да верно
Ничего странного. Странный - это как раз английский. Английский и французский - это самые далекие от оргинальной латыни языки из всех, которые имеют её в качестве основы. Фонетика этих языков - это дичь дикая.
S - З - неверно. В немецком произношение зависит от расположения и сочетания. З - это только тогда, когда слово начинается c S, либо S раположено между двумя гласными. В остальных случаях либо С (Glas, Kost, kostenlos), либо Ш (если слово начинается с st или sp, в т.ч. в сложных словах с корнями, начинающимися c st или sp - Stadt, sprechen, фамилия Stalder, Zustand - ШТ, потому что Stand).
V - Ф - неверно. В немецком произношение зависит от расположения и сочетания. Ф - в большинстве случаев, НО в случаях, когда V раположено между двумя гласными - будет В (Klavier, Ava* - много слов).
Вишенка на торте: эти правила соблюдаются в 99.99%, в отличие от... Т.е. запоминать нужно НАМНОГО меньше.
P.S.: Кстати, мне не нравится немецкий язык, но он проще (в некоторых вопросах)
Цуштанд
цуштанд.
Бедная клава
А о каком "обилии кода" идёт речь в контексте современного Redux (Redux Toolkit)? Готовые хуки useAppDispatch/useAppSelector там тоже есть
На контрасте в Redux Toolkit всё равно будет больше кода. Отдельно слайс с редьюсерами и экстра-редьюсарами. Отдельно асинхронные санки. Потом сбор слайсов в стор. Подключение persist-миддлвейра (особенно в тайпскрипт версии) не самое простое (опять же на сравнении). Ну и те самые готовые хуки - их два, и каждый раз дергать useDispatch, чтобы получить простую функцию для запуска экшнов. В любом случае - для одного события надо всегда вызывать два хука. А тут один.
@@mishanep спасибо!
@@mishanep Да, только то что Redux Toolkit будет медленно но верно развиваться и дальше, есть уверенность. А зустан с высокой вероятностью через годик-два тоже станет "не модным" потому, что все уже переходят на кжиштан.
@@sergeyfilatov3027 что такое кжиштан? На английском можно?
@@script1851 Его еще не придумали, но скоро будет.
Цуштанд