Angular Academy · Урок

Вычисляемые значения и методы

Добавляйте производное состояние и методы обновления

«Вычисляемые значения и методы» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

За пределами исходного состояния

Полезное хранилище предоставляет производные значения и поведение. SignalStore добавляет их с помощью withComputed для моделей чтения и withMethods для действий.

withComputed

withComputed получает текущие сигналы хранилища и возвращает объект с сигналами computed(). Они запоминают результаты и автоматически обновляются, как любые вычисляемые значения.

import { signalStore, withState, withComputed } from '@ngrx/signals';
import { computed } from '@angular/core';

export const CartStore = signalStore(
  withState({ items: [] as Item[] }),
  withComputed(({ items }) => ({
    count: computed(() => items().length),
    total: computed(() => items().reduce((s, i) => s + i.price, 0))
  }))
);

Чтение вычисляемых значений

Вычисляемые элементы появляются в хранилище так же, как состояние. Читайте store.count() и store.total() в шаблонах; они обновляются при изменении items.

template: 'Items: {{ store.count() }} — {{ store.total() }}'

withMethods

withMethods получает хранилище и возвращает именованные методы. Внутри используйте patchState, чтобы обновлять состояние неизменяемым способом.

import { withMethods, patchState } from '@ngrx/signals';

withMethods((store) => ({
  add(item: Item) {
    patchState(store, (s) => ({ items: [...s.items, item] }));
  },
  clear() {
    patchState(store, { items: [] });
  }
}))

Методы тоже читают состояние

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

withMethods((store) => ({
  toggle(id: string) {
    const exists = store.items().some(i => i.id === id);
    if (!exists) return;
    patchState(store, (s) => ({
      items: s.items.map(i => i.id === id ? { ...i, on: !i.on } : i)
    }));
  }
}))

Методы могут использовать computed

Поскольку withComputed выполняется перед withMethods, методы могут читать вычисляемые элементы, уже предоставленные хранилищем.

withMethods((store) => ({
  checkout() {
    if (store.total() === 0) return;
    // proceed...
  }
}))

Внедрение зависимостей

withMethods выполняется в контексте внедрения, поэтому внутри него можно вызвать inject(), чтобы получить такие службы, как HttpClient, или маршрутизатор.

withMethods((store, http = inject(HttpClient)) => ({
  load() {
    http.get<Item[]>('/api/items')
      .subscribe(items => patchState(store, { items }));
  }
}))

Порядок функциональных возможностей

Функциональные возможности составляются сверху вниз. Сначала разместите withState, затем withComputed (читает состояние), а потом withMethods (читает состояние и вычисляемые значения). При обратном порядке возникают ошибки типов.

Инкапсуляция

Компоненты вызывают store.add(item) или читают store.total(). Они никогда не вызывают patchState напрямую, поэтому вся логика изменения состояния остаётся внутри хранилища.

Чистые вычисления, методы с побочными эффектами

Функции withComputed должны быть чистыми (только получать производные значения). Размещайте побочные эффекты, такие как HTTP-запросы или навигация, внутри withMethods.

Тестирование методов

SignalStores — это классы, доступные для внедрения. В тестах предоставьте хранилище через TestBed, вызовите метод, а затем синхронно проверьте состояние и вычисляемые сигналы.

const store = TestBed.inject(CartStore);
store.add({ id: '1', price: 10 });
expect(store.count()).toBe(1);
expect(store.total()).toBe(10);

Быстрая проверка

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

Итоги

Вы расширили SignalStore с помощью withComputed для мемоизированных моделей чтения и withMethods для инкапсулированных действий, использующих patchState и внедрённые службы. Порядок функциональных возможностей гарантирует, что каждый слой может читать предыдущие.

Часто задаваемые вопросы

Урок «Вычисляемые значения и методы» бесплатный?

Да — полный текст урока «Вычисляемые значения и методы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Вычисляемые значения и методы»?

Добавляйте производное состояние и методы обновления Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Вычисляемые значения и методы»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy