เอนทิตีและฟีเจอร์กำหนดเอง
จัดการคอลเลกชันด้วย withEntities
เอนทิตีและฟีเจอร์กำหนดเอง เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การจัดการชุดข้อมูล
รายการระเบียน (สิ่งที่ต้องทำ ผู้ใช้ ผลิตภัณฑ์) พบได้บ่อยมาก จน NgRx มี withEntities สำหรับจัดการด้วยสถานะที่ทำให้เป็นมาตรฐานและฟังก์ชันอัปเดตที่พร้อมใช้
withEntities
withEntities จัดเก็บรายการโดยใช้รหัสใน entityMap พร้อมอาร์เรย์ ids ที่เรียงลำดับ และเปิดเผยสัญญาณ computed entities ซึ่งเป็นรายการทั้งหมด
import { withEntities } from '@ngrx/signals/entities';
export const TodoStore = signalStore(
withEntities<Todo>()
);
// store.entities() -> Todo[]ตัวอัปเดตเอนทิตี
ใช้ตัวช่วยอัปเดตร่วมกับ patchState: setAllEntities, addEntity, updateEntity, removeEntity ตัวช่วยเหล่านี้ทำให้แผนที่และลำดับรหัสสอดคล้องกัน
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'));การโหลดชุดข้อมูล
แทนที่ชุดข้อมูลทั้งหมดหลังจากดึงข้อมูลด้วย setAllEntities ซึ่งจะทำให้อาร์เรย์เป็นมาตรฐานลงในแผนที่และรหัส
import { setAllEntities } from '@ngrx/signals/entities';
load: rxMethod<void>(pipe(
switchMap(() => api.getTodos()),
tap(todos => patchState(store, setAllEntities(todos)))
))คีย์ idKey แบบกำหนดเอง
หากตัวระบุของเอนทิตีไม่ใช่ id ให้ส่งตัวเลือก ตัว store จะใช้ฟิลด์นั้นเป็นคีย์ของแผนที่
withEntities<User>(); // expects user.id
// custom key:
patchState(store, addEntity(user, { selectId: (u: User) => u.uuid }));การสร้างค่าจากเอนทิตี
รวม withEntities กับ withComputed เพื่อสร้างโมเดลข้อมูลสำหรับอ่านที่กรองหรือนับจำนวนจากชุดข้อมูล
withComputed(({ entities }) => ({
remaining: computed(() => entities().filter(t => !t.done).length)
}))ฟีเจอร์แบบกำหนดเองคืออะไร
ฟีเจอร์แบบกำหนดเองคือชุดสถานะ computed และ methods ที่นำกลับมาใช้ใหม่ได้ และนำไปใส่ใน store หลายรายการได้ สร้างฟีเจอร์ด้วย signalStoreFeature
import { signalStoreFeature, withState } from '@ngrx/signals';
export function withLoading() {
return signalStoreFeature(
withState({ loading: false })
);
}การนำฟีเจอร์กลับมาใช้ใหม่
เพิ่มฟีเจอร์แบบกำหนดเองลงใน store ใดก็ได้เช่นเดียวกับฟีเจอร์ในตัว นี่คือวิธีแชร์ข้อกังวลร่วม เช่น แฟล็กการโหลดหรือการแบ่งหน้า
export const TodoStore = signalStore(
withLoading(),
withEntities<Todo>()
);
// store.loading() now existsฟีเจอร์ที่มีเมธอด
ฟีเจอร์แบบกำหนดเองสามารถมี withMethods เพื่อเปิดเผยพฤติกรรมที่นำกลับมาใช้ใหม่ได้ เช่น ตัวช่วย setLoading
export function withLoading() {
return signalStoreFeature(
withState({ loading: false }),
withMethods((store) => ({
setLoading(loading: boolean) { patchState(store, { loading }); }
}))
);
}ความสามารถในการประกอบ
เนื่องจากฟีเจอร์เป็นเพียงฟังก์ชันที่ส่งคืนตัวบอกฟีเจอร์ คุณจึงสามารถเรียงซ้อนหลายรายการได้: withLoading(), withEntities() รวมถึงสถานะเฉพาะของแอป ทั้งหมดจะถูกรวมเป็น store เดียวที่มีชนิดข้อมูลชัดเจน
ฟีเจอร์แบบทั่วไป
ทำให้คุณลักษณะทำงานได้กับชนิดของเอนทิตีที่หลากหลาย โดยพารามิเตอร์ชนิดข้อมูลจะถูกส่งต่อไป ทำให้ผู้ใช้ยังคงได้รับความปลอดภัยด้านชนิดข้อมูลอย่างครบถ้วน
export function withSelected<T>() {
return signalStoreFeature(
withState({ selected: null as T | null })
);
}ตรวจสอบความเข้าใจอย่างรวดเร็ว
ตรวจสอบความรู้เกี่ยวกับเอนทิตีและคุณลักษณะของคุณ
สรุปทบทวน
คุณได้จัดการชุดข้อมูลด้วย withEntities (แผนที่ที่ทำให้ข้อมูลเป็นรูปแบบมาตรฐาน ตัวช่วยอัปเดต และแบบจำลองการอ่านที่ได้จากข้อมูล) และสร้างชุด signalStoreFeature ที่นำกลับมาใช้ใหม่ได้และเป็นแบบทั่วไป เพื่อแชร์สถานะ ค่าที่คำนวณแล้ว และเมธอดระหว่างคลังสถานะต่าง ๆ
คำถามที่พบบ่อย
บทเรียน “เอนทิตีและฟีเจอร์กำหนดเอง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เอนทิตีและฟีเจอร์กำหนดเอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เอนทิตีและฟีเจอร์กำหนดเอง”
จัดการคอลเลกชันด้วย withEntities คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “เอนทิตีและฟีเจอร์กำหนดเอง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การสร้าง SignalStore
- Computed และเมธอด
- rxMethod สำหรับงานอะซิงโครนัส
- เอนทิตีและฟีเจอร์กำหนดเอง