Atom

import { atom, Atom } from "@dpg.gg/core/store";

Overview

Atom представляет собой обертку над данными для управления и остлеживания состояния.

const num = atom(1); // Hook for new Atom(1);
// Изменение значения
num.set(2);
// Получение актуального значения
num.get();
// Подписка на изменения
num.on("change", console.log);

Определенно можно использовать Proxy для подобных отслеживаний, и мы не имеем ничего против данного подхода, однако мы попытались максимально упростить и унифицировать данный процесс для ускорения написания кода.

Как вы могли заметить выше, можно создавать Atom двумя способами atom() и new Atom(). Они ни чем не отличаются, и хуковая реализация atom(...) под капотом создает все тот же new Atom(...), т.е. является алиасом

Arguments

initalValue

• Type: any

При инициализации атома можно передавать начальное значение, которое не будет вызывать изменения

atom(8);
new Atom("text");

options

• Type: { readonly?: boolean; }

Объект с одной доступной опцией readonly. Данная опция позволяет отключить возможность вснесения изменений в данный store через метод set-value

const num = atom(8, { readonly: true });
num.set(9); // throw Error

Methods

get()

Возвращает актуальное значение атома.

const num = atom(8);
console.log(num.get()); // 8
num.set(num.get() + 1);
console.log(num.get()); // 9

set(value)

• Arg value: any

Присвоение нового значения атому. В случае если данные изменились, будет вызвано событие change чтобы уведомить подписчиков

const num = atom(8);
console.log(num.get()); // 8
num.set(num.get() + 1); 
console.log(num.get()); // 9

update(fn)

• Arg fn: Updater<T> = (value: T) => T

Работает аналогично методу set, однако в качестве значения принимает функцию, которая позволяет взаимодействовать с текущим значением атома. Возвращаемое значение fn будет присвоено

const page = atom(1);
document.querySelector(".next-page").addEventListener("click", () => {
	page.update((n) => n + 1); 
});
document.querySelector(".prev-page").addEventListener("click", () => {
	page.update((n) => (n > 1 ? n - 1 : 1)); 
});

once, on, off, emit

Это методы прослушивателя события, подробнее можно посмотреть на соответствующей странице EventEmitter

Events

change

• Arg cb: (newVal: T, oldVal: T)

Событие вызывается каждый раз, когда вносятся изменения в atom через методы set и update.

Это событие необходимо для подписки на изменения атома.

const num = atom(1); // Hook for new Atom(1);
num.on("change", console.log); // return 2, 1 at single row after set
num.set(2);