อะตอมอนุมานและอะตอมแบบอะซิงโครนัส

สร้างอะตอมที่คำนวณจากข้อมูลโดยส่งฟังก์ชัน getter: const doubleAtom = atom(get => get(countAtom) * 2) อะตอมนี้ไม่มีค่าที่จัดเก็บไว้ แต่จะคำนวณใหม่ทุกครั้งที่ countAtom เปลี่ยนแปลง

อะตอมที่คำนวณจากข้อมูลจะเป็นข้อมูลล่าสุดอยู่เสมอโดยไม่ต้องซิงโครไนซ์ด้วยตนเอง ซึ่งเทียบเท่ากับคุณสมบัติที่คำนวณได้ใน Jotai

Jotai จะติดตามว่าอะตอมใดถูกเข้าถึงภายในฟังก์ชัน getter และประเมินอะตอมที่คำนวณจากข้อมูลใหม่โดยอัตโนมัติเมื่ออะตอมใดอะตอมหนึ่งเปลี่ยนแปลง คุณไม่จำเป็นต้องประกาศการขึ้นต่อกันอย่างชัดเจน

หาก getter เรียกใช้ get(atomA) และ get(atomB) อะตอมที่คำนวณจากข้อมูลจะอัปเดตทุกครั้งที่ atomA หรือ atomB เปลี่ยนแปลง

อะตอมที่คำนวณจากข้อมูลและเขียนค่าได้มีทั้ง getter และ setter: atom(get => get(baseAtom).toUpperCase(), (get, set, newValue) => set(baseAtom, newValue.toLowerCase())) การอ่านจะให้ค่าที่ผ่านการแปลง ส่วนการเขียนจะแปลงค่าแล้วจัดเก็บกลับ

รูปแบบนี้ใช้แปลงข้อมูลแบบสองทิศทางได้โดยไม่เปิดเผยอะตอมพื้นฐานโดยตรง

ฟังก์ชัน getter สามารถเป็นแบบอะซิงโครนัสได้: const userAtom = atom(async get => { const id = get(userIdAtom); return await fetchUser(id); }) Jotai รองรับ Promise ที่ส่งคืนจาก getter ของอะตอมโดยตรง

เมื่อ userIdAtom เปลี่ยนแปลง Jotai จะเรียกใช้ getter แบบอะซิงโครนัสอีกครั้งโดยอัตโนมัติ และคอมโพเนนต์ที่ใช้งานจะถูกพักการทำงานระหว่างดึงข้อมูล

อะตอมแบบอะซิงโครนัสทำงานร่วมกับ React Suspense ได้อย่างราบรื่น ให้ห่อคอมโพเนนต์ที่ใช้งานไว้ในขอบเขต Suspense พร้อมเนื้อหาสำรอง คอมโพเนนต์จะถูกพักการทำงานขณะที่ Promise ยังรอดำเนินการ และจะแสดงผลเมื่อ Promise เสร็จสมบูรณ์

วิธีนี้ตัดความจำเป็นในการจัดการสถานะกำลังโหลดด้วยตนเองในคอมโพเนนต์ ไม่ต้องมีแฟล็ก isLoading และไม่ต้องใช้ useEffect เพื่อดึงข้อมูล

นำเข้า loadable จาก jotai/utils แล้วห่ออะตอมแบบอะซิงโครนัส: const loadableUserAtom = loadable(userAtom) คอมโพเนนต์ที่อ่าน loadableUserAtom จะได้รับ {state: 'loading'}, {state: 'hasData', data: user} หรือ {state: 'hasError', error} โดยไม่ถูกพักการทำงาน

ควรใช้ loadable เมื่อต้องการแสดงสถานะกำลังโหลดแบบกำหนดเองภายในหน้า แทนการพึ่งพาขอบเขต Suspense

ยูทิลิตี atomWithReset จาก jotai/utils สร้างอะตอมที่รีเซ็ตกลับเป็นค่าเริ่มต้นได้โดยใช้สัญลักษณ์ RESET วิธีนี้สะอาดกว่าการติดตามและใส่ค่าเริ่มต้นกลับด้วยตนเอง

