Angular Academy · Pelajaran

Entitas dan Fitur Kustom

Kelola koleksi dengan withEntities.

Entitas dan Fitur Kustom adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Mengelola Koleksi

Daftar record (todos, users, produk) sangat umum digunakan sehingga NgRx menyediakan withEntities untuk mengelolanya dengan state ternormalisasi dan fungsi pembaru siap pakai.

withEntities

withEntities menyimpan item berdasarkan id dalam entityMap serta array ids yang berurutan, dan menyediakan signal computed entities yang berisi daftar tersebut.

import { withEntities } from '@ngrx/signals/entities';

export const TodoStore = signalStore(
  withEntities<Todo>()
);
// store.entities() -> Todo[]

Pembaruan Entitas

Gunakan helper pembaru bersama patchState: setAllEntities, addEntity, updateEntity, removeEntity. Helper tersebut menjaga konsistensi map dan urutan id.

import { addEntity, removeEntity, updateEntity } from '@ngrx/signals/entities';

patchState(store, addEntity({ id: '1', title: 'A', done: false }));
patchState(store, updateEntity({ id: '1', changes: { done: true } }));
patchState(store, removeEntity('1'));

Memuat Koleksi

Ganti seluruh koleksi setelah pengambilan data dengan setAllEntities, yang menormalisasi array menjadi map dan ids.

import { setAllEntities } from '@ngrx/signals/entities';

load: rxMethod<void>(pipe(
  switchMap(() => api.getTodos()),
  tap(todos => patchState(store, setAllEntities(todos)))
))

idKey Kustom

Jika pengenal entitas Anda bukan id, teruskan sebuah selector. Store kemudian menggunakan field tersebut sebagai kunci map.

withEntities<User>(); // expects user.id
// custom key:
patchState(store, addEntity(user, { selectId: (u: User) => u.uuid }));

Menurunkan Nilai dari Entitas

Gabungkan withEntities dengan withComputed untuk membangun model baca yang difilter atau dihitung berdasarkan koleksi.

withComputed(({ entities }) => ({
  remaining: computed(() => entities().filter(t => !t.done).length)
}))

Apa Itu Fitur Kustom

Fitur kustom adalah paket state, computed, dan methods yang dapat digunakan kembali serta ditambahkan ke banyak store. Buat fitur tersebut dengan signalStoreFeature.

import { signalStoreFeature, withState } from '@ngrx/signals';

export function withLoading() {
  return signalStoreFeature(
    withState({ loading: false })
  );
}

Menggunakan Kembali Fitur

Tambahkan fitur kustom Anda ke store mana pun seperti fitur bawaan. Inilah cara membagikan perhatian lintas fungsi seperti tanda pemuatan atau pagination.

export const TodoStore = signalStore(
  withLoading(),
  withEntities<Todo>()
);
// store.loading() now exists

Fitur dengan Methods

Fitur kustom dapat menyertakan withMethods untuk menyediakan perilaku yang dapat digunakan kembali, seperti helper setLoading.

export function withLoading() {
  return signalStoreFeature(
    withState({ loading: false }),
    withMethods((store) => ({
      setLoading(loading: boolean) { patchState(store, { loading }); }
    }))
  );
}

Dapat Dikomposisikan

Karena fitur hanyalah fungsi yang mengembalikan deskriptor fitur, Anda dapat menumpuk banyak fitur: withLoading(), withEntities(), serta state khusus aplikasi, semuanya digabungkan menjadi satu store bertipe kuat.

Fitur Generik

Buat fitur yang generik agar dapat digunakan pada berbagai jenis entitas. Parameter tipe diteruskan sehingga konsumen tetap mendapatkan keamanan tipe penuh.

export function withSelected<T>() {
  return signalStoreFeature(
    withState({ selected: null as T | null })
  );
}

Pemeriksaan Singkat

Periksa pengetahuan Anda tentang entitas dan fitur.

Rangkuman

Anda telah mengelola koleksi dengan withEntities (peta ternormalisasi, pembantu pembaruan, model baca turunan) dan membuat bundel signalStoreFeature yang dapat digunakan kembali dan generik untuk berbagi status, hasil komputasi, serta metode di berbagai penyimpanan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Entitas dan Fitur Kustom” gratis?

Ya — teks lengkap “Entitas dan Fitur Kustom” 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 “Entitas dan Fitur Kustom”?

Kelola koleksi dengan withEntities. 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 4 dari 4.

Berapa lama pelajaran “Entitas dan Fitur Kustom” 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