Kai būsena išsibarsto

Ši pamoka — kurso lūžis. Iki šiol viskas augo sklandžiai. Dabar pamatysim, kur veda „paprastas" būdas valdyti būseną — ir kodėl to skausmo reikia.

Pažiūrėk, kaip kaupėsi būsena. 6 pamokoje atsirado isLoading ir error. 7-oje — searchQuery. Pridėk kolekcijos (10 pamoka) collectionQuery, sortKey, currentPage, pageSize, plius pictures, favorites, daysToShow — ir turi apie dešimt laisvų kintamųjų, išbarstytų po main.js. Tai — visa programos atmintis, be jokio šeimininko.

Ir čia — problema. Trys vaizdai priklauso nuo tų pačių favorites:

• Galerija — ar kortelės ♡ užpildytas.
• Kolekcija — ar yra tos nuotraukos eilutė.
• Pradžios ekranas — „išsaugota" skaitiklis.

Kai favorites pasikeičia (paspaudi ♡), visi trys turi persipiešti. O kas juos perpiešia? Tu, ranka — kiekvienas veiksmas turi iškviesti renderGallery() IR renderCollection() IR renderHome().

Kol veiksmų mažai, atrodo valdoma. Bet kiekvienas naujas veiksmas privalo žinoti visus vaizdus, priklausančius nuo jo liečiamų duomenų. Ir niekas — nei kompiliatorius, nei naršyklė — neįspės, jei vieną pamirši. DOM ir duomenys ima skirtis, o juos kartu laiko tik tavo atmintis. Atmintis sugenda.

Šioje pamokoje tą klaidą atkursim ir pamatysim — tyliai meluojantį ekraną. Nes būtent šitą 9 pamokoje išspręs pub/sub, ir būtent dėl šito vėliau TypeScript arka „suveikia". Jei ši pamoka neskauda — viskas po jos nublanksta.