Angular Academy · Урок

Создание SignalStore

Определяйте состояние с помощью signalStore и withState

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

Что такое SignalStore

SignalStore NgRx — это лёгкое решение для управления состоянием, построенное на сигналах Angular. Вы собираете хранилище из функциональных возможностей, таких как withState, withComputed и withMethods.

Установка

SignalStore находится в пакете @ngrx/signals. Добавьте его в проект Angular, а затем импортируйте необходимые строительные блоки.

// terminal
// ng add @ngrx/signals
import { signalStore, withState } from '@ngrx/signals';

Фабрика signalStore

signalStore() возвращает класс, доступный для внедрения. Передайте функциональные возможности, описывающие состояние и поведение. По умолчанию хранилище предоставляется в корневом контейнере.

export const CounterStore = signalStore(
  { providedIn: 'root' },
  withState({ count: 0 })
);

withState

withState(initial) задаёт начальное состояние. Каждое свойство верхнего уровня становится сигналом хранилища, поэтому store.count — это сигнал, который вызывается как store.count().

withState({
  count: 0,
  user: null as User | null,
  items: [] as Item[]
});

Внедрение хранилища

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

@Component({
  template: '<p>{{ store.count() }}</p>'
})
export class CounterComponent {
  store = inject(CounterStore);
}

patchState

Обновляйте состояние SignalStore с помощью вспомогательного средства patchState. Оно принимает хранилище и частичные объекты состояния или функции обновления и применяет их неизменяемым способом.

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

patchState(store, { count: 5 });
patchState(store, (s) => ({ count: s.count + 1 }));

Срезы состояния как сигналы

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

// given withState({ count: 0, name: '' })
store.count();  // number signal
store.name();   // string signal

Типизация состояния

Явно задавайте тип состояния для полей, допускающих значение null, и массивов, чтобы SignalStore выводил корректные типы сигналов. Используйте приведения с помощью as в начальном объекте.

type State = { user: User | null; loading: boolean };

withState<State>({ user: null, loading: false });

Локальное и корневое предоставление

Не указывайте providedIn, чтобы сделать хранилище ограниченным областью компонента; добавьте хранилище в providers компонента. Так каждый экземпляр компонента получает собственное изолированное состояние.

@Component({
  providers: [CounterStore]
})
export class WidgetComponent {
  store = inject(CounterStore);
}

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

Сила SignalStore — в составлении: перечислите несколько функциональных возможностей, и они объединятся в одно хранилище. Порядок важен, поскольку последующие возможности могут читать предыдущие.

export const TodoStore = signalStore(
  withState({ todos: [] as Todo[] })
  // withComputed(...), withMethods(...) added next
);

Без шаблонного кода

В отличие от классического NgRx в стиле Redux (действия, редукторы, эффекты, селекторы), SignalStore размещает состояние и логику вместе в одном декларативном хранилище, требующем гораздо меньше шаблонного кода.

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

Проверьте свои знания основ SignalStore.

Итоги

Вы создали SignalStore с помощью signalStore() и withState, читали срезы состояния как сигналы, неизменяемым способом обновляли их через patchState и выбирали между хранилищами, предоставляемыми в корневом контейнере и ограниченными областью компонента. Далее: вычисляемые значения и методы.

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

Урок «Создание SignalStore» бесплатный?

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

Чему я научусь в уроке «Создание SignalStore»?

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

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

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

Сколько времени занимает урок «Создание SignalStore»?

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

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

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

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

← Назад к Angular Academy