Vad är publish/subscribe-mönstret för tillstånd och dess avvägningar?

Question

Accepted Answer

**Publish/subscribe (pub/sub)** är ett meddelandemönster där **utgivare** sänder ut händelser och **prenumeranter** reagerar på dem, utan att direkt känna till varandra. Många tillståndsbibliotek (och händelsesystem) är byggda på det — ett lager *publicerar* ändringar och komponenter *prenumererar* på dem.

## Ett minimalt pub/sub-lager

```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
    },
  };
}
```

Komponenter anropar `subscribe(callback)` för att meddelas; lagret anropar varje prenumerant när tillståndet ändras (`setState`). Detta är i princip hur Redux's `store.subscribe`, Zustand och event emitters fungerar under huven.

## Fördelarna med lös koppling

```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.
```

Den här lösa kopplingen gör att orelaterade delar av en app kan reagera på samma ändringar utan direkta referenser till varandra — flexibel och utbyggbar.

## Avvägningarna

```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
```

Den största praktiska faran är att **glömma att avsluta prenumerationen** (t.ex. vid komponentborttagning), vilket orsakar minnesläckor och kan få callbacks att köras på döda komponenter.

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

## Varför det är viktigt

Pub/sub är **den bakomliggande mekanismen** för de flesta tillståndsbibliotek och händelsesystem — att förstå det klargör hur lager meddelar komponenter och hur `subscribe`/`unsubscribe` fungerar.

Det förklarar både kraften (lös koppling, flexibel kommunikation) och fallgroparna (implicit dataflöde som är svårt att spåra, och minnesläckor från orensade prenumerationer).

Att känna igen pub/sub hjälper dig resonera om reaktivitet under huven och förstärker vikten av att alltid rensa prenumerationer.