Skip to content

Latest commit

 

History

History
111 lines (70 loc) · 5.83 KB

RU.md

File metadata and controls

111 lines (70 loc) · 5.83 KB
Raw

@mntm/precoil

Реактивная событийно-ориентированная библиотека управления состоянием.

Вдохновлена Recoil

Мотивация

Из соображений совместимости и простоты лучше всего использовать встроенные возможности управления состоянием, а не внешнее глобальное состояние. Но у популярных фреймворков, таких как React, есть определенные ограничения:

  • Состояние компонента может быть передано только путем прокидывания его к общему предку, но это может быть затратным и неудобным, например, из-за огромного дерева, которое к тому же затем нужно будет перерисовать.

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

Оба эти фактора затрудняют разделение кода на вершины дерева (где лежит состояние) и листья дерева (где используется состояние).

Мы хотим улучшить это, сохраняя при этом как API, так и семантику и поведение как можно более нативным.

Концепты

Атомы

Атомы - единицы состояния. При обновлении атома каждый подписанный компонент получает новое значение. Их можно создавать и во время исполнения. Если один и тот же атом используется из нескольких компонентов, все эти компоненты имеют общее состояние.

const sizeAtom = atom(14);

console.log(sizeAtom.get()) // log: 14
console.log(sizeAtom.set(15)) // log: 15

Хранилище

Хранилище - источник состояния атомов. В нем хранятся актуальные состояния всех созданных атомов.

console.log(store); // log: { "1lot": Atom }

Обновитель

Обновитель - классический EventBus. Служит для организации коммуникаций (обмена данными) при обновлении состояния атомов между не связанными частями приложения.

updater.on(sizeAtom.key, console.log);

sizeAtom.set(16); // log: 16

Атомы

  • useAtomState: Используйте этот хук, если вы хотите и читать, и обновлять состояние атома. Обновление состояния вызывает перерисовку.

  • useAtomValue: Используйте этот хук, если вы хотите только читать состояние атома. Обновление состояния вызывает перерисовку.

  • useSetAtomState: Используйте этот хук, если вы хотите только обновлять состояние атома. Внешнее обновление состояния не вызывает перерисовки.

  • useAtomConst: Используйте этот хук, если вы хотите только единожды прочитать состояние атома. Внешнее обновление состояния не вызывает перерисовки и не обновляет значение.

Селекторы

  • useAtomSelector: Используйте этот хук, если вы хотите использовать селектор. Обновление состояния или самого селектора вызывает пересчет состояния. Обновление пересчитанного состояния вызывает перерисовку.

  • useAtomSelectorConst: Используйте этот хук, если вы хотите только единожды посчитать состояние с помощью селектора. Внешнее обновление состояния не вызывает перерисовки и не обновляет значение.

API

Основные

function atom<T>(
  defaultValue: T,
  key?: string
): Atom<T>
  • defaultValue - Начальное состояние атома.
  • key - Уникальная строка, используемая для внутренней идентификации атома. Эта строка должна быть уникальной по отношению к другим атомам во всем приложении. Имеет генерацию по-умолчанию.

Внутренние

const store: Record<sting, unknown>;
const updater: Emitter;

See: mitt

declare function getter<T>(
  key: string
): () => T;
  • key - Ключ атома по которому будет извлечено состояние из хранилища
declare function setter<T>(
  key: string
): (value: AtomValOrUpdater<T>) => T;
  • key - Ключ атома по которому будет обновлено состояние в хранилище
  • value - Новое состояние или функция обновления состояния атома