มาจัดการ state ใน angular ด้วย Behavior Subject กันเถอะ ตอนที่ 1

เมื่อเราทำ application ที่มีขนาดใหญ่หรือมีความซับซ้อนมากขึ้น นั้นก็หมายความว่าใน application ของเรานั้นก็จะมี component อยู่ใน application เยอะแยะมากมาย ซึ่งก็จะมีการส่งข้อมูลไปมาระหว่าง component การจัดการ state หรือการส่งข้อมูลไปมาระหว่าง component ก็เป็นเรื่องที่จะควบคุมยาก ในเรื่องการจัดการ state ของ ui ก็เช่นกัน ซึ่งเราจำเป็นที่จะรู้ทุก action ที่เกิดขึ้น ว่าเป็น action อะไร มาจาก component ไหน และจะต้องแสดงผลต่อ user อย่างไร

ปัญหาต่างๆเหล่านี้ เราจึงมองหา library ที่จะมาช่วยจัดการ state ซึ่งในท้องตลาดก็จะมี library ต่างๆเยอะแยะมากมายหลายตัวเลย เช่น NgRx, ngxs, loona, akita, Mobx และก็มี library อื่นๆ

ซึ่งใน Angular ก็มี library ตัวหนึ่งที่ถูก build-in เข้ามาพร้อมเลยนั่นก็คือ rxjs ใครที่ต้องการใช้งาน rxjs ก็แค่ import เข้าไปยัง component หรือว่าที่ที่ต้องการใช้งานก็สามารถใช้งานได้แล้ว

RxJS เป็น library ตระกูล ReactiveX หรือเรียกสั้นๆว่า RX เป็น library ตัวหนึ่งที่สร้างอยู่บนพื้นฐานของ Reactive programming ซึ่งจะเน้นการจัดการกับเหตุการณ์หรือค่าที่เปลี่ยนแปลงใน Object ที่เราสนใจ และจะช่วยจัดการเกี่ยวกับเรื่อง thread ให้สามารถทำงานได้ง่าย รวมถึงมี Operator ต่างๆที่จะช่วยอำนวยความสะดวกในการจัดการข้อมูล เช่น map, mergeMap, switchMap, takeUntil, scan และอื่นๆอีกมากมาย และก็มีอีกตัวที่จะมาช่วยจัดการ state นั่นก็คือ Subjects

ก็อื่นเรามาทำความรู้จักกับ Subjects กันก่อน Subjects เป็น special type ของ Observable ดังนั้นก็จะสามารถที่จะ subscribe ได้เหมือนกับ Observable เลย และมีบางตัวใน Subjects ที่สามารถทำ Multicasting หลายๆ Observers ได้

Subjects ก็มีอยู่ด้วยกัน 4 แบบคือ

1. subject

http://reactivex.io/documentation/subject.html

การทำงานของ Subject มีดังนี้

• เมื่อมีคนที่ต้องการฟังข้อมูลที่ได้จาก Subject มองจากฝั่งซ้ายมือนะคะ รอจนกระทั้งเมื่อมีการส่งข้อมูลสีแดงให้กับ Subject คนที่รอฟังก็จะได้รับสีแดงไปด้วย ต่อมามีการส่งข้อมูลสีเขียวให้กับ Subject คนที่รอฟังก็จะได้ข้อมูลใหม่เป็นสีเขียว
• เมื่อมีคนใหม่ที่ต้องการขอฟังข้อมูลจาก Subject เพิ่มขึ้น เขาก็จะไม่ได้ข้อมูลที่เป็นสีแดงหรือสีเขียวก่อนหน้าเลย ต่อมาเมื่อมีการส่งข้อมูลสีน้ำเงินให้กับ Subject คนที่รอฟังข้อมูลทั้งหมด ก็จะได้ข้อมูลเป็นสีน้ำเงิน
• แสดงว่าเมื่อนำ Subject ไปใช้งานก็จะได้ข้อมูลก็ต่อเมื่อมีคนส่งมาตอนนั้น ไม่สามารถที่จะรู้ข้อมูลก่อนหน้าเลย

2. BehaviorSubject

http://reactivex.io/documentation/subject.html

การทำงานของ BehaviorSubject มีดังนี้

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

3. AsyncSubject

http://reactivex.io/documentation/subject.html

การทำงานของ AsyncSubject มีดังนี้

• เมื่อมีคนที่ต้องการฟังข้อมูลที่ได้จาก AsyncSubject มองจากฝั่งซ้ายมือนะคะ รอจนกระทั้งเมื่อมีการส่งข้อมูลสีแดงให้กับ AsyncSubject คนที่รอฟังก็จะไม่ได้รับสีแดง ต่อมามีการส่งข้อมูลสีเขียวให้กับ AsyncSubject คนที่รอฟังก็จะไม่ได้รับข้อมูลเป็นสีเขียว
• เมื่อมีคนใหม่ที่ต้องการขอฟังข้อมูลจาก AsyncSubject เพิ่มขึ้น เขาก็จะไม่ได้ข้อมูลที่เป็นสีแดงหรือสีเขียวก่อนหน้าเลย ต่อมาเมื่อมีการส่งข้อมูลสีน้ำเงินให้กับ AsyncSubject คนที่รอฟังข้อมูลทั้งหมด ก็จะไม่ได้ข้อมูลเป็นสีน้ำเงิน
• แสดงว่าเมื่อนำ AsyncSubject ไปใช้งานจะไม่สามารถได้ข้อมูลเลยถ้ามีคนส่งข้อมูลมาให้ คนที่รอฟังใน AsyncSubject จะได้ข้อมูลก็ต่อเมื่อมีคนส่งข้อมูลผ่าน completes เท่านั้น

4. ReplaySubject

http://reactivex.io/documentation/subject.html

การทำงานของ ReplaySubject มีดังนี้

• เมื่อมีคนที่ต้องการฟังข้อมูลที่ได้จาก ReplaySubject มองจากฝั่งซ้ายมือนะคะ รอจนกระทั้งเมื่อมีการส่งข้อมูลสีแดงให้กับ ReplaySubject คนที่รอฟังก็จะได้รับสีแดงไปด้วย ต่อมามีการส่งข้อมูลสีเขียวให้กับ ReplaySubject คนที่รอฟังก็จะได้ข้อมูลใหม่เป็นสีเขียว
• เมื่อมีคนใหม่ที่ต้องการขอฟังข้อมูลจาก ReplaySubject เพิ่มขึ้น เขาก็จะได้รับข้อมูลก่อนหน้าที่เป็นสีแดงและสีเขียว ต่อมาเมื่อมีการส่งข้อมูลสีน้ำเงินให้กับ ReplaySubject คนที่รอฟังข้อมูลทั้งหมด ก็จะได้ข้อมูลเป็นสีน้ำเงิน
• แสดงว่าเมื่อนำ ReplaySubject ไปใช้งาน ติดตามประวัติก่อนหน้าที่มีการส่งข้อมูลมาให้ ยกตัวอย่างเช่น chat application เราสามารถใช้สำหรับการติดตามประวัติการสนทนาก่อนหน้า

วันนี้เราทำความรู้จักกับ Subjects ใน RxJS กันแล้ว ในตอนที่ 2 เรามาลองนำ Subjects มาใช้งานในเรื่องจัดการ state กัน

พบกันใหม่ในหัวข้อ “มาจัดการ state ใน angular ด้วย behavior subject กันเถอะ ตอนที่ 2”