Angular Academy · Pelajaran

Memperbarui State secara Imutabel

Terapkan pembaruan imutabel pada state signal.

Memperbarui State secara Imutabel adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Mengapa Imutabilitas

Sinyal mendeteksi perubahan berdasarkan referensi. Jika Anda mengubah array atau objek langsung pada tempatnya, referensinya tetap sama dan sinyal computed() yang bergantung padanya mungkin tidak dihitung ulang. Selalu hasilkan referensi baru.

Jebakan Mutasi

Menambahkan elemen ke array yang sudah ada akan mengubahnya tanpa mengubah referensi. Hindari cara ini.

// BAD: mutates in place, reference unchanged
this._items.update(list => { list.push(item); return list; });

Spread untuk Array

Buat array baru dengan operator spread agar referensinya berubah dan konsumen menjalankan ulang perhitungannya.

// GOOD: new array reference
this._items.update(list => [...list, item]);

Menghapus Item

Gunakan filter() yang mengembalikan array baru, sehingga array asli tetap tidak berubah.

removeItem(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

Memperbarui Satu Item

Gunakan map() untuk mengembalikan array baru, lalu sebarkan objek yang cocok ke salinan baru agar referensi di dalamnya juga berubah.

markDone(id: string) {
  this._items.update(list =>
    list.map(i => i.id === id ? { ...i, done: true } : i));
}

Spread untuk Objek

Untuk status berbentuk objek, sebarkan objek sebelumnya lalu timpa bidang yang berubah. Objek bertingkat juga memerlukan spread-nya sendiri.

private _profile = signal({ name: '', address: { city: '' } });

setCity(city: string) {
  this._profile.update(p => ({ ...p, address: { ...p.address, city } }));
}

set dengan Nilai Baru

Saat mengganti seluruh status, set() dengan objek baru secara alami bersifat imutabel karena Anda memberikan referensi baru.

reset() {
  this._profile.set({ name: '', address: { city: '' } });
}

Mengapa computed Bergantung Padanya

Karena model baca terhitung bergantung pada referensi sinyal, pembaruan imutabel menjamin model tersebut dihitung ulang. Mutasi yang mempertahankan referensi array yang sama dapat secara diam-diam membuat total dan hasil filter menjadi kedaluwarsa.

Pola Pembantu

Ekstrak fungsi pembantu murni yang kecil untuk transformasi umum agar metode store tetap mudah dibaca dan konsisten.

const upsert = (list: Item[], item: Item) =>
  list.some(i => i.id === item.id)
    ? list.map(i => i.id === item.id ? item : i)
    : [...list, item];

save(item: Item) { this._items.update(l => upsert(l, item)); }

Kewaspadaan terhadap Perenderan Bertingkat

Status yang sangat bertingkat memerlukan banyak spread. Jika pembaruan menjadi sulit, ratakan bentuk status atau pisahkan menjadi beberapa sinyal agar setiap pembaruan hanya menyentuh bagian kecil.

Imutabilitas Membantu Debugging

Karena setiap pembaruan menghasilkan referensi baru, Anda dapat membandingkan snapshot dari waktu ke waktu, mencatat state sebelumnya dan berikutnya, serta memahami perubahan tanpa mengkhawatirkan pengeditan tersembunyi secara langsung.

Pemeriksaan Singkat

Uji pemahaman Anda tentang pembaruan signal yang imutabel.

Ringkasan

Anda telah mempelajari pola pembaruan yang imutabel: spread untuk array dan objek, map/filter untuk pengeditan dan penghapusan, referensi baru melalui set, serta alasan kesetaraan referensi membuat imutabilitas penting bagi reaktivitas yang benar.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memperbarui State secara Imutabel” gratis?

Ya — teks lengkap “Memperbarui State secara Imutabel” 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 “Memperbarui State secara Imutabel”?

Terapkan pembaruan imutabel pada state signal. 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 3 dari 4.

Berapa lama pelajaran “Memperbarui State secara Imutabel” 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