Основным стейт-менеджером в Альфе является Redux. Но мы часто пробуем что-то новое, и однажды наш взгляд упал на Zustand.
Zustand — крошечный state manager, который можно использовать не только с React. У него небольшой вес и почти полностью отсутствует boilerplate.
const useBear = create((set) => ({
bears: 0,
updateBears: (newBears) => set({
bears: newBears
}),
}))
Всего пару строк кода, а у вас уже есть стор и хендлер к нему, просто и понятно.
▶️ Как мы мигрировали с Redux на Zustand
Миграция проходила поэтапно. Удаляем один Redux-слайс, добавляем один Zustand-стор, так по очереди.
Сторы в Zustand независимы, поэтому внедрять его можно отдельными «островками». Это позволяет мигрировать плавно и без больших затрат.
Вопрос middleware тоже решился просто, есть множество существующих решений, а написать свои не составило труда.
С отладкой все максимально понятно, так как Zustand использует devtools от Redux.
▶️ Что показали замеры
По итогам наших замеров, Zustand показал себя на 72% быстрее Redux. Речь идёт о микросекундах, проект был небольшим. Поэтому с ростом проекта разница может стать заметнее.
▶️ Как восприняла команда
Поначалу Zustand кажется слишком простым для enterprise-проектов.
Но разработчики быстро оценили его подход. Функциональности хватает для разных задач, а сам инструмент поддерживает асинхронные экшены и готовые или кастомные middleware.
В итоге Zustand стал частью наших проектов и стандартов.
А что используете вы на своих проектах? 🔽
#af_hard
❤️ Больше рассказываем о работе в IT и Digital в канале Alfa Digital