main.js — views subscribe themselves
All that's left is to subscribe. In the code column — main.js with a single subscribe() registration. That's the whole trick: one place, set up once, replaces all the scattered manual re-renders from lesson 8.
subscribe(() => {
render(); // the gallery
renderCollection(); // the collection (placeholder until lesson 10)
renderHome(); // the nav counter
});
Compare the path:
LESSON 8: each action → renderGallery() + renderCollection() + renderHome()
(and forget one → the silent lie)
LESSON 9: each action → notify()
notify() → the one subscribe() → whatever's needed re-renders
The difference is fundamental: actions no longer know about views. toggleFavorite, removeFavorite, updateFavorite — all end in notify() and never mention renderGallery. One place wires the views. There's nothing to forget.
Verify.
1. Click ♡ in the gallery → the card fills, the nav counter rises, the collection updates — from ONE click.
2. Reload the page → favorites are STILL there (localStorage).
3. Remove from the collection → go back to the gallery, the ♡ is already empty. The lie is GONE.
Gotcha (localStorage is strings only).
localStoragestores only strings. An object needsJSON.stringifyto write andJSON.parseto read. Forget it and you get"[object Object]"instead of data. And remember the guard:JSON.parsethrows on corrupt text, so reads are always insidetry/catch.
Notice. From this lesson on, every feature (the collection, forms, modals) will only read
getState()and callnotify(). There will be no more manual re-renders — for the rest of the course.