Skip to content

useAtoms.ts

Назначение файла

Модуль предоставляет хук useAtoms(), который читает несколько атомов как один объект и возвращает их распакованные значения.

Общая информация

useAtoms() полезен для компонентов и представлений, которые работают с несколькими состояниями одновременно, например с viewModel.state. Вместо отдельного вызова useAtom() для каждого поля хук принимает объект атомов и возвращает объект значений той же формы.

Концептуальная архитектура

Внутренне модуль:

  1. Нормализует undefined к пустому объекту.
  2. Создает вычисляемый атом через compute(), который читает каждое поле из переданного объекта атомов.
  3. Использует objectEquals как стратегию сравнения, чтобы не отдавать новый объект без фактического изменения значений.
  4. Делегирует подписку и управление жизненным циклом в useAtom().

Такой подход сохраняет единый источник реактивности и уменьшает количество ручного кода в React-компонентах.

Описание публичного API

useAtoms(): Record<string, never>

  • При вызове без аргументов возвращает пустой объект.

useAtoms<TSourceAtoms>(sources: TSourceAtoms): TResult

  • sources: объект, где каждое поле является Atom<unknown>.
  • Возвращает объект той же структуры, но вместо атомов содержит их текущие значения.
  • Перерендеривает компонент, когда меняется хотя бы одно из наблюдаемых значений.

Примеры использования

tsx
import React from 'react';
import { atom } from '@nrgyjs/core';
import { useAtoms } from '@nrgyjs/react';

const firstName = atom('Ada');
const lastName = atom('Lovelace');

export function UserCard() {
  const { firstName: first, lastName: last } = useAtoms({
    firstName,
    lastName,
  });

  return <span>{first} {last}</span>;
}