Как работает Zustand

Hello world!

Zustand (читается как «цуштанд», что переводится с немецкого как «состояние») — это, на мой взгляд, один из лучших на сегодняшний день инструментов для управления состоянием приложений, написанных на React.

В этой статье я немного расскажу о том, как он работает.

Давайте начнем с примера использования zustand для реализации функционала отображения/скрытия модального окна.

Код проекта лежит здесь.

Демо:

---

Для работы с зависимостями я буду использовать Yarn.

Создаем шаблон React-приложения с помощью Vite:

# zustand-test - название приложения # react-ts - шаблон проекта, в данном случае React yarn create vite zustand-test --template react

Переходим в созданную директорию, устанавливаем основные зависимости и запускаем сервер для разработки:

cd zustand-test yarn yarn dev

Устанавливаем дополнительные зависимости:

yarn add zustand use-sync-external-store react-use

• react-use — большая коллекция кастомных хуков;
• use-sync-external-store — об этом мы поговорим чуть позже.

Определяем хук для управления состоянием модалки в файле hooks/useModal.js:

import { create } from 'zustand'  const useModal = create((set) => ({   isOpen: false,   open: () => set({ isOpen: true }),   close: () => set({ isOpen: false }), }))  export default useModal

Определяем компонент модалки в файле components/Modal.jsx:

