Skausmo vaistas: subscribe ir notify

Prisimink 8 pamokos pabaigą. toggleFavorite turėjo perpiešti tris vaizdus ranka:

renderGallery(...);      // ♡ užpildymas
renderCollection();      // eilutė
renderHome();            // skaitiklis

O removeFromCollection pamiršo renderGallery() — ir ♡ liko užpildytas ant nuotraukos, kurios kolekcijoje jau nebuvo. Ekranas tyliai melavo. Ir esmė buvo ne neatidumas: struktūriškai kiekvienas veiksmas privalėjo žinoti visus vaizdus, o niekas to neužtikrino.

Štai vaistas. Vietoj to, kad veiksmas kviestų kiekvieną vaizdą, būsena paskelbia „aš pasikeičiau" vieną kartą, o vaizdai patys į tai reaguoja. Tai — pub/sub (publish/subscribe), o realizacija stebina savo mažumu:

const listeners = new Set();

export function subscribe(fn) {          // vaizdas: „praneškit man, kai pasikeis"
  listeners.add(fn);
  return () => listeners.delete(fn);     // grąžinam atsisakymo funkciją
}

function notify() {                       // veiksmas: „aš pakeičiau — atsinaujinkit"
  listeners.forEach(fn => fn(state));
}

Dabar toggleFavorite susitraukia iš trijų perpiešimų į vieną:

export function toggleFavorite(pic) {
  // ...pakeičiam favorites...
  persistFavorites();
  notify();                              // ← viskas. Vaizdai atsinaujina patys.
}

„Pamiršto perpiešimo" klaida tampa neįmanoma — nebėra ko pamiršti. Nauji veiksmai (removeFavorite, updateFavorite) tiesiog kvies notify() ir niekada neminės jokio vaizdo.

Antra tema — išsaugojimas. Mėgstamiausius laikysim localStorage: JSON.stringify rašant, JSON.parse skaitant. Bet localStorage gali nepavykti (sugadintas JSON, išsemta kvota, privatus naršymas jį išjungia visai), tad apsisaugosim — kad programa nelūžtų, o tik prarastų išsaugojimą.