รูปแบบ publish/subscribe สำหรับสถานะคืออะไร และการแลกเปลี่ยนของมันคืออะไร?

Question

IT Interview Practice · Accepted Answer

**Publish/subscribe (pub/sub)** คือรูปแบบการส่งข้อความซึ่ง **ผู้เผยแพร่** ปล่อยเหตุการณ์ออกมา และ **ผู้ติดตามวัตถุประสงค์** ตอบสนองต่อพวกเขา โดยไม่รู้จักกันโดยตรง ไลบรารีสถานะจำนวนมาก (และระบบเหตุการณ์) สร้างขึ้นจากสิ่งนี้ — ร้านค้า *เผยแพร่* การเปลี่ยนแปลง และส่วนประกอบ *ติดตามวัตถุประสงค์* พวกเขา

## ร้านค้า pub/sub ขั้นต่ำ

```js
function createStore(initial) {
  let state = initial;
  const subscribers = new Set();

return {
    getState: () => state,
    setState(next) {
      state = { ...state, ...next };
      subscribers.forEach((fn) => fn(state)); // PUBLISH: notify all subscribers
    },
    subscribe(fn) {
      subscribers.add(fn);                     // SUBSCRIBE
      return () => subscribers.delete(fn);      // return an unsubscribe function
    },
  };
}
```

ส่วนประกอบเรียก `subscribe(callback)` เพื่อรับการแจ้งเตือน ร้านค้าเรียกผู้ติดตามวัตถุประสงค์ทุกคนเมื่อสถานะเปลี่ยนแปลง (`setState`) นี่คือวิธีพื้นฐานที่ Redux's `store.subscribe`, Zustand และ event emitters ทำงาน

## ประโยชน์ของการแยกตัวออก

```text
Publisher (the store) doesn't know WHO is listening.
Subscribers don't know WHO published.
→ They're decoupled, communicating only through the event/store.
```

การจับคู่ที่หลวมนี้ช่วยให้ส่วนที่ไม่เกี่ยวข้องของแอปตอบสนองต่อการเปลี่ยนแปลงเดียวกันโดยไม่มีการอ้างอิงโดยตรง — ยืดหยุ่นและขยายได้

## การแลกเปลี่ยน

```text
✓ Pros: decoupled, flexible, many-to-many communication, easy to add listeners
✗ Cons:
  - Implicit flow — hard to trace WHO reacts to an event (vs explicit calls)
  - Memory leaks — forgetting to UNSUBSCRIBE keeps dead listeners alive
  - Debugging — indirection makes "why did this run?" harder to answer
  - Ordering — subscriber execution order can be non-obvious
```

อันตรายเชิงปฏิบัติที่ใหญ่ที่สุดคือ **ลืมยกเลิกการติดตามวัตถุประสงค์** (เช่น เมื่อถอดชิ้นส่วน) ซึ่งรั่วไหลของหน่วยความจำและอาจทำให้ callbacks ทำงานบนชิ้นส่วนที่ตายแล้ว

```jsx
useEffect(() => {
  const unsub = store.subscribe(handleChange);
  return unsub; // ✅ cleanup — unsubscribe on unmount
}, []);
```

## ทำไมจึงมีความสำคัญ

Pub/sub คือ **กลไกพื้นฐาน** ของไลบรารีสถานะและระบบเหตุการณ์ส่วนใหญ่ — การทำความเข้าใจมันจะให้ความกระจ่างว่าร้านค้าแจ้งเตือนส่วนประกอบอย่างไร และ `subscribe`/`unsubscribe` ทำงานอย่างไร

มันอธิบายทั้งพลังงาน (การแยกตัวออก การสื่อสารที่ยืดหยุ่น) และอันตราย (การไหลของข้อมูลโดยปริยายที่ยากต่อการติดตาม และรั่วไหลของหน่วยความจำจากการติดตามวัตถุประสงค์ที่ไม่ได้ทำความสะอาด)

การรับรู้ pub/sub ช่วยให้คุณเหตุผลเกี่ยวกับ reactivity ด้านใต้ฝาปิด และเสริมความสำคัญของการทำความสะอาดการติดตามวัตถุประสงค์เสมอ

ร้านค้า pub/sub ขั้นต่ำ

ประโยชน์ของการแยกตัวออก

การแลกเปลี่ยน

ทำไมจึงมีความสำคัญ

คำถามที่เกี่ยวข้อง