Angular Academy · Pelajaran

Membuat SignalStore

Definisikan state dengan signalStore dan withState.

Pelajaran 1 dari 413 langkah

Membuat SignalStore adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Apa Itu SignalStore

NgRx SignalStore adalah solusi ringan untuk pengelolaan state yang dibangun di atas signal Angular. Anda menyusun store dari fitur seperti withState, withComputed, dan withMethods.

Instalasi

SignalStore tersedia dalam paket @ngrx/signals. Tambahkan paket tersebut ke proyek Angular Anda, lalu impor komponen pembangun yang diperlukan.

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

Factory signalStore

signalStore() mengembalikan class yang dapat diinjeksi. Teruskan fitur yang menjelaskan state dan perilakunya. Secara bawaan, store disediakan di root.

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

withState

withState(initial) menetapkan state awal. Setiap properti tingkat atas menjadi signal pada store, sehingga store.count adalah signal yang Anda panggil sebagai store.count().

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

Menginjeksi Store

Karena factory mengembalikan class yang dapat diinjeksi, Anda menginjeksi class tersebut seperti layanan apa pun dan membaca signal state-nya di template.

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

patchState

Perbarui state SignalStore dengan helper patchState. Helper ini menerima store serta objek state parsial atau fungsi pembaru, lalu menerapkannya secara imutabel.

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

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

Potongan State Sebagai Signal

Setiap kunci state disediakan sebagai signal tersendiri. Membaca satu potongan tidak membuat Anda bergantung pada potongan lain, dan template hanya diperbarui untuk potongan yang dibacanya.

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

Menentukan Tipe State

Tentukan tipe state secara eksplisit untuk field yang dapat bernilai null atau berupa array agar SignalStore menyimpulkan tipe signal yang benar. Gunakan cast as pada objek awal.

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

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

Disediakan Secara Lokal vs di Root

Abaikan providedIn untuk membuat store dengan cakupan komponen; tambahkan store tersebut ke providers milik komponen. Dengan begitu, setiap instans komponen memiliki state terisolasinya sendiri.

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

Menyusun Fitur

Kekuatan SignalStore terletak pada komposisi: cantumkan beberapa fitur dan fitur-fitur tersebut digabungkan menjadi satu store. Urutan penting karena fitur berikutnya dapat membaca fitur sebelumnya.

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

Tanpa Boilerplate

Tidak seperti NgRx bergaya Redux klasik (actions, reducers, effects, selectors), SignalStore menempatkan state dan logika secara bersamaan dalam satu store deklaratif dengan boilerplate yang jauh lebih sedikit.

Pemeriksaan Singkat

Periksa pemahaman dasar Anda tentang SignalStore.

Jawab di pelajaran interaktif

Ringkasan

Anda telah membuat SignalStore dengan signalStore() dan withState, membaca potongan state sebagai signal, memperbaruinya secara imutabel melalui patchState, serta memilih antara store yang disediakan di root dan store dengan cakupan komponen. Berikutnya: computed dan methods.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 38
Pelajaran: 144

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membuat SignalStore” gratis?

Ya — teks lengkap “Membuat SignalStore” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membuat SignalStore”?

Definisikan state dengan signalStore dan withState. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Membuat SignalStore” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy