การอัปเดตสถานะแบบไม่เปลี่ยนแปลงค่าเดิม
ใช้การอัปเดตแบบไม่เปลี่ยนแปลงค่าเดิมกับสถานะสัญญาณ
การอัปเดตสถานะแบบไม่เปลี่ยนแปลงค่าเดิม เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดจึงไม่เปลี่ยนแปลงข้อมูลเดิม
สัญญาณตรวจจับการเปลี่ยนแปลงจากการอ้างอิง หากคุณเปลี่ยนอาร์เรย์หรือออบเจ็กต์โดยตรง การอ้างอิงจะยังเหมือนเดิม และสัญญาณ computed() ที่ขึ้นต่อกันอาจไม่คำนวณใหม่ ควรสร้างการอ้างอิงใหม่เสมอ
กับดักของการเปลี่ยนแปลงข้อมูลเดิม
การใช้ push กับอาร์เรย์เดิมจะเปลี่ยนข้อมูลโดยไม่เปลี่ยนการอ้างอิง ควรหลีกเลี่ยงวิธีนี้
// BAD: mutates in place, reference unchanged
this._items.update(list => { list.push(item); return list; });ใช้ Spread กับอาร์เรย์
สร้างอาร์เรย์ใหม่ด้วยตัวดำเนินการ spread เพื่อให้การอ้างอิงเปลี่ยนและผู้ใช้ทำงานอีกครั้ง
// GOOD: new array reference
this._items.update(list => [...list, item]);การนำรายการออก
ใช้ filter() ซึ่งส่งคืนอาร์เรย์ใหม่เอี่ยมและไม่เปลี่ยนแปลงอาร์เรย์เดิม
removeItem(id: string) {
this._items.update(list => list.filter(i => i.id !== id));
}การอัปเดตรายการหนึ่งรายการ
ใช้ map() เพื่อส่งคืนอาร์เรย์ใหม่ โดยใช้ spread ออบเจ็กต์ที่ตรงเงื่อนไขลงในสำเนาใหม่ เพื่อให้การอ้างอิงภายในเปลี่ยนไปด้วย
markDone(id: string) {
this._items.update(list =>
list.map(i => i.id === id ? { ...i, done: true } : i));
}ใช้ Spread กับออบเจ็กต์
สำหรับสถานะที่เป็นออบเจ็กต์ ให้ใช้ spread ออบเจ็กต์ก่อนหน้าแล้วเขียนทับฟิลด์ที่เปลี่ยนแปลง ออบเจ็กต์ซ้อนกันก็ต้องใช้ spread ของตนเองเช่นกัน
private _profile = signal({ name: '', address: { city: '' } });
setCity(city: string) {
this._profile.update(p => ({ ...p, address: { ...p.address, city } }));
}set ด้วยค่าใหม่
เมื่อแทนที่สถานะทั้งหมด set() ด้วยออบเจ็กต์ใหม่จะไม่เปลี่ยนแปลงข้อมูลเดิมโดยธรรมชาติ เพราะคุณส่งการอ้างอิงใหม่เข้าไป
reset() {
this._profile.set({ name: '', address: { city: '' } });
}เหตุใด computed จึงขึ้นต่อกัน
เนื่องจากโมเดลการอ่านที่คำนวณต่อยอดขึ้นต่อการอ้างอิงของสัญญาณ การอัปเดตโดยไม่เปลี่ยนแปลงข้อมูลเดิมจึงรับประกันว่าจะคำนวณใหม่ หากเปลี่ยนข้อมูลแต่ยังคงการอ้างอิงอาร์เรย์เดิม ยอดรวมและผลการกรองอาจค้างโดยไม่แสดงข้อผิดพลาด
รูปแบบตัวช่วย
แยกตัวช่วยขนาดเล็กที่บริสุทธิ์สำหรับการแปลงข้อมูลที่ใช้บ่อย เพื่อให้เมธอดของคลังอ่านง่ายและสอดคล้องกัน
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)); }ข้อควรระวังเรื่องการซ้อนลึก
สถานะที่ซ้อนกันลึกทำให้ต้องใช้ spread หลายชั้น หากการอัปเดตยุ่งยากเกินไป ให้ทำโครงสร้างสถานะให้แบนลง หรือแยกเป็นสัญญาณหลายตัว เพื่อให้การอัปเดตแต่ละครั้งแตะเพียงส่วนเล็ก ๆ
ความไม่เปลี่ยนแปลงช่วยในการแก้ไขข้อบกพร่อง
เนื่องจากการอัปเดตแต่ละครั้งสร้างการอ้างอิงใหม่ คุณจึงสามารถเปรียบเทียบสแนปชอตตามช่วงเวลา บันทึกสถานะก่อนหน้าเทียบกับสถานะถัดไป และวิเคราะห์การเปลี่ยนแปลงได้โดยไม่ต้องกังวลกับการแก้ไขภายในที่ซ่อนอยู่
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจเกี่ยวกับการอัปเดตสัญญาณแบบไม่เปลี่ยนแปลง
สรุปทบทวน
คุณได้เรียนรู้รูปแบบการอัปเดตแบบไม่เปลี่ยนแปลง ได้แก่ การใช้ spread กับอาร์เรย์และออบเจ็กต์ การใช้ map/filter เพื่อแก้ไขและลบรายการ การสร้างการอ้างอิงใหม่ผ่าน set และเหตุผลที่ความเท่าเทียมกันของการอ้างอิงทำให้ความไม่เปลี่ยนแปลงเป็นสิ่งจำเป็นสำหรับการตอบสนองที่ถูกต้อง
คำถามที่พบบ่อย
บทเรียน “การอัปเดตสถานะแบบไม่เปลี่ยนแปลงค่าเดิม” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การอัปเดตสถานะแบบไม่เปลี่ยนแปลงค่าเดิม” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การอัปเดตสถานะแบบไม่เปลี่ยนแปลงค่าเดิม”
ใช้การอัปเดตแบบไม่เปลี่ยนแปลงค่าเดิมกับสถานะสัญญาณ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การอัปเดตสถานะแบบไม่เปลี่ยนแปลงค่าเดิม” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- Signal Stores ในบริการ
- การอนุมานสถานะด้วย computed
- การอัปเดตสถานะแบบไม่เปลี่ยนแปลงค่าเดิม
- การเชื่อมต่อ Signals และ RxJS