การสร้างสโตร์แบบกำหนดเองด้วย useSyncExternalStore

สโตร์แบบกำหนดเองต้องมีสามสิ่ง ได้แก่ สถานะบางอย่าง ฟังก์ชันสมัครรับการแจ้งเตือนสำหรับลงทะเบียนตัวรับฟังเหตุการณ์ และฟังก์ชัน getSnapshot สำหรับอ่านสถานะปัจจุบัน นี่คือข้อกำหนดทั้งหมดที่ useSyncExternalStore คาดหวัง

การทำให้สโตร์มีขนาดเล็กเช่นนี้ทำให้ไม่ผูกกับเฟรมเวิร์ก ดังนั้นจึงใช้สโตร์เดียวกันได้ทั้งภายในและภายนอกรีแอ็กต์

โรงงาน createStore รับค่าเริ่มต้นและคืนออบเจ็กต์ที่มี getSnapshot ฟังก์ชันสมัครรับการแจ้งเตือน และฟังก์ชันอัปเดต ภายในโรงงานจะเก็บสถานะปัจจุบันและชุดฟังก์ชันเรียกกลับของตัวรับฟังเหตุการณ์

รูปแบบโรงงานนี้ช่วยให้คุณสร้างสโตร์อิสระหลายชุดได้ด้วยฟังก์ชันที่นำกลับมาใช้ใหม่เพียงหนึ่งชุด

เมื่อฟังก์ชันอัปเดตเปลี่ยนสถานะ ฟังก์ชันจะกำหนดค่าใหม่แล้วเรียกตัวรับฟังเหตุการณ์ที่ลงทะเบียนไว้ทุกตัว ตัวรับฟังเหล่านั้นคือฟังก์ชันเรียกกลับที่รีแอ็กต์มอบให้ผ่านฟังก์ชันสมัครรับการแจ้งเตือน

การเรียกใช้ตัวรับฟังเหล่านี้จะแจ้งรีแอ็กต์ว่าสโตร์เปลี่ยนแปลง ทำให้รีแอ็กต์อ่าน getSnapshot อีกครั้งและเรนเดอร์คอมโพเนนต์ใด ๆ ที่อ่านข้อมูลจากสโตร์ใหม่

คอมโพเนนต์อ่านข้อมูลจากสโตร์โดยเรียกใช้ useSyncExternalStore พร้อมฟังก์ชันสมัครรับการแจ้งเตือนและฟังก์ชัน getSnapshot ของสโตร์ ฮุกจะคืนค่าปัจจุบันและเรนเดอร์ใหม่เมื่อค่านั้นเปลี่ยนแปลง

คุณสามารถห่อหุ้มการทำงานนี้ไว้ในฮุกแบบกำหนดเอง เช่น useStore เพื่อให้คอมโพเนนต์เรียกใช้ฟังก์ชันเดียว แทนการเชื่อมต่ออาร์กิวเมนต์ของฮุกด้วยตนเองทุกครั้ง

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

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

คุณสามารถสร้างสโตร์ขนาดเล็กหลายชุด โดยแต่ละชุดเป็นเจ้าของส่วนย่อยของสถานะ แทนการใช้สโตร์ขนาดใหญ่รวมเป็นก้อนเดียว คอมโพเนนต์จะสมัครรับเฉพาะส่วนย่อยที่ตนสนใจ

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

Zustand ซึ่งเป็นไลบรารีสถานะขนาดเล็กที่ได้รับความนิยม สร้างขึ้นตามรูปแบบนี้โดยตรง และใช้ useSyncExternalStore ภายในตั้งแต่รุ่นที่ 4 เอพีไอขนาดเล็กของไลบรารีนี้โดยพื้นฐานแล้วคือ createStore ที่ปรับปรุงให้ใช้งานสะดวก พร้อมชั้นตัวเลือกข้อมูล

การเห็นความเชื่อมโยงนี้ช่วยให้ไลบรารีลักษณะนี้เข้าใจได้ง่ายขึ้น เพราะแท้จริงแล้วเป็นตัวห่อหุ้มพื้นฐานเดียวกันที่บางและใช้งานสะดวก ซึ่งคุณสามารถสร้างขึ้นเองได้

เมื่อส่งตัวเลือกให้ getSnapshot ซึ่งคืนค่าเฉพาะส่วนของสถานะที่คอมโพเนนต์ใช้งาน คุณจะทำให้คอมโพเนนต์เรนเดอร์ใหม่เฉพาะเมื่อส่วนดังกล่าวเปลี่ยนแปลง

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

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

แม้แต่การบันทึกอย่างง่ายในคอนโซลภายใน update ซึ่งเปิดใช้เฉพาะเมื่อมีแฟล็กสำหรับการพัฒนา ก็ช่วยให้คุณเข้าใจการไหลของสถานะขณะสร้างสโตร์ได้

เนื่องจากสโตร์เป็น JavaScript แบบพื้นฐาน คุณจึงทดสอบตรรกะของสโตร์ได้โดยตรง โดยเรียก update และตรวจสอบว่า getSnapshot คืนค่าใหม่ โดยไม่ต้องเรนเดอร์สิ่งใดเลย

คุณยังสามารถทดสอบภายใน React ได้ด้วยการเรนเดอร์คอมโพเนนต์ที่อ่านค่าจากสโตร์ แล้วตรวจสอบว่ามีการเรนเดอร์ใหม่หลังจาก update ซึ่งครอบคลุมทั้งสโตร์และการผสานรวมของสโตร์

โปรดทบทวนข้อกำหนดการทำงานของเมธอด subscribe สำหรับสโตร์แบบกำหนดเอง

สโตร์แบบกำหนดเองต้องมี state, subscribe และ getSnapshot โรงงาน createStore ร่วมกับ update ที่แจ้งให้ตัวรับฟังทราบ ทำให้มีสถานะส่วนกลางที่ใช้ร่วมกันได้โดยไม่ต้องมี Provider เนื่องจากการนำเข้าโมดูลใช้สโตร์อินสแตนซ์เดียวกัน

ใช้สโตร์สำหรับส่วนย่อยหลายชุดและตัวเลือกเพื่อจำกัดการเรนเดอร์ใหม่ โดยอย่าลืมใช้อ้างอิงที่คงที่ Zustand v4+ สร้างขึ้นจากรูปแบบนี้โดยตรง และสโตร์ JavaScript แบบพื้นฐานก็ทดสอบได้ง่ายทั้งภายในและภายนอก React