Flux คืออะไร ? + สอนวิธีนำไปใช้กับ React

Suranart Niamcome
Jun 20, 2015 · 10 min read

วันนี้ SiamHTML จะขอพูดถึงแนวทางการเขียน JavaScript แบบใหม่ที่มีชื่อเรียกว่า Flux ครับ แต่อย่าเพิ่งตกใจนะครับว่า Flux นั้นเป็น JavaScript framework ตัวใหม่ที่เราจะต้องมาเรียนรู้กันอีก เพราะจริงๆ แล้วมันก็เป็นแค่ “pattern” หรือ “architecture” ของการเขียนโค้ดเท่านั้นเอง เรียกว่าคล้ายๆ กับการที่เราเขียนโค้ดโดยยึดหลัก MVC นั่นแหละครับ เรามาดูกันว่า Flux นั้นจะช่วยให้การเขียนโค้ดของเราดีขึ้นได้มากแค่ไหน ?

ปกติเราเขียน React กันอย่างไร ?

จากบทความก่อนหน้านี้ ที่ SiamHTML ได้เล่าถึงการทำเว็บแบบ Isomorphic ด้วย React นั้น หากสังเกตดีๆ จะเห็นว่ามันเป็นแค่แอปแบบง่ายๆ เท่านั้นเอง ถูกมั้ยครับ ? เรียกว่าแทบจะไม่มี logic อะไรเลย ทีนี้ถ้าเราจะทำแอปกันจริงๆ มี logic ซับซ้อนยิ่งขึ้น มีการดึงข้อมูลมาจากฐานข้อมูล ถามว่าโค้ด logic พวกนี้ เราควรจะเขียนไว้ที่ไหน ? ภายใน component งั้นหรอ ? ไม่ดีแน่ๆ ครับ

รู้จักกับ Flux

ลองนึกเล่นๆ นะครับว่า ถ้าเราเอา application logic ไปกองไว้ตาม component ต่างๆ เราจะลำบากแค่ไหน debug ก็ยาก เขียน test ก็ยาก แถมยัง reuse ไม่ได้อีก เพื่อเป็นการแก้ปัญหาเหล่านี้ วิศวกรของ facebook เค้าจึงคิดค้น Flux ขึ้นมาครับ

อย่างที่บอกนะครับว่า Flux นั้นเป็นแค่ pattern ของการเขียนโค้ดเท่านั้นเอง ซึ่งหมายความว่าตัวมันเองไม่ได้มีไฟล์อะไรเลย มันเป็นแค่ “แนวคิด” ที่ทีม facebook เค้าใช้ในการเขียน React เพื่อช่วยให้การทำงานเป็นไปอย่างราบรื่นเท่านั้นเอง

ผมขอทวนก่อนนะครับว่า React นั้นมี data flow แบบ Unidirectional ซึ่งก็คือระบบที่ข้อมูลจะไหลไปในทิศทางเดียว Flux นั้นก็เหมือนกันครับ เพียงแต่มันจะมีการกำหนดการ flow ของข้อมูลให้มีระบบมากขึ้น เราลองมาดูกันคร่าวๆ นะครับว่า data flow ของ Flux นั้นมีหน้าตาเป็นอย่างไร

flux simple diagram
flux simple diagram

เห็นมั้ยครับว่าการ flow ของข้อมูลนั้นจะเป็นแบบทางเดียว คือจะเริ่มจากการมี Action ขึ้นมาก่อน จากนั้นก็จะส่งข้อมูลต่อไปยัง Dispatcher และ Store ตามลำดับ และสุดท้ายข้อมูลก็จะถูกส่งไปถึง View ครับ

แต่ในความเป็นจริงแล้ว เว็บแอปส่วนใหญ่มักจะมี interaction กับ user ถูกมั้ยครับ ดังนั้น ตัว View เอง ก็สามารถทำให้เกิด Action ขึ้นมาได้เช่นกันครับ data flow จริงๆ จึงจะเปลี่ยนเป็นแบบนี้

flux diagram
flux diagram

ก่อนจะไปต่อ ผมขอแนะนำให้จำ diagram นี้ให้ขึ้นใจเลยนะครับ แต่ตอนนี้เราอาจจะยังงงๆ อยู่ว่า แล้วแต่ละตัวมันคืออะไร ? เดี๋ยวผมจะไล่อธิบายให้ฟังทีละตัวเลยครับ

เจาะลึก Data Flow ของ Flux

เอาล่ะครับ เรามาดูกันว่า data flow ของ Flux นั้นประกอบไปด้วยอะไรบ้าง

Action

Action ก็คือสิ่งที่เกิดขึ้นเมื่อมี user มาทำอะไรบางอย่างกับ View ครับ (หรือเราจะสั่งให้เกิด Action ขึ้นมาเองเลยก็ได้) สมมติหน้าเว็บเรามีกล่องค้นหาข้อมูลอยู่อันหนึ่ง เมื่อใดก็ตามที่ user กดปุ่ม submit ฟอร์มค้นหา เมื่อนั้นจะมี Action เกิดขึ้นมาครับ แน่นอนว่าข้อมูลที่เราอยากจะผูกไปพร้อมกับ Action นี้ก็คือ keyword ที่ user เค้ากรอกมา ถูกมั้ยครับ คำถามคือ แล้วเราจะส่ง keyword ที่ว่านี้ ไปยังโค้ดส่วนที่จะทำหน้าที่ query ข้อมูลจากฐานข้อมูลได้อย่างไร ?

Dispatcher

วิธีที่ Flux ใช้ก็คือการนำสิ่งที่เรียกว่า Dispatcher มาเป็นตัวกลางครับ โดย Action ดังกล่าวจะต้องไปบอก Dispatcher ว่า 1) ตัวเองคือ Action ประเภทไหน และ 2) มีข้อมูลอะไรที่จะพ่วงมากับ Action นี้บ้าง จากนั้น Dispatcher จะรับหน้าที่ดูว่า Action ดังกล่าว ควรจะวิ่งไปทางไหนต่อครับ

Store

Store คือ ที่ๆ เราจะเก็บข้อมูลต่างๆ ของแอป รวมไปถึง state เอาไว้ครับ นอกจากข้อมูลต่างๆ แล้ว ภายใน Store ก็จะมีการเก็บ method ต่างๆ ที่จะใช้ในการจัดการกับข้อมูลภายใน Store เอาไว้ด้วย หรือพูดง่ายๆ ก็คือมันเป็นที่ๆ เราจะเขียน application logic ต่างๆ นั่นเองครับ อย่างในกรณีนี้ Store จะต้องรับหน้าที่นำ keyword ที่ user กรอกมา ไป query ข้อมูลในฐานข้อมูล แล้วนำผลลัพธ์ที่ได้ ส่งต่อไปยัง View เพื่อแสดงผล แต่แอปเราจะรู้ได้อย่างไรว่า method ไหนใน Store ที่จะต้องจับคู่กับ Action ที่เข้ามาหา ?

คำตอบคือเราจะต้องนำ method ต่างๆ ใน Store ไป register ไว้กับ Dispatcher ก่อนครับ พูดง่ายๆ ก็คือ เราจะต้องจับคู่นั่นเองว่า ถ้ามี Action แบบนี้เข้ามา จะให้วิ่งไปใช้ method ตัวไหน สมมติว่ามี Action ที่ต้องการจะ query ข้อมูลจากฐานข้อมูลเข้ามา เราก็จะต้องจับคู่ Action นี้ เข้ากับ method ที่จะทำหน้าที่เชื่อมต่อกับฐานข้อมูลอะไรทำนองนี้ครับ เมื่อได้ข้อมูลที่ต้องการมาแล้ว Store ก็จะอัพเดทข้อมูลต่างๆ รวมไปถึง state ที่ตัวเองดูแลอยู่ แล้วก็แจ้งกลับไปยัง View เพื่อร้องขอให้มีการ render ใหม่

View

เมื่อ View ได้รับคำร้องขอจาก Store แล้ว View ก็จะไปดึงข้อมูลที่จะต้องใช้ในการ render ใหม่ มาจาก Store จากนั้น View ก็จะ render ตัวเอง และ component ลูกๆ ที่อยู่ภายใน View นั้นๆ ครับ

Workshop — ทำแอป Discussion

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

สมมติว่าโจทย์ของเราคือการสร้างระบบ Discussion แบบง่ายๆ คือเราจะมีฟอร์มอันนึง ให้คนเข้ามา comment อะไรก็ได้ ลองดูซิว่า requirement แบบนี้ เราจะต้องเขียนโค้ดอย่างไร ?

1. เตรียมไฟล์และจัดโครงสร้าง

เริ่มด้วยการสร้างไฟล์และโฟลเดอร์ตามด้านล่างนี้ก่อนเลยครับ

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

index.html

สังเกตนะครับว่าใน body ของเราจะต้องมี #app อยู่ด้วย เพราะเราจะต้องหาที่เอาไว้ render แอปของเราครับ ส่วนก่อนปิด body เราก็จะต้องใส่ script เข้ามาตัวนึง ซึ่งมันก็คือไฟล์ที่ได้จากการรวม script ทั้งหมดของแอปเรานั่นเองครับ

gulpfile.js

ในบทความนี้ ผมจะขอใช้ browserify ในการทำ bundle นะครับ ให้เราเลือก entry point เป็น app.js ได้เลย แล้วตั้งชื่อไฟล์ output ให้เป็น bundle.js ครับ

2. สร้าง Component ต่างๆ แบบ Static

ทีนี้เราจะมาเริ่มสร้าง component กันเลยครับ โดยผมจะขอเริ่มจาก component ที่อยู่นอกสุดก่อนละกัน

DiscussionApp.jsx

ให้เราสร้างไฟล์ใหม่ขึ้นมาอันนึง แล้วตั้งชื่อว่า DiscussionApp.jsx ครับ จากนั้นก็ใส่โค้ดเริ่มต้นตามด้านล่างนี้ลงไป

DiscussionApp.jsx

4.1 สร้าง Dispatcher ขึ้นมาก่อน

5.2 เพิ่ม Action สำหรับดึงข้อมูลจาก API

SiamHTML

The collection of articles for front-end developers

SiamHTML

The collection of articles for front-end developers

Suranart Niamcome

Written by

Lead Engineer @Tencent (Thailand)

SiamHTML

The collection of articles for front-end developers