Angular Academy · Pelajaran

Mencipta SignalStore

Takrifkan keadaan dengan signalStore dan withState.

Pelajaran 1 daripada 413 langkah

Mencipta SignalStore ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah SignalStore

SignalStore NgRx ialah penyelesaian pengurusan keadaan yang ringan dan dibina berasaskan isyarat Angular. Anda menggubah gedung daripada ciri seperti withState, withComputed dan withMethods.

Pemasangan

SignalStore berada dalam pakej @ngrx/signals. Tambahkannya pada projek Angular anda, kemudian import blok binaan yang diperlukan.

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

Kilang signalStore

signalStore() mengembalikan kelas yang boleh disuntik. Hantarkan ciri yang menerangkan keadaan dan tingkah lakunya. Secara lalai, gedung disediakan pada akar.

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

withState

withState(initial) mentakrifkan keadaan awal. Setiap sifat peringkat teratas menjadi isyarat pada gedung, jadi store.count ialah isyarat yang dipanggil sebagai store.count().

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

Menyuntik Gedung

Oleh sebab kilang mengembalikan kelas yang boleh disuntik, anda menyuntikkannya seperti mana-mana perkhidmatan dan membaca isyarat keadaannya dalam templat.

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

patchState

Kemas kini keadaan SignalStore dengan pembantu patchState. Pembantu ini menerima gedung bersama objek keadaan separa atau fungsi pengemas kini, lalu menggunakannya secara tidak boleh ubah.

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

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

Belahan Keadaan Sebagai Isyarat

Setiap kunci keadaan didedahkan sebagai isyarat individu. Membaca satu belahan tidak mengikat anda pada belahan lain, dan templat hanya dikemas kini untuk belahan yang dibacanya.

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

Menaip Keadaan

Taipkan keadaan anda secara jelas untuk medan yang boleh kosong atau berupa tatasusunan supaya SignalStore membuat inferens jenis isyarat yang betul. Gunakan penukaran as dalam objek awal.

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

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

Disediakan Secara Setempat berbanding Akar

Jangan sertakan providedIn untuk menjadikan gedung berskop komponen; tambahkan gedung pada providers komponen. Dengan ini, setiap tika komponen mempunyai keadaan terpencilnya sendiri.

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

Menggubah Ciri

Kekuatan SignalStore terletak pada gubahan: senaraikan beberapa ciri dan semuanya digabungkan menjadi satu gedung. Susunan penting kerana ciri kemudian boleh membaca ciri terdahulu.

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

Tanpa Kod Remeh

Tidak seperti NgRx gaya Redux klasik (tindakan, pengurang, kesan dan pemilih), SignalStore meletakkan keadaan dan logik bersama dalam satu gedung deklaratif dengan jauh kurang kod remeh.

Semakan Pantas

Semak asas SignalStore anda.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mencipta SignalStore dengan signalStore() dan withState, membaca belahan keadaan sebagai isyarat, mengemas kininya secara tidak boleh ubah melalui patchState, serta memilih antara gedung yang disediakan pada akar dan gedung berskop komponen. Seterusnya: nilai terkomput dan kaedah.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 38
Pelajaran: 144

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mencipta SignalStore” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Mencipta SignalStore”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mencipta SignalStore”?

Takrifkan keadaan dengan signalStore dan withState. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Mencipta SignalStore” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy