ต่อจากตอนที่ 1 อธิบายเรื่องของการพัฒนาระบบและเขียนการชุดสอบสำหรับ React app
ในตอนที่ 2 จะมาอธิบายเรื่อง การปรับปรุงโครงสร้าง code
ให้อยู่ในรูปแบบ ELM Architecture ซึ่งมีส่วนการทำงานดังนี้
- View
- Model
- Update
ทำความเข้าใจเกี่ยวกับ ELM Architecture กันก่อน
ประกอบไปด้วย 3 ส่วนหลัก- View คือส่วนที่นำ model มาแสดงผลนั่นเอง
- Model คือส่วนหลักของระบบ รวมทั้งการจัดการ state ต่าง ๆ หรือข้อมูลนั่นเอง
- Update คือส่วนการทำหน้าที่เปลี่ยนแปลงสถานะต่าง ๆ ของ model แต่แทนที่จะเปลี่ยนแปลงตรง ๆ ก็ทำการสร้างของใหม่ออกมา ซึ่งลดผลกระทบต่าง ๆ ที่จะเกิดขึ้น
ขั้นตอนที่ 1 เรื่องของ Action และ State
สิ่งที่ต้องคิดถึงคือ state และ action ที่เกิดขึ้นใน app ของเรา มาดู state ของ app กันก่อน ซึ่งประกอบไปด้วย- init คือสถานะเริ่มต้นของ app นั่นคือ counter มีค่าเป็น 0 เสมอ
- update คือการ update ค่าต่าง ๆ ใน model ตาม Action
- init สำหรับตรวจสอบค่าเริ่มต้นของ counter ต้องเป็น 0
- update สำหรับตรวจสอบสถานะ
- INCREMENT action สำหรับการเพิ่มค่า
- DECREMENT action สำหรับการลดค่า
- INCREMENT เพิ่มค่าขึ้นมา 1
- DECREMENT ลดค่าลงมา 1
- ทำการ initial ค่าของ State ด้วย State.init()
- ทำการ update ค่าต่าง ๆ ด้วย Action INCREMENT และ DECREMENT
หลังจากการเปลี่ยนแปลงแล้ว ผลที่ตามมาคือ ชุดการทดสอบยังต้องผ่านเช่นเดิม !! Unit tests ผ่านหมด Integration tests ผ่านหมด ก็ไว้ใจได้ในระดับหนึ่งแล้วนะ
ขั้นตอนที่ 2 เรื่องของ Lifecycle และ View
เมื่อเราทำการแยก State และการ Update ตามแต่ละ action ออกไปจาก component แล้ว (State และ Action) สิ่งที่ยังเหลือคือ การทดสอบในระดับ component โดยในตอนนี้เราทำการรวมทุกอย่างไว้ใน component เดียวคือ Counter Component (counter.js) ทั้งส่วนการประมวลผลและการแสดงผล ดังนั้นเราต้องทำการแยกทั้งสองส่วนออกจากกัน โดยส่วนหลักเราจะเรียกว่า Container component หรือ Lifecycle component ทำหน้าที่รับ action จากผู้ใช้งาน และรวม component ต่าง ๆ เข้าไว้ด้วยกัน และอีกส่วนเรียกว่า View component หรือ Dumb component ซึ่งทำหน้าที่แสดงผลตามข้อมูล หรือ state หรือ model ที่ส่งเข้ามาเท่านั้น มาแยกส่วนการแสดงผลออกมาดีกว่า !! โดยส่วนการแสดงผลหรือ View component ประกอบไปด้วย- การแสดงปุ่มบวก และ ปุ่มลบ
- การแสดงข้อมูล counter
- การรับ action มาทำงาน
แน่นอนว่าชุดการทดสอบทั้งหมดต้องผ่าน ถือเป็นอันจบขั้นตอนการปรับปรุง code ของ React app ให้อยู่ในรูปแบบของ ELM Architecture
โดยสรุปแล้ว ถ้าใครอ่านมาถึงตรงนี้
จะเห็นได้ว่าในทุกส่วนการทำงาน จะมีชุดการทดสอบครอบคลุมทั้งหมด ทำให้เรามีความมั่นใจในการแก้ไขและปรับปรุง code ให้ดียิ่งขึ้น นี่คือหัวใจของการพัฒนาระบบงานเลย ส่วนเรื่องของโครงสร้างหรือ architecture ของ code นั้นเป็นเรื่องที่ตามมา เนื่องจากโครงสร้างที่ทดสอบได้ง่าย ก็ทำให้เราแยกส่วนการทำงานตามหน้าที่รับผิดชอบได้ง่าย แต่ข้อเสียที่ตามมาคือ จำนวนไฟล์ที่เยอะขึ้น เกิดการกระจายของ code ซึ่งทำให้ยากต่อการเรียนรู้และทำความเข้าใจดังนั้นเลือกโครงสร้างให้เหมาะกับงานและทีมด้วยนะครับโดย source code อยู่ที่ Github :: Up1 :: Learn React to ELM ขอให้สนุกกับการเขียน code และ test นะครับ