import { useEffect, useRef } from 'react' import { useClickAway } from 'react-use' import useModal from '../hooks/useModal'  export default function Modal() {   // состояние модалки   const modal = useModal()   // ссылка на модалку   const modalRef = useRef(null)   // ссылка на содержимое модалки   const modalContentRef = useRef(null)    useEffect(() => {     if (!modalRef.current) return      // показываем/скрываем модалку в зависимости от значения индикатора `isOpen`     // `showModal` и `close` - это нативные методы, предоставляемые HTML-элементом `dialog`     if (modal.isOpen) {       modalRef.current.showModal()     } else {       modalRef.current.close()     }   }, [modal.isOpen])    // скрываем модалку при клике за пределами ее содержимого   useClickAway(modalContentRef, modal.close)    if (!modal.isOpen) return null    return (     <dialog       style={{         padding: 0,       }}       ref={modalRef}     >       <div         style={{           padding: '1rem',           display: 'flex',           alignItems: 'center',           gap: '1rem',         }}         ref={modalContentRef}       >         <div>Modal content</div>         <button onClick={modal.close}>X</button>       </div>     </dialog>   ) }

Определяем минимальные стили в файле index.css:

body {   margin: 0; }  #root {   min-height: 100vh;   display: grid;   place-content: center; }  dialog::backdrop {   background-color: rgba(0, 0, 0, 0.4); }

Наконец, рендерим модалку в файле App.jsx:

import Modal from './components/Modal' import useModal from './hooks/useModal'  function App() {   const modal = useModal()    return (     <>       <button onClick={modal.open}>Open modal</button>       <Modal />     </>   ) }  export default App

Это было легко, не правда ли? А все благодаря магии функции create?

---

Исходный код zustand находится здесь. Поскольку мы будем рассматривать только основной функционал, предоставляемый этим пакетом, нас интересует 2 файла — vanilla.ts и react.ts.

Код, содержащийся в файле vanilla.ts, представляет собой реализацию паттерна «Издатель/подписчик» (publisher/subscriber, pub/sub).

Создаем файл zustand/vanilla.js следующего содержания:

const createStoreImpl = (createState) => {   // состояние   let state   // обработчики   const listeners = new Set()    // функция обновления состояния   const setState = (partial, replace) => {     // следующее состояние     const nextState = typeof partial === 'function' ? partial(state) : partial     // если состояние изменилось     if (!Object.is(nextState, state)) {       // предыдущее/текущее состояние       const previousState = state       // обновляем состояние с помощью `nextState` (если `replace === true` или значением `nextState` является примитив)       // или нового объекта, объединяющего `state` и `nextState`       state =         replace ?? typeof nextState !== 'object'           ? nextState           : Object.assign({}, state, nextState)       // запускаем обработчики       listeners.forEach((listener) => listener(state, previousState))     }   }    // функция извлечения состояния   const getState = () => state    // функция подписки   // `listener` - обработчик `onStoreChange`   // см. код хука `useSyncExternalStoreWithSelector` - об этом чуть позже   const subscribe = (listener) => {     // добавляем/регистрируем обработчик     listeners.add(listener)     // возвращаем функцию отписки     return () => listeners.delete(listener)   }    // функция удаления всех обработчиков   const destroy = () => {     listeners.clear()   }    const api = { setState, getState, subscribe, destroy }   // инициализируем состояние   state = createState(setState, getState, api)   // возвращаем методы   return api }  // в зависимости от того, передается ли функция инициализации состояния, // возвращаем либо `api`, либо функцию `createStoreImpl` export const createStore = (createState) =>   createState ? createStoreImpl(createState) : createStoreImpl

Думаю, здесь все понятно. Двигаемся дальше.

Код, содержащийся в файле react.ts, представляет собой интеграцию или внедрение рассмотренного pub/sub в React fiber.

Создаем файл zustand/react.js следующего содержания:

// `CommonJS` import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector' import { createStore } from './vanilla.js'  const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports  export function useStore(api, selector = api.getState, equalityFn) {   // получаем часть (срез) состояния   const slice = useSyncExternalStoreWithSelector(     api.subscribe,     api.getState,     api.getServerState || api.getState,     selector,     equalityFn,   )   // и возвращаем его   return slice }  const createImpl = (createState) => {   // получаем методы, возвращаемые функцией `createStore`   const api =     typeof createState === 'function' ? createStore(createState) : createState    // определяем хук, вызывающий хук `useStore` с переданной   // функцией-селектором (`selector`) для извлечения части состояния и   // функцией сравнения (`equalityFn`) для определения необходимости повторного рендеринга   const useBoundStore = (selector, equalityFn) =>     useStore(api, selector, equalityFn)    // это нужно для того, чтобы иметь возможность   // вызывать хук за пределами компонента -   // `useModal.getState()`   Object.assign(useBoundStore, api)    return useBoundStore }  // можно получить либо хук `useBoundStore`, либо функцию `createImpl` export const create = (createState) =>   createState ? createImpl(createState) : createImpl

Попробуйте заменить import { create } from 'zustand' на import { create } from '../zustand/react' в useModal.js и убедитесь, что с точки зрения функционала ничего не изменилось.

Вот где начинается магия?

Хук useSyncExternalStoreWithSelector — это продвинутая версия хука useSyncExternalStore (useSyncExternalStore и его разновидности почему-то лежат в отдельном пакете). Разница между ними состоит в том, что useSyncExternalStoreWithSelector принимает 2 дополнительных параметра:

• selector — функция-селектор для извлечения части состояния (по умолчанию возвращается все состояние);
• equalityFn — функция для сравнения текущего и нового состояний, которая используется для определения необходимости повторного рендеринга.

Вызов useModal с селектором:

const isModalOpen = useModal((state) => state.isOpen)

Вызов useModal с селектором и функцией сравнения:

import { shallow } from 'zustand/shallow'  const { open, close } = useModal(({ open, close }) => ({ open, close }), shallow)

Для чего нужен хук useSyncExternalStore?

Как правило, компоненты React читают данные из пропов, состояния и контекста. Однако иногда компоненту может потребоваться прочитать меняющиеся со временем данные из хранилища, находящегося за пределами React. Таким хранилищем может быть:

• сторонняя библиотека для управления состоянием (такая как zustand), которая хранит состояние за пределами React;
• браузерный API, предоставляющий мутируемое значение и события для подписки на его изменения.

useSyncExternalStore принимает 2 обязательных и 1 опциональный параметр:

• subscribe (обязательный параметр) — функция, принимающая параметр callback и выполняющая подписку на хранилище. callback вызывается при любом изменении хранилища. Это приводит к повторному рендерингу компонента. subscribe должна возвращать функцию отписки от хранилища;
• getSnapshot (обязательный параметр) — функция, возвращающая снимок (snapshot) состояния из хранилища, потребляемого компонентом. Если состояние не изменилось, повторные вызовы getSnapshot должны возвращать одинаковые значения. Если новое состояние отличается от текущего, React выполняет повторный рендеринг компонента;
• getServerSnapshot (опциональный параметр) — функция, возвращающая начальный снимок состояния из хранилища. Она используется только в процессе серверного рендеринга контента и его гидратации на клиенте.

useSyncExternalStore возвращает снимок хранилища для использования в логике (цикле) рендеринга React.

Подробнее о рассматриваемом хуке можно почитать в этой статье.

Таким образом, useSyncExternalStore позволяет подписываться на изменения состояния, находящегося во внешнем хранилище, способом, совместимым с конкурентными возможностями React. Цикл рендеринга, в числе прочего, предполагает вызов одинаковой для первоначального и повторных рендерингов последовательности хуков, используемых компонентом. Одинаковая последовательность вызова (и количество) хуков обеспечиваются правилами использования хуков. Это логично: вызов хуков в другой последовательности или в меньшем/большем количестве приведет к несогласованности состояния компонента.

useSyncExternalStore делает наш pub/sub (внешнее хранилище) частью системы хуков, формирующей итоговое состояние компонента.

Код рассматриваемого хука можно найти здесь (функции mountSyncExternalStore и следующая за ней updateSyncExternalStore).

«Голая» mountSyncExternalStore выглядит так:

function mountSyncExternalStore(   subscribe,   getSnapshot,   getServerSnapshot, ) {   // волокно   const fiber = currentlyRenderingFiber   // текущий/выполняемый хук   const hook = mountWorkInProgressHook()    // следующий снимок состояния   let nextSnapshot   const isHydrating = getIsHydrating()   if (isHydrating) {     nextSnapshot = getServerSnapshot()   } else {     nextSnapshot = getSnapshot()   }    // читаем текущий снимок из хранилища на каждом рендеринге   // это нарушает обычные правила React и работает только благодаря тому,   // что обновления хранилища всегда являются синхронными   hook.memoizedState = nextSnapshot   const inst = {     value: nextSnapshot,     getSnapshot,   }   hook.queue = inst    // здесь планируются эффекты для подписки на хранилище и   // для обновления мутируемых полей экземпляра (`inst`),   // которые обновляются при любом изменении `subscribe`, `getSnapshot` или значения   // эти внутренности нас не интересуют    return nextSnapshot }

Отличия updateSyncExternalStore от mountSyncExternalStore сводятся к следующему:

// предыдущий снимок const prevSnapshot = (currentHook || hook).memoizedState; // изменилось ли состояние? const snapshotChanged = !is(prevSnapshot, nextSnapshot); // если изменилось if (snapshotChanged) {   hook.memoizedState = nextSnapshot;   markWorkInProgressReceivedUpdate(); } const inst = hook.queue;

В качестве бонуса ловите слегка видоизмененную функцию shallow, позволяющую глубоко сравнивать объекты, которой можно найти большое количество применений:

function equal<T>(objA: T, objB: T): boolean {   if (Object.is(objA, objB)) {     return true   }    if (     typeof objA !== 'object' ||     objA === null ||     typeof objB !== 'object' ||     objB === null   ) {     return false   }    if (     (Array.isArray(objA) && !Array.isArray(objB)) ||     (Array.isArray(objB) && !Array.isArray(objA))   ) {     return false   }    if (objA instanceof Map && objB instanceof Map) {     if (objA.size !== objB.size) return false      for (const [key, value] of objA) {       if (!Object.is(value, objB.get(key))) {         return false       }     }     return true   }    if (objA instanceof Set && objB instanceof Set) {     if (objA.size !== objB.size) return false      for (const value of objA) {       if (!objB.has(value)) {         return false       }     }     return true   }    if (objA instanceof Date && objB instanceof Date) {     return Object.is(objA.getTime(), objA.getTime())   }    const keysA = Object.keys(objA)   if (keysA.length !== Object.keys(objB).length) {     return false   }    return keysA.every((key) => equal(objA[key as keyof T], objB[key as keyof T])) }

Надеюсь, вы узнали что-то новое и не зря потратили время.

The end.