Подробно изучаем Zustand State Management (React, TypeScript)
Пройдёмся целиком по документации, поэкспериментируем на примере, напишем пару полезных обёрток для production.
🍀 Поддержать канал: www.donationalerts.com/r/webe...
☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: webelart.com/illustration.
✍️ Мой telegram channel: t.me/webelart
🏰 Английский KZread: @webelart_en
💁🏼♀️ Инстаграм: / webelart
🦄 LinkedIn: / webelart
Ссылки используемые в уроке:
🌱 Ссылка на GitHub с проектом ToDo list: github.com/liveldi/zustand_to...
🌱 Ссылка на документацию Zustand: github.com/pmndrs/zustand
Рекомендуемые видео в уроке:
⭐️ Разрабатываем ToDo лист на React + TypeScript + Zustand: • Разрабатываем ToDo лис...
⭐️ Учимся писать глубокий merge и сравнение объектов и массивов: • Учимся писать глубокий...
00:00 Введение.
01:11 Запускаем пример и первое погружение.
06:32 Что такое Zustand и зачем нужен
12:57 Создание store.
17:04 Подключение к компонентам
20:06 Преимущества Zustand
21:27 Особенности import стора в компоненте.
22:48 Сравнение в Zustand, про мутабельность данных.
26:15 Функция сравнения Shallow.
29:24 Пишем свою быструю функцию сравнения.
31:09 Overwriting state.
32:54 Async await.
33:27 Чтение state в методах.
34:16 Чтение state вне компоненты + subscribe на изменения.
42:24 Zustand без React + useRef.
44:35 Immer.
46:05 Middleware.
50:35 Про третий аргумент api.
51:47 Persist middleware.
55:03 Immer middleware + возможности Redux в Zustand
56:16 Подключаем middleware devtools.
01:02:43 React context, TypeScript.
01:05:03 Пишем обёртку для упрощения использования стравнения
01:09:48 Пишем обёртку для разделения development и production store.
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
Пікірлер: 42
Перешёл целиком на zustand. Задолбал rtk своим boilerplate. Спасибо Елена, узнал о нем от Вас
Очень-очень нравятся Ваши уроки, очень рада, что нашла канал ❤
Спасибо за разнообразный контент.
Огромное спасибо, Елена! Как раз собирался искать материалы на тему устройства "сторов" и по приёмам их использования. Именно такой полноты подачи информации мне и хотелось! Слушал ролик в парке, ещё придётся пересмотреть его за компьютером, но я получил огромное удовольствие от прогулки и большую помощь))
@webelart
2 жыл бұрын
Круто, круто! :))
Елена спасибо большое за твои видео. всегда приятно тебя послушать!) Желаю тебе сил продолжать этим заниматься!)
@webelart
10 ай бұрын
Спасибо!
Случайно набрел на канал, начал смотреть и пока интересно, лайк уже влепил 💪🏻🙏🏻.
Спасибо!)
Классное видео! Даже если никогда не придется использовать этот стейт-менеджер, всегда полезно узнать, а как же там за пределами редакса и mobx работают стейт-менеджеры.
качество контента - топ)
@knowledgedose1956
2 жыл бұрын
согласен! и теория и практика в одном видео
Zustand - большой топчик! Мы тоже его используем в продакшне
ты лучшая
А можно ли создать декоратор @Request, который в create на конкретные методы будет автоматически добавлять параметры к запросам? И оформить это как декоратор, или мидлвару
Ура-ура, наша Елена Премудрая (по совместительству Прекрасная) запилила новый гайд)) Елена, а создайте пожалуйста урок с мини-приложением полного цикла (верстка + state + запросы апи + тестирование, хотя бы минимальное через Jest). Часто от новичков требуют знания везде, но понемногу. Хотелось бы такой небольшой проект написать, где все сразу.
@webelart
2 жыл бұрын
Постепенно буду добавлять. ❤️
Елена, спасибо за контент! Интересный и простенький state manager. Concat на массиве объектов тоже своего рода мутация, так как копирование элементов производится по ссылкам. Когда вы делали unshift вы мутировали текущее состояние и если в devtools Zustand есть механизм таймлайн и можно прыгать по прошлым состояниям, то скорее всего вы увидите как дублируются состояния на разных отметках времени.
@webelart
Жыл бұрын
Concat возвращает новый массив. Unshift да мутирует. Вот мы так на работе делаем, представляете! Безобразие да и только :)))) Вообще спасибо за комментарий! Учимся дальше! ❤️🌹😎
@user-iz4sq8wo1z
Жыл бұрын
@@webelart да, новый массив, но конкат не копирует объекты, а ссылается на теже объекты в памяти. Мутация над таким объектом, отразится на всём таймлайне, где он существовал.
@webelart
Жыл бұрын
@@user-iz4sq8wo1z да я понимаю о чем вы. Здесь только глубокая копия. 🫠
@dima__rx5fw3rm1n
3 ай бұрын
@@webelartа глубокая копия - либо рекурсией создавать сущность, либо json.stringify? Я последнее во vuex юзал еще для второго вью) А фиг знает, все либы поверхностно копируют. От лодаша до андерскора. Потому, разве что так и переводить сначала в строку, а потом из строки в обьект. Либо обход дерева 🤷♂️ ну просто все поля переносить в новый объект
Спасибо, было полезно! Но за год Zustand еще несколько тысяч раз обновился и уже createStore функция не работает в текущем виде) Конкретно ему не нравится дженерик в UseBoundStore, в результате все отваливается. К тому же set({ name: __name }, false, 'setUser') ругается на третий аргумент. Нашел решение во втором аргументе девтулза указывать enabled: isDev ? false : true и это убирает слайс из тевтулза. Но меня немного это смущает, по хорошему при билде девтулз нужно вырезать или в принципе enabled отличное решение в плане цены и анонимности? Не наделает дырок в безопасности? Ну бандл наверное увеличит на пару кб, что не страшно
@webelart
3 ай бұрын
Да, там много что обновилось. Про вопросы, нужно проверять. Я помню пробовала обновить на новую версию и вроде ошибок не было, но вся система не завелась. В команде не было ресурсов на обновление более, поэтому я переключилась на другие задачи. Про безопасность. Каким образом, думаете может навредить? Мне кажется, что все что на фронте уже в зоне риска и не важно какой Стейт менеджер использовать... Важно все важные переменный и функционал выносить на сервер и не светить в стейте в том числе. Хотя иногда какой-нибудь auth-token сохраняют, но тоже по разному можно. Думаю это тоже не про Стейт.
@AlexGabber
3 ай бұрын
@@webelart спасибо, разобрался в вопросе полноценно. Нашел решение : const isDevMode = process.env.NODE_ENV === 'development' export const createState = ( name: string, fn: StateCreator, ) => ( isDevMode ? create(devtools(fn, { name, anonymousActionType: `${name}/action` })) : create(fn)) - мало ли кому-то пригодится на вашем канале)
@user-sp8ty2ol8m
2 ай бұрын
@@AlexGabber сейчас собирался смотреть, так что пригодиться )
Что за нейронка делает превьюхи или ты сама? Классно получается ❤
@webelart
2 ай бұрын
Нет, я не сама рисую. Обложки заказываю :) Да их делают очень круто.
mobx топчик
@webelart
2 жыл бұрын
Mobx не юзала, но друзья кто используют, тоже хвалят 👍🏻
25:48 Обновленная документация говорит, что стейт не должен быть мутирован.
Альтернатива Редаксу? Надо посмотреть.
@webelart
Жыл бұрын
Да, есть свои плюсы и минусы. На holyjs также читала мастер класс, если вдруг вам интересно. Там много вопросов и сравнений было с разными фреймворками. Ещё рекомендую посмотреть на reatom, создатель которого Артем Арутюнян.
35:00 не реактивный доступ к стору
нужно срочно видео, ломки...
37:49 как же классно, что с такой подпиской извне нам не нужны провайдеры... И так в мэйне десяток провайдеров) и каждому свой обьект. И каждый хочет перерисовать всех чилдренов... А как удобно: есть сторы и используйте их где хотите, как хотите. В противовес бойлерплейтам на бойлерплейтах редакса. И чтобы в провайдере. А если у нас микрофронтенды, то мы получаем каждой кнопке по провайдеру? 😅🤦🏻♂️
Тут в комментах говорят про машину времени за счёт копии стейта. А реально, когда-то нужно? Не вспомнил ни одного реального кейса, где эта машина времени что-то серьезное дает.
1. Мутабельность поддерживается 2 FC пишется если у компоненты есть чилдрены, можете ознакомится
main.tsx, 8я строка как называется оператор '!' ? Нигде не могу найти почитать
Про подписки - в index.tsx тоже надо было импортировать subscribeWithSelector чтобы subscribe не вызывал вопросов
@webelart
2 жыл бұрын
О, интересно, надо будет попробовать, спасибо!