RxJS vs Redux Thunk: เลือกอะไรดี? อธิบายแบบเข้าใจง่าย พร้อมตัวอย่าง

RxJS (ย่อมาจาก Reactive Extensions for JavaScript) คือ ไลบรารีสำหรับจัดการ asynchronous data stream อย่างมีประสิทธิภาพและยืดหยุ่นมาก โดยใช้แนวคิดของ Reactive Programming

🧠 แนวคิดหลักของ RxJS
🔄 "Everything is a stream"
ข้อมูลต่าง ๆ ไม่ว่าจะเป็น click, typing, HTTP response, หรือ timer — ล้วนเป็น stream ได้

Stream คือ ลำดับของค่าที่เกิดขึ้นตามเวลา

🔧 RxJS ใช้ทำอะไร?

🧱 ส่วนประกอบหลักของ RxJS

📦 ตัวอย่างใช้งานง่ายๆ

🔔 สร้าง Observable และ subscribe

import { Observable } from 'rxjs'

const observable = new Observable((subscriber) => {
  subscriber.next('Hello')
  subscriber.next('World')
  subscriber.complete()
})

observable.subscribe({
  next: (val) => console.log(val),
  complete: () => console.log('Done'),
})
// 👉 Output:
// Hello
// World
// Done

⌨️ ใช้กับ DOM event

import { fromEvent } from 'rxjs'

const clicks$ = fromEvent(document, 'click')
clicks$.subscribe(event => console.log(event))

🔄 ใช้ Operator เช่น map และ filter

import { of } from 'rxjs'
import { map, filter } from 'rxjs/operators'

of(1, 2, 3, 4, 5).pipe(
  filter(x => x % 2 === 1),
  map(x => x * 10)
).subscribe(val => console.log(val))
// 👉 Output: 10, 30, 50

📍 RxJS นิยมใช้ในไหน?

• ✅ Angular: ใช้ RxJS เป็นแกนหลักของ HTTP, Form, Router
• ✅ ใช้ใน React ได้ด้วย โดยใช้ร่วมกับ rxjs-hooks หรือ state management แบบ reactive
• ✅ ใช้ใน Node.js / Backend ที่ต้องการจัดการ async หลายแหล่ง

🔚 สรุป

RxJS กับ Redux Thunk มีเป้าหมายและแนวคิดต่างกัน แม้ทั้งคู่จะใช้ในการจัดการ asynchronous logic ได้เหมือนกันก็ตาม

🧠 เปรียบเทียบโดยสรุป: RxJS vs Redux Thunk

📦 ตัวอย่างงานที่เหมาะกับแต่ละตัว

✅ เหมาะกับ Redux Thunk

✅ เหมาะกับ RxJS

💡 ถ้า logic มีลักษณะ "หลาย async ซ้อนกัน", "ต้อง cancel บางอัน", หรือ "ควบคุม event หลายแหล่งพร้อมกัน", RxJS เหมาะกว่า