ในฟอร์ม ให้รีเซ็ตอะตอมของช่องกรอกข้อมูลทั้งหมดเมื่อส่งหรือยกเลิก โดยเรียก setter ของแต่ละอะตอมด้วย RESET ในตัวจัดการเหตุการณ์เดียว

อะตอมที่คำนวณจากข้อมูลสามารถอ่านจากอะตอมอื่นหลายตัวได้: const summaryAtom = atom(get => ({ user: get(userAtom), settings: get(settingsAtom), count: get(countAtom) })) วิธีนี้สร้างการอ้างอิงเดียวที่คงที่และอัปเดตเมื่อการขึ้นต่อกันใด ๆ เปลี่ยนแปลง

คอมโพเนนต์ที่ต้องการเพียงข้อมูลสรุปจะสมัครรับข้อมูลจาก summaryAtom แทนการสมัครรับข้อมูลจากอะตอมทั้งสามแยกกัน

อะตอมที่คำนวณจากข้อมูลสามารถอ่านอะตอมที่แตกต่างกันตามเงื่อนไขได้: const activeDataAtom = atom(get => get(modeAtom) === 'A' ? get(dataAAtom) : get(dataBAtom)) เมื่อ modeAtom เปลี่ยน อะตอมที่คำนวณจากข้อมูลจะเปลี่ยนแหล่งข้อมูลโดยอัตโนมัติ

Jotai จะสมัครรับข้อมูลจากอะตอมที่ถูกต้องใหม่ในการประเมินแต่ละครั้ง เพื่อให้แน่ใจว่าจะไม่มีข้อมูลเก่าจากแขนงที่ไม่ได้ใช้งาน

หาก getter ของอะตอมแบบอะซิงโครนัสทำให้เกิดข้อผิดพลาดหรือปฏิเสธ Promise ข้อผิดพลาดจะส่งต่อไปยังขอบเขตดักจับข้อผิดพลาดของ React ที่อยู่ใกล้ที่สุดเมื่อใช้ร่วมกับ Suspense หากใช้ loadable ข้อผิดพลาดจะปรากฏในฟิลด์ state.error เพื่อจัดการภายในหน้า

ในโค้ดสำหรับใช้งานจริง ควรใช้คู่กับอะตอมแบบอะซิงโครนัสเสมอ โดยเลือกใช้ ErrorBoundary หรือ wrapper ของ loadable

อะตอมที่คำนวณจากข้อมูลจะจดจำผลลัพธ์ล่าสุดไว้ หากอะตอมที่ขึ้นต่อกันทั้งหมดคืนค่าเดียวกับการประเมินครั้งก่อน อะตอมที่คำนวณจากข้อมูลจะคืนการอ้างอิงเดิม และจะไม่เกิดการเรนเดอร์ใหม่ในส่วนที่อยู่ถัดไป

สำหรับการคำนวณที่ใช้ทรัพยากรมาก เช่น การแปลงอาร์เรย์ขนาดใหญ่ การจดจำค่านี้ให้ประโยชน์ด้านประสิทธิภาพอย่างมากโดยไม่ต้องตั้งค่าเพิ่มเติม

จะเกิดอะไรขึ้นกับคอมโพเนนต์ที่อ่านอะตอมแบบอะซิงโครนัสขณะที่ Promise ยังรอดำเนินการ

อะตอมที่คำนวณจากข้อมูลจะคำนวณค่าจากอะตอมอื่นโดยใช้ฟังก์ชัน getter พร้อมการติดตามการขึ้นต่อกันโดยอัตโนมัติ อะตอมแบบอะซิงโครนัสใช้ getter แบบอะซิงโครนัสและทำงานร่วมกับ React Suspense โดยค่าเริ่มต้น หากต้องการไม่ใช้ Suspense และจัดการสถานะกำลังโหลดหรือข้อผิดพลาดภายในหน้า ให้ใช้ loadable จาก jotai/utils

อะตอมที่คำนวณจากข้อมูลและเขียนค่าได้ช่วยให้แปลงข้อมูลแบบสองทิศทาง ส่วนอะตอมแบบมีเงื่อนไขจะเปลี่ยนแหล่งข้อมูลแบบไดนามิกตามค่าของอะตอมอื่น