SignalState утилита
SignalState — это легкая утилита для маленького стейта. Это не SignalStore. А просто утилита, которая позволяет превратить все свойства объекта рекурсивно в сигналы и удобно их изменять.
readonly person = signalState<Person>({
id: 1,
name: 'John Doe',
address: {
street: '123 Main St',
city: 'Anytown',
state: 'CA',
}
});
readonly person = signalState<Person>({
id: 1,
name: 'John Doe',
address: {
street: '123 Main St',
city: 'Anytown',
state: 'CA',
}
});
readonly person = signalState<Person>({
id: 1,
name: 'John Doe',
address: {
street: '123 Main St',
city: 'Anytown',
state: 'CA',
}
});
Теперь, обращаясь к любому свойству person (помещая его в переменную) мы получаем сигнал, который создается «на лету» (не предварительно все становится сигналами). Такой себе аналог
computed
computed, можно сказать.
readonly address = this.person.address; //signal
readonly street = this.person.address.street; //signal
readonly address = this.person.address; //signal
readonly street = this.person.address.street; //signal
readonly address = this.person.address; //signal readonly street = this.person.address.street; //signal
Способы обновления
Вместо методов
set
setили update
update, как у обычных сигналов, здесь у нас есть метод patchState
patchState.
Первым параметром передаем сам объект (signalState) для обновления, а вторым — объект с обновленными полями либо метод, принимающий предыдущее значение.
setName() {
patchState(this.person, {
name: 'Jane Doe'
});
}
updateId() {
patchState(this.person, p => ({
id: p.id + 1,
}));
}
updateAddress() {
patchState(this.person, p => ({
address: {
...p.address,
street: '456 Elm St'
}
}));
}
setName() {
patchState(this.person, {
name: 'Jane Doe'
});
}
updateId() {
patchState(this.person, p => ({
id: p.id + 1,
}));
}
updateAddress() {
patchState(this.person, p => ({
address: {
...p.address,
street: '456 Elm St'
}
}));
}
setName() {
patchState(this.person, {
name: 'Jane Doe'
});
}
updateId() {
patchState(this.person, p => ({
id: p.id + 1,
}));
}
updateAddress() {
patchState(this.person, p => ({
address: {
...p.address,
street: '456 Elm St'
}
}));
}