Hva er publish/subscribe-mønsteret for state, og hva er fordelene og ulempene?

Question

Accepted Answer

**Publish/subscribe (pub/sub)** er et meldingsmønster hvor **utgiver** sender events og **abonnenter** reagerer på dem, uten å kjenne hverandre direkte. Mange state-biblioteker (og event-systemer) er bygget på det — en store *publiserer* endringer og komponenter *abonnerer* på dem.

## En minimal pub/sub-store

```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 kaller `subscribe(callback)` for å bli varslet; storen kaller hver abonnent når tilstanden endres (`setState`). Dette er i essens hvordan Redux's `store.subscribe`, Zustand, og event emitters fungerer under motorhuven.

## Fordelene ved løs koblinger

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

Denne løse koblingen lar uavhengige deler av en app reagere på de samme endringene uten direkte referanser til hverandre — fleksibelt og utvidbart.

## Fordelene og ulempene

```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ørste praktiske faren er **å glemme å avmelde** (for eksempel ved component unmount), som forårsaker minnelekkasje og kan få callbacks til å kjøre på døde komponenter.

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

## Hvorfor det er viktig

Pub/sub er den **underliggende mekanismen** for de fleste state-biblioteker og event-systemer — å forstå det avmystifiserer hvordan stores varsler komponenter og hvordan `subscribe`/`unsubscribe` fungerer.

Det forklarer både kraften (løs koblet, fleksibel kommunikasjon) og fallene (implisitt dataflyt som er vanskelig å spore, og minnelekkasje fra rensede abonnementer).

Å gjenkjenne pub/sub hjelper deg å resonere om reaktivitet under motorhuven og forsterker viktigheten av alltid å rydde opp abonnementer.