Basic
มาดูการไหลของข้อมูลของ RN ปกติกัน เพื่อให้เข้าใจง่ายลองมาสมมุติการทำงานส่วนของProduct(สินค้า)กัน
เบื้องต้นในส่วนนี้จะมีด้วยกัน 3 หน้า
- Product (หน้าแสดงรายการสินค้า)
- Product Detail (หน้าแสดงรายละเอียดของสินค้าที่เลือกจากหน้า Product)
- Edit Product (หน้าแก้ไขสินค้า ที่เลือกจากหน้า Product)
จากรูปจะเห็นว่า หน้าProduct มีการเก็บ state ของ List Product Data โดยมีค่าเป็นรายการของข้อมูลสินค้าต่างๆ โดยใน 1 รายการนั้นประกอบไปด้วย
- Name(ชื่อสินค้า)
- Detail(รายละเอียดสินค้า)
- Price(ราคาสินค้า)
- Image(รูปสินค้า)
เมื่อมีการเลือกรายการจากหน้า Product จะมีการส่งข้อมูลไปให้หน้า Product Detail โดยผ่านทาง Props(Read Only) หลังจากนั้นหน้า Product Detail ก็จะทำข้อมูลที่ได้มาจากหน้า Productมาแสดงผลตามปกติ
ต่อมาเมื่อย้อนกลับมาที่หน้าProduct แล้วกดแก้ไขรายการใดรายการหนึ่ง Product ก็จะส่งข้อมูลรายการสินค้านั้นผ่าน Props(Read Only) ไปให้หน้า Edit Product
แล้วเมื่อหน้าEdit Product ต้องการจะแก้ข้อมูล ก็จะนำข้อมูลมาใส่ state เนื่องจาก ข้อมูลที่อยู่ใน Propsเป็นแบบอ่านได้อย่างเดียว(Read Only)
แล้วเมื่อมีการแก้ไขข้อมูลสินค้านั้นที่อยู่ภายในหน้า Edit Product ข้อมูลสินค้าในหน้าEdit Productกับข้อมูลที่อยู่หน้า Product จะเห็นว่าเป็นคนละค่ากัน
ที่เป็นเช่นนั้นเนื่องจากข้อมูลนั้นถูกส่งต่อกันไปเป็นทอดๆ ทำให้มองข้อมูลเป็นคนละส่วนกัน ดังนั้นถ้าต้องการให้ข้อมูลเหมือนกันหน้า Edit Productต้องส่งข้อมูลที่แก้ไขกลับไปให้หน้าProductด้วย
การทำแบบนี้ทำให้เกิดปัญหาเรื่องข้อมูลผิดเพี้ยนอยู่เยอะเหมือนกันครับ และวุ่นวายมากๆในการจัดการข้อมูลดังนั้นจึงเกิดFramework ต่างๆในการจัดการ Data ในRN
Data Framework
ใน RN ตอนนี้ frameworkในการจัดการข้อมูลนิยมใช้อยู่ 2 ตัวคือ
สำหรับถ้าใครใช้ OOP มาบ่อยๆจะรู้สึกว่า MobX จะใช้ได้ง่ายกว่า ส่วนข้อดีข้อเสียก็ต้องลองใช้กันดูครับ ดีกันคนละอย่างครับ งั้นเริ่มที่อะไรง่ายๆก่อนละกัน
MobX
Mobx นั้นมีแนวคิดง่ายๆคือ
Anything that can be derived from the application state, should be derived. Automatically.
แนวคิดนี้จึงทำให้เกิดกระบวนการหลักๆ 4 กระบวนการคือ
- Action คือส่วนกระบวนการกระทำต่างๆ ที่ส่งผลกระทบกับข้อมูล ส่วนนี้จะถูกเรียกใช้งานผ่าน Event ต่างๆ
- State นี่ก็จะคล้าย State ของRN จะแตกต่างตรง MobX จะมีการเพิ่ม observable เข้ามาเพื่อให้สามารถอ้างอิงถึง State ได้จากที่ต่างๆ
- Computed values คือส่วนที่ทำหน้าที่เมื่อ state เปลี่ยนจะมาทำงานต่างๆที่ตั้งค่าไว้ ก่อนที่ข้อมูลจะส่งไปถึงส่วนต่อไป เช่น ทำการจัดเรียงข้อมูลก่อน
- Reactions จะมีความคล้ายกับ Computed values จะแตกต่างกันตรงที่ ส่วนนี้จะทำงานเมื่อ state เปลี่ยนเช่นกันแต่จะทำกระบวนการเกี่ยวกับการแสดงผลมากกว่า เช่น update React component เป็นต้น
การทำMobX มาใช้กับส่วนของProduct ข้างต้น
จากรูปจะเห็นว่าเราจะสร้าง observable(state) ของList Product Data ขึ้นมาแล้วให้หน้า Navigation import observable ListProductData หลังจากนั้น ให้หน้า Navigationจัดการส่ง observable ListProductData ผ่าน Props ชื่อ pStore ไปให้ทุกๆหน้าเผื่อให้สามารถเข้าถึง observable ListProductData ได้ผ่านชื่อ pStore
โดยภายใน observable ประกอบไปด้วย
- ListProductData[] คือรายการของสินค้าเป็นอาเรย์(Array)
- Function updateP(pdata,index) คือ function ที่ทำการแก้ไขข้อมูล ListProductData โดยมีการรับค่าพารามิเตอร์ 2ตัวชื่อ pdata ซึ่งpdata นี้คือข้อมูลสินค้าเช่น
Name:’HHH’,
Detail:’CCC’,
Price:’111’,
Image:’aaa.png’
และ index คือรายการอ้างอิงของสินค้าภายในอาเรย์
เมื่อหน้า Product เริ่มทำงานจะเรียกข้อมูล ListProductData มาแสดงผ่านทาง pStore เช่น this.props.pStore.ListProductData
ต่อมาเมื่อมีการเลือกรายการจากหน้า Product จะมีการส่งข้อมูล index(รายการที่) ไปให้หน้า Product Detail แทนข้อมูลสินค้า เช่น เลือกสินค้ารายการที่ 5 ก็จะส่งข้อมูล 5 ผ่าน Props ไปที่หน้าProduct Detail เมื่อหน้าProduct Detail ได้รับข้อมูล 5 ก็จะไปเรียกข้อมูล จาก pStore.ListProductData[5] มาแสดงผล
และสุดท้ายถ้าหน้า Edit Product มีการแก้ไขข้อมูล ก็จะมีการเรียก function ของ observable เพื่อเปลี่ยนข้องมูล(state) มันก็คือกระบวนการ Actions นั่นเอง
เช่น เรียก pStore.updateP() พร้องส่งข้อมูลที่เปลี่ยนแปลงและรายการอ้างอิงของข้อมูลสินค้าเข้าไป
หลังจากทำคำสั่งนี้เสร็จ ทุกหน้าที่มีการเรียกใช้ข้อมูล observable(pStore) ตัวนี้จะมีการupdate ข้อมูลเป็นข้อมูลใหม่แบบอัตโนมัติ
