Co je publish/subscribe pattern pro state a jaké má trade-offs?

Question

IT Interview Practice · Accepted Answer

**Publish/subscribe (pub/sub)** je messaging pattern, kde **vydavatelé (publishers)** vysílají events a **odběratelé (subscribers)** na ně reagují, aniž by se o sobě navzájem přímo věděli. Mnoho state knihoven (a event systémů) je na něm postaveno — store *publikuje* změny a komponenty se na ně *přihlašují*.

## Minimální 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
    },
  };
}
```

Komponenty volají `subscribe(callback)` aby byly informovány; store zavolá každého subscribera, když se state změní (`setState`). Takto fungují pod kapotou `store.subscribe` v Reduxu, Zustand a event emittery.

## Benefit oddělení

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

Toto volné propojení umožňuje nesouvisejícím částem aplikace reagovat na stejné změny bez přímých odkazů na sebe — flexibilní a rozšiřitelné.

## Trade-offs

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

Největší praktické nebezpečí je **zapomenout se odhlásit (unsubscribe)** (např. při unmountování komponenty), což způsobuje memory leaky a může vést k tomu, že se callbacky volají na mrtvých komponentách.

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

## Proč to je důležité

Pub/sub je **základní mechanismus** většiny state knihoven a event systémů — porozumění mu vyjasňuje, jak stores notifikují komponenty a jak fungují `subscribe`/`unsubscribe`.

Vysvětluje jak výhody (decoupled, flexibilní komunikace), tak úskalí (implicitní data flow, který je těžké vysledovat, a memory leaky ze nečištěných subscriptions).

Rozeznání pub/sub vám pomáhá uvažovat o reaktivitě pod kapotou a posiluje důležitost vždy vyčistit subscriptions.

Minimální pub/sub store

Benefit oddělení

Trade-offs

Proč to je důležité

Související otázky