ทำความเข้าใจ Zustand

การจัดการ State มักจะให้ความรู้สึกที่ซับซ้อนเกินไป

คุณรู้วิธีใช้ React useState คุณรู้วิธีการส่ง props และคุณรู้วิธีการยก state ขึ้นไปจัดการที่ระดับสูงขึ้น (lift state up)

แต่ทุกอย่างจะเริ่มพังเมื่อแอปของคุณขยายใหญ่ขึ้น คุณจะเริ่มส่งข้อมูลผ่านคอมโพเนนต์ที่ไม่จำเป็นต้องใช้ข้อมูลนั้น นี่คือสิ่งที่เรียกว่า prop drilling ซึ่งทำให้โค้ดของคุณยุ่งเหยิงและดูแลรักษาได้ยาก

Zustand ช่วยแก้ปัญหานี้ โดยการทำให้แอปของคุณมี shared state ที่อยู่นอก React components

ลองคิดแบบนี้ดู:

หากไม่มี Zustand: คอมโพเนนต์ A ส่ง props ให้ B, B ส่ง props ให้ C และ C ส่ง props ให้ D

เมื่อใช้ Zustand: ทุกคอมโพเนนต์จะคุยกับ central store โดยตรง ไม่ต้องมีคนกลาง ไม่ต้องมี prop drilling

Zustand store ประกอบด้วยสองส่วน:

  • State: ข้อมูลของคุณ
  • Actions: ฟังก์ชันที่ใช้เปลี่ยนแปลงข้อมูลของคุณ

มันมีแค่นี้เอง

Zustand ทำงานได้รวดเร็วเพราะมันจะ re-render เฉพาะคอมโพเนนต์ที่ใช้ข้อมูลเฉพาะส่วนที่มีการเปลี่ยนแปลงเท่านั้น

หากคุณต้องการให้ข้อมูลยังคงอยู่แม้จะมีการรีเฟรชหน้าเว็บ ให้ใช้ localStorage เนื่องจาก localStorage เก็บได้เฉพาะข้อมูลประเภท string คุณจึงต้องใช้ JSON.stringify ในการบันทึก object และใช้ JSON.parse ในการอ่านข้อมูล

นี่คือวิธีง่ายๆ ในการวางโครงสร้าง auth store:

  • เก็บข้อมูล user และ token ไว้ใน localStorage
  • ใช้ฟังก์ชัน login เพื่ออัปเดตทั้ง store และ browser storage
  • ใช้ฟังก์ชัน logout เพื่อล้างข้อมูลทั้งสองส่วน

เมื่อเทียบกับ Redux แล้วเป็นอย่างไร?

Redux จำเป็นต้องมี dispatchers และ reducers ซึ่งต้องเขียน boilerplate code จำนวนมาก แต่ Zustand ช่วยให้คุณเรียกใช้ฟังก์ชันได้โดยตรง ทำให้ลดภาระทางความคิด (mental overhead) และลดขั้นตอนการตั้งค่าลง

ข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยง:

  • ลืม return object ในฟังก์ชัน create (ควรใช้เครื่องหมายวงเล็บครอบ object ของคุณ)
  • ใช้ semicolon (;) ภายใน state object (ควรใช้ comma (,) แทน)
  • พยายาม parse ข้อมูลที่เป็น string อยู่แล้ว

ไลบรารีจัดการ state ไม่ได้มีไว้เพื่อจัดการ state เท่านั้น แต่มีไว้เพื่อจัดการกับความซับซ้อน

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

Source: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11