Введение

Небольшое, быстрое и масштабируемое решение для управления состояниями в Bearbones. Zustand имеет удобный API, основанный на хуках. В нем нет шаблонов и разногласий, но есть достаточно соглашений, чтобы быть явным и потоковым.

Не пренебрегайте им, потому что он милый, у него есть когти! Много времени было потрачено на решение распространенных проблем, таких как проблема зомби-потомков, параллелизм React и потеря контекста между различными рендерами. Возможно, это единственный менеджер состояний в окружении React, который справляется со всеми этими проблемами.

Вы можете попробовать живую демонстрацию здесь.

Установка

Zustand доступен в виде пакета на NPM для использования:

# NPM
npm install zustand
# Or, use any package manager of your choice.

Сначала создайте хранилище

Ваше хранилище - это хук! Вы можете поместить в него что угодно: примитивы, объекты, функции. Функция set обновляет состояние.

import { create } from 'zustand';

const useStore = create((set) => ({
    bears: 0,
    increasePopulation: () =>
        set((state) => ({ bears: state.bears + 1 })),
    removeAllBears: () => set({ bears: 0 }),
    updateBears: (newBears) => set({ bears: newBears }),
}));

Затем соедините ваши компоненты, и все!

Вы можете использовать хук в любом месте, без провайдеров. Выберите состояние, и при изменении состояния требуемый компонент будет перерисовываться.

function BearCounter() {
    const bears = useStore((state) => state.bears);
    return <h1>{bears} around here...</h1>;
}

function Controls() {
    const increasePopulation = useStore(
        (state) => state.increasePopulation
    );
    return (
        <button onClick={increasePopulation}>one up</button>
    );
}

Источник — https://docs.pmnd.rs/zustand/getting-started/introduction

Комментарии