Подробно изучаем 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

  • @galievramil1169
    @galievramil1169 Жыл бұрын

    Перешёл целиком на zustand. Задолбал rtk своим boilerplate. Спасибо Елена, узнал о нем от Вас

  • @user-yj8tf7xb6g
    @user-yj8tf7xb6g7 ай бұрын

    Очень-очень нравятся Ваши уроки, очень рада, что нашла канал ❤

  • @Ramosok
    @Ramosok2 жыл бұрын

    Спасибо за разнообразный контент.

  • @UlanovS
    @UlanovS2 жыл бұрын

    Огромное спасибо, Елена! Как раз собирался искать материалы на тему устройства "сторов" и по приёмам их использования. Именно такой полноты подачи информации мне и хотелось! Слушал ролик в парке, ещё придётся пересмотреть его за компьютером, но я получил огромное удовольствие от прогулки и большую помощь))

  • @webelart

    @webelart

    2 жыл бұрын

    Круто, круто! :))

  • @andreyivanov9037
    @andreyivanov903710 ай бұрын

    Елена спасибо большое за твои видео. всегда приятно тебя послушать!) Желаю тебе сил продолжать этим заниматься!)

  • @webelart

    @webelart

    10 ай бұрын

    Спасибо!

  • @STELLS541
    @STELLS5419 ай бұрын

    Случайно набрел на канал, начал смотреть и пока интересно, лайк уже влепил 💪🏻🙏🏻.

  • @user-kg6fz5tz2b
    @user-kg6fz5tz2b2 жыл бұрын

    Спасибо!)

  • @user-qc8ic8tb3x
    @user-qc8ic8tb3x2 жыл бұрын

    Классное видео! Даже если никогда не придется использовать этот стейт-менеджер, всегда полезно узнать, а как же там за пределами редакса и mobx работают стейт-менеджеры.

  • @alenache1
    @alenache12 жыл бұрын

    качество контента - топ)

  • @knowledgedose1956

    @knowledgedose1956

    2 жыл бұрын

    согласен! и теория и практика в одном видео

  • @denisgoncearuc7167
    @denisgoncearuc71672 жыл бұрын

    Zustand - большой топчик! Мы тоже его используем в продакшне

  • @user-hl9ee4kd3l
    @user-hl9ee4kd3l Жыл бұрын

    ты лучшая

  • @dima__rx5fw3rm1n
    @dima__rx5fw3rm1n3 ай бұрын

    А можно ли создать декоратор @Request, который в create на конкретные методы будет автоматически добавлять параметры к запросам? И оформить это как декоратор, или мидлвару

  • @yushato
    @yushato2 жыл бұрын

    Ура-ура, наша Елена Премудрая (по совместительству Прекрасная) запилила новый гайд)) Елена, а создайте пожалуйста урок с мини-приложением полного цикла (верстка + state + запросы апи + тестирование, хотя бы минимальное через Jest). Часто от новичков требуют знания везде, но понемногу. Хотелось бы такой небольшой проект написать, где все сразу.

  • @webelart

    @webelart

    2 жыл бұрын

    Постепенно буду добавлять. ❤️

  • @user-iz4sq8wo1z
    @user-iz4sq8wo1z Жыл бұрын

    Елена, спасибо за контент! Интересный и простенький state manager. Concat на массиве объектов тоже своего рода мутация, так как копирование элементов производится по ссылкам. Когда вы делали unshift вы мутировали текущее состояние и если в devtools Zustand есть механизм таймлайн и можно прыгать по прошлым состояниям, то скорее всего вы увидите как дублируются состояния на разных отметках времени.

  • @webelart

    @webelart

    Жыл бұрын

    Concat возвращает новый массив. Unshift да мутирует. Вот мы так на работе делаем, представляете! Безобразие да и только :)))) Вообще спасибо за комментарий! Учимся дальше! ❤️🌹😎

  • @user-iz4sq8wo1z

    @user-iz4sq8wo1z

    Жыл бұрын

    @@webelart да, новый массив, но конкат не копирует объекты, а ссылается на теже объекты в памяти. Мутация над таким объектом, отразится на всём таймлайне, где он существовал.

  • @webelart

    @webelart

    Жыл бұрын

    @@user-iz4sq8wo1z да я понимаю о чем вы. Здесь только глубокая копия. 🫠

  • @dima__rx5fw3rm1n

    @dima__rx5fw3rm1n

    3 ай бұрын

    @@webelartа глубокая копия - либо рекурсией создавать сущность, либо json.stringify? Я последнее во vuex юзал еще для второго вью) А фиг знает, все либы поверхностно копируют. От лодаша до андерскора. Потому, разве что так и переводить сначала в строку, а потом из строки в обьект. Либо обход дерева 🤷‍♂️ ну просто все поля переносить в новый объект

  • @AlexGabber
    @AlexGabber3 ай бұрын

    Спасибо, было полезно! Но за год Zustand еще несколько тысяч раз обновился и уже createStore функция не работает в текущем виде) Конкретно ему не нравится дженерик в UseBoundStore, в результате все отваливается. К тому же set({ name: __name }, false, 'setUser') ругается на третий аргумент. Нашел решение во втором аргументе девтулза указывать enabled: isDev ? false : true и это убирает слайс из тевтулза. Но меня немного это смущает, по хорошему при билде девтулз нужно вырезать или в принципе enabled отличное решение в плане цены и анонимности? Не наделает дырок в безопасности? Ну бандл наверное увеличит на пару кб, что не страшно

  • @webelart

    @webelart

    3 ай бұрын

    Да, там много что обновилось. Про вопросы, нужно проверять. Я помню пробовала обновить на новую версию и вроде ошибок не было, но вся система не завелась. В команде не было ресурсов на обновление более, поэтому я переключилась на другие задачи. Про безопасность. Каким образом, думаете может навредить? Мне кажется, что все что на фронте уже в зоне риска и не важно какой Стейт менеджер использовать... Важно все важные переменный и функционал выносить на сервер и не светить в стейте в том числе. Хотя иногда какой-нибудь auth-token сохраняют, но тоже по разному можно. Думаю это тоже не про Стейт.

  • @AlexGabber

    @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

    @user-sp8ty2ol8m

    2 ай бұрын

    @@AlexGabber сейчас собирался смотреть, так что пригодиться )

  • @bobyrevvladislav
    @bobyrevvladislav2 ай бұрын

    Что за нейронка делает превьюхи или ты сама? Классно получается ❤

  • @webelart

    @webelart

    2 ай бұрын

    Нет, я не сама рисую. Обложки заказываю :) Да их делают очень круто.

  • @andTutin
    @andTutin2 жыл бұрын

    mobx топчик

  • @webelart

    @webelart

    2 жыл бұрын

    Mobx не юзала, но друзья кто используют, тоже хвалят 👍🏻

  • @bohdanshkaran2606
    @bohdanshkaran2606 Жыл бұрын

    25:48 Обновленная документация говорит, что стейт не должен быть мутирован.

  • @Dmitrijserg
    @Dmitrijserg Жыл бұрын

    Альтернатива Редаксу? Надо посмотреть.

  • @webelart

    @webelart

    Жыл бұрын

    Да, есть свои плюсы и минусы. На holyjs также читала мастер класс, если вдруг вам интересно. Там много вопросов и сравнений было с разными фреймворками. Ещё рекомендую посмотреть на reatom, создатель которого Артем Арутюнян.

  • @ruslankarimov6490
    @ruslankarimov64909 ай бұрын

    35:00 не реактивный доступ к стору

  • @kawaikaino5277
    @kawaikaino52772 жыл бұрын

    нужно срочно видео, ломки...

  • @dima__rx5fw3rm1n
    @dima__rx5fw3rm1n3 ай бұрын

    37:49 как же классно, что с такой подпиской извне нам не нужны провайдеры... И так в мэйне десяток провайдеров) и каждому свой обьект. И каждый хочет перерисовать всех чилдренов... А как удобно: есть сторы и используйте их где хотите, как хотите. В противовес бойлерплейтам на бойлерплейтах редакса. И чтобы в провайдере. А если у нас микрофронтенды, то мы получаем каждой кнопке по провайдеру? 😅🤦🏻‍♂️

  • @dima__rx5fw3rm1n
    @dima__rx5fw3rm1n3 ай бұрын

    Тут в комментах говорят про машину времени за счёт копии стейта. А реально, когда-то нужно? Не вспомнил ни одного реального кейса, где эта машина времени что-то серьезное дает.

  • @aleksejmaleksei
    @aleksejmaleksei Жыл бұрын

    1. Мутабельность поддерживается 2 FC пишется если у компоненты есть чилдрены, можете ознакомится

  • @doslass
    @doslass2 жыл бұрын

    main.tsx, 8я строка как называется оператор '!' ? Нигде не могу найти почитать

  • @SadykoffFamily
    @SadykoffFamily2 жыл бұрын

    Про подписки - в index.tsx тоже надо было импортировать subscribeWithSelector чтобы subscribe не вызывал вопросов

  • @webelart

    @webelart

    2 жыл бұрын

    О, интересно, надо будет попробовать, спасибо!

Келесі