SignalStore Oluşturma
Durumu signalStore ve withState ile tanımlayın
SignalStore Oluşturma, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.
SignalStore Nedir
NgRx SignalStore, Angular sinyalleri üzerine kurulmuş hafif bir durum yönetimi çözümüdür. Bir mağazayı özellikler olarak adlandırılan withState, withComputed ve withMethods gibi parçaları birleştirerek oluşturursunuz.
Kurulum
SignalStore, @ngrx/signals paketinde bulunur. Paketi Angular projenize ekleyin ve ardından ihtiyaç duyduğunuz yapı taşlarını içe aktarın.
// terminal
// ng add @ngrx/signals
import { signalStore, withState } from '@ngrx/signals';signalStore Fabrikası
signalStore() enjekte edilebilir bir sınıf döndürür. Durumu ve davranışı açıklayan özellikleri iletin. Varsayılan olarak mağaza kök düzeyinde sağlanır.
export const CounterStore = signalStore(
{ providedIn: 'root' },
withState({ count: 0 })
);withState
withState(initial) başlangıç durumunu tanımlar. En üst düzeydeki her özellik mağazada bir sinyal olur; bu nedenle store.count, store.count() şeklinde çağırdığınız bir sinyaldir.
withState({
count: 0,
user: null as User | null,
items: [] as Item[]
});Mağazayı Enjekte Etme
Fabrika enjekte edilebilir bir sınıf döndürdüğü için onu herhangi bir hizmet gibi enjekte edebilir ve durum sinyallerini şablonlarda okuyabilirsiniz.
@Component({
template: '<p>{{ store.count() }}</p>'
})
export class CounterComponent {
store = inject(CounterStore);
}patchState
SignalStore durumunu patchState yardımcısıyla güncelleyin. Bu yardımcı, mağazayı ve kısmi durum nesnelerini ya da güncelleyici işlevleri kabul eder ve bunları değişmez biçimde uygular.
import { patchState } from '@ngrx/signals';
patchState(store, { count: 5 });
patchState(store, (s) => ({ count: s.count + 1 }));Sinyaller Olarak Durum Dilimleri
Her durum anahtarı ayrı bir sinyal olarak sunulur. Bir dilimi okumak sizi diğerlerine bağlamaz ve şablonlar yalnızca okudukları dilimler için güncellenir.
// given withState({ count: 0, name: '' })
store.count(); // number signal
store.name(); // string signalDurumu Türlendirme
SignalStore'un doğru sinyal türlerini çıkarsayabilmesi için null olabilen veya dizi türündeki alanlarda durumunuzu açıkça türlendirin. Başlangıç nesnesinde as dönüştürmelerini kullanın.
type State = { user: User | null; loading: boolean };
withState<State>({ user: null, loading: false });Yerel ve Kök Düzeyinde Sağlanan
providedIn ifadesini kaldırarak bileşen kapsamlı bir mağaza oluşturun; mağazayı bileşenin providers listesine ekleyin. Böylece her bileşen örneği kendi yalıtılmış durumuna sahip olur.
@Component({
providers: [CounterStore]
})
export class WidgetComponent {
store = inject(CounterStore);
}Özellikleri Birleştirme
SignalStore'un gücü birleştirmeden gelir: birden fazla özelliği listeleyin; bunlar tek bir mağazada birleşir. Sıra önemlidir, çünkü sonraki özellikler önceki özellikleri okuyabilir.
export const TodoStore = signalStore(
withState({ todos: [] as Todo[] })
// withComputed(...), withMethods(...) added next
);Tekrarlayan Kod Yok
Klasik Redux tarzı NgRx'nin (eylemler, azaltıcılar, etkiler ve seçiciler) aksine SignalStore, durumu ve mantığı çok daha az tekrarlayan kodla tek bir bildirimsel mağazada bir arada tutar.
Hızlı Kontrol
SignalStore temelleri hakkındaki bilginizi kontrol edin.
Özet
signalStore() ve withState ile bir SignalStore oluşturdunuz, durum dilimlerini sinyal olarak okudunuz, bunları patchState aracılığıyla değişmez biçimde güncellediniz ve kök düzeyinde sağlanan mağazalar ile bileşen kapsamlı mağazalar arasında seçim yaptınız. Sırada: hesaplanmış değerler ve yöntemler.
Sıkça Sorulan Sorular
“SignalStore Oluşturma” dersi ücretsiz mi?
Evet — “SignalStore Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.
“SignalStore Oluşturma” dersinde ne öğreneceğim?
Durumu signalStore ve withState ile tanımlayın Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Angular Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“SignalStore Oluşturma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- SignalStore Oluşturma
- Hesaplanan Durum ve Yöntemler
- Eş Zamanlı Olmayan İşlemler için rxMethod
- Varlıklar ve Özel Özellikler