{"componentChunkName":"component---src-templates-content-template-js","path":"/osa6/flux_arkkitehtuuri_ja_zustand","result":{"data":{"markdownRemark":{"html":"
\n

Olemme noudattaneet sovelluksen tilan hallinnassa Reactin suosittelemaa käytäntöä määritellä useiden komponenttien tarvitsema tila ja sitä käsittelevät funktiot sovelluksen komponenttirakenteen ylimmissä komponenteissa. Usein suurin osa tilaa ja sitä käsittelevistä funktioista on määritelty suoraan sovelluksen juurikomponentissa ja välitetty propsien avulla niitä tarvitseville komponenteille. Tämä toimii johonkin pisteeseen saakka, mutta sovelluksen kasvaessa tilan hallinta muuttuu haasteelliseksi.

\n

Flux-arkkitehtuuri

\n

Facebook kehitti jo Reactin historian varhaisvaiheissa tilan hallinnan ongelmia helpottamaan Flux-arkkitehtuurin. Fluxissa sovelluksen tilan hallinta erotetaan kokonaan Reactin komponenttien ulkopuolisiin varastoihin eli storeihin. Storessa olevaa tilaa ei muuteta suoraan, vaan erikseen tähän tarkoitettujen actionien avulla.

\n

Kun action muuttaa storen tilaa, renderöidään näkymät uudelleen:

\n\"Action Dispatcher -> Store -> View\" srcset=\"/static/165b40470776ac449f8b9604d4828004/772e8/flux1.png 200w,\n/static/165b40470776ac449f8b9604d4828004/e17e5/flux1.png 400w,\n/static/165b40470776ac449f8b9604d4828004/5a190/flux1.png 800w,\n/static/165b40470776ac449f8b9604d4828004/c1b63/flux1.png 1200w,\n/static/165b40470776ac449f8b9604d4828004/29007/flux1.png 1600w,\n/static/165b40470776ac449f8b9604d4828004/090a8/flux1.png 2504w\" sizes=\"(max-width: 800px) 100vw, 800px\">\n

Jos sovelluksen käyttö (esim. napin painaminen) aiheuttaa tarpeen tilan muutokseen, tehdään muutos actionin avulla. Tämä taas aiheuttaa uuden näytön renderöitymisen:

\n\"Action Dispatcher -> Store -> View -> Action -> Dispatcher -> View\" srcset=\"/static/7bf90479b6757c7af3b9a9f0e7f19a64/772e8/flux2.png 200w,\n/static/7bf90479b6757c7af3b9a9f0e7f19a64/e17e5/flux2.png 400w,\n/static/7bf90479b6757c7af3b9a9f0e7f19a64/5a190/flux2.png 800w,\n/static/7bf90479b6757c7af3b9a9f0e7f19a64/c1b63/flux2.png 1200w,\n/static/7bf90479b6757c7af3b9a9f0e7f19a64/29007/flux2.png 1600w,\n/static/7bf90479b6757c7af3b9a9f0e7f19a64/a5262/flux2.png 2388w\" sizes=\"(max-width: 800px) 100vw, 800px\">\n

Flux tarjoaa siis standardin tavan sille miten ja missä sovelluksen tila pidetään sekä tavalle tehdä tilaan muutoksia.

\n

Redux

\n

Flux-arkkitehtuuria noudattava Redux oli lähes vuosikymmenen hallitseva tilanhallintaratkaisu React-sovelluksissa. Myös tällä kurssilla käytettiin Reduxia kevääseen 2026 asti. Reduxia on alusta asti vaivannut monimutkaisuus ja boilerplate-koodin suuri määrä. Tilanne parani huomattavasti Redux Toolkitin ilmestymisen myötä, mutta tästä huolimatta yhteisö kehitti koko ajan vaihtoehtoisia tilanhallintaratkaisuja, kuten esimerkiksi MobX, Recoil ja Jotai. Näiden suosio on ollut vaihtelevaa.

\n

Mielenkiintoisin, ja suosituin uusista tulokkaista on ehdottomasti Zustand, ja se on myös meidän valintamme tilanhallintaratkaisuksi. Zustand näyttää tavoittaneen suosiossaan jo itsensä Reduxin:

\n\n

Zustand

\n

Tutustutaan Zustandiin tekemällä jälleen kerran laskurin toteuttava sovellus:

\n\"Renderöity\n

Tehdään uusi Vite‑sovellus ja asennetaan siihen Zustand:

\n
npm install zustand
\n

Ensimmäinen versio, missä vasta laskurin kasvatus toimii, sovelluksesta on seuraavassa:

\n
import { create } from 'zustand'\n\nconst useCounterStore = create(set => ({\n  counter: 0,\n  increment: () => set(state => ({ counter: state.counter + 1 })),\n}))\n\nconst App = () => {\n  const counter = useCounterStore(state => state.counter)\n  const increment = useCounterStore(state => state.increment)\n\n  return (\n    <div>\n      <div>{counter}</div>\n      <div>\n        <button onClick={increment}>plus</button>\n        <button>minus</button>\n        <button>zero</button>\n      </div>\n      \n    </div>\n  )\n}
\n

Sovellus aloittaa luomalla storen eli globaalin tilan Zustandin funktiolla create:

\n
import { create } from 'zustand'\n\nconst useCounterStore = create(set => ({\n  counter: 0,\n  increment: () => set(state => ({ counter: state.counter + 1 })),\n}))
\n

Funktio saa parametriksi funktion, joka palauttaa sovellukselle määriteltävän tilan. Parametri on siis seuraava:

\n
set => ({\n  counter: 0,\n  increment: () => set(state => ({ counter: state.counter + 1 })),\n})
\n

Tilaan on siis määritelty counter, joka on arvoltaan nolla, sekä increment joka taas on funktio.

\n

Sovelluksen komponentit pääsevät käsiksi tilassa määriteltyihin arvoihin sekä funktioihin Zustandin createn avulla määritellyn funktion useCounterStore avulla. Komponentti App ottaa selektorien avulla tilasta käyttöönsä siellä olevan arvon counter sekä funktion increment:

\n
const App = () => {\n  // using selector to pick right part of the store state  const counter = useCounterStore(state => state.counter)  const increment = useCounterStore(state => state.increment)\n  return (\n    <div>\n      <div>{counter}</div>      <div>\n        <button onClick={increment}>plus</button>        <button>minus</button>\n        <button>zero</button>\n      </div>\n      \n    </div>\n  )\n}
\n

Storessa oleva laskurin arvo saadaan siis talletettua muuttujaan seuraavasti:

\n
const counter = useCounterStore(state => state.counter)
\n

Käytössä on selektorifunktio, state => state.counter joka määrää mitä storen sisätä palautetaan. Vastaavalla tavalla saadaan muuttujaan increment storessa oleva funktio.

\n

Napin \"plus\" klikkauksenkäsittelijäksi on annettu tilan funktio increment, joka määriteltiin seuraavasti:

\n
const useCounterStore = create(set => ({\n  counter: 0,\n  increment: () => set(state => ({ counter: state.counter + 1 })),}))
\n

Otetaan funktiomäärittely vielä erilleen:

\n
() => set(state => ({ counter: state.counter + 1 }))
\n

Kyseessä on siis funktio, joka kutsuu funktiota set antaen parametriksi taas funktion. Tämä parametrina oleva funktio määrittelee miten tila muuttuu:

\n
state => ({ counter: state.counter + 1 })
\n

joka taas on lyhennysmerkintä seuraavalle:

\n
state => {\n  return { counter: state.counter + 1 }\n}
\n

Funktio palauttaa uuden tilan, jonka se laskee vanhan tilan state perusteella, eli jos vanha tila on esimerkiksi

\n
{\n  counter: 1,\n  increment: // function definition\n}
\n

tulee uudeksi tilaksi

\n
{\n  counter: 2,\n  increment: // function definition\n}
\n

Tilassa on siis koko ajan mukana myös tilaa muuttava funktio increment.

\n

Tilanmuutosfunktio

\n
state => ({ counter: state.counter + 1 })
\n

koskee ainoastaan tilassa olevaan arvoon counter.

\n

Mikään ei estäisi muuttamasta tilanmuutosfunktiossa myös tilassa olevaa funktiota, eli jos määrittelisimme seuraavasti

\n
state => {\n  return {\n    counter: state.counter + 1 ,\n    increment: console.log('increment broken')\n  }\n}
\n

kasvatusnappi toimisi vain ensimmäisellä kerralla, tämän jälkeen napin painaminen ainoastaan tulostaisi konsoliin.

\n

Kun uudeksi tilaksi asetetaan

\n
state => ({ counter: state.counter + 1 })
\n

päivitetään ainoastaan tilan avaimen counter arvo, eli uusi tila saadaan yhdistämällä vanha tila tilaa muuttavan funktion arvoon. Tämän takia seuraava tilanmuutosfunktio

\n
state => ({})
\n

ei vaikuta tilaan ollenkaan.

\n

Täydennetään vielä sovellus muidenkin nappien osalta:

\n
const useCounterStore = create(set => ({\n  counter: 0,\n  increment: () => set(state => ({ counter: state.counter + 1 })),\n  decrement: () => set(state => ({ counter: state.counter - 1 })),\n  zero: () => set(() => ({ counter: 0 })),  \n}))\n\nconst App = () => {\n  const counter = useCounterStore(state => state.counter)\n  const increment = useCounterStore(state => state.increment)\n  const decrement = useCounterStore(state => state.decrement)\n  const zero = useCounterStore(state => state.zero)\n\n  return (\n    <div>\n      <div>{counter}</div>\n      <div>\n        <button onClick={increment}>plus</button>\n        <button onClick={decrement}>minus</button>\n        <button onClick={zero}>zero</button>\n      </div>\n      \n    </div>\n  )\n}
\n
\n

Mikä ihmeen set ja state

\n

Mistä set tulee? Se on Zustandin create-funktion tarjoama apufunktio, jonka avulla tila päivitetään. create kutsuu sille annettua parametrifunktiota ja välittää sille set-funktion automaattisesti. Sitä ei siis tarvitse itse kutsua tai tuoda mistään, vaan Zustand hoitaa sen.

\n

Mistä taas state tulee? Kun set-funktiolle annetaan parametriksi funktio (eikä suoraan uutta tilaobjektia), Zustand kutsuu tätä funktiota antaen sille argumentiksi storen nykyisen tilan. Näin tilanpäivitysfunktioissa pääsee käyttämään vanhaa tilaa uuden laskemiseen.

\n
\n

Tilan käyttö eri komponenteista

\n

Muokataan sovelluksen rakennetta siten, että storen määrittely siirtyy omaan tiedostoon store.js ja näkymä jakautuu useampaan komponenttiin, jotka on määritelty omina tiedostoina.

\n

Tiedoston store.js sisältö on yllätyksetön

\n
export const useCounterStore = create(set => ({\n  counter: 0,\n  increment: () => set(state => ({ counter: state.counter + 1 })),\n  decrement: () => set(state => ({ counter: state.counter - 1 })),\n  zero: () => set(() => ({ counter: 0 })),  \n}))
\n

Komponentti App pelkistyy seuraavasti

\n
import Display from './Display'\nimport Controls from './Controls'\n\nconst App = () => {\n  return (\n    <div>\n      <Display />\n      <Controls />\n    </div>\n  )\n}\n\nexport default App
\n

Huomioinarvoista, tässä on se, että komponentti App ei nyt välitä tilaa lapsikomponenteilleen, Itse asiassa komponentti ei edes millään tavalla koske tilaan, storen määrittely on eriytetty täysin komponentin ulkopuolelle.

\n

Laskurin arvon näyttävä komponentti on yksinkertainen

\n
import { useCounterStore } from './store'\n\nconst Display = () => {\n  const counter = useCounterStore(state => state.counter)\n\n  return (\n    <div>{counter}</div>\n  )\n}\n\nexport default Display
\n

Komponentti siis pääsee laskurin arvoon käsiksi storen määrittelevän funktion useCounterStore kautta. Tämä on monella tapaa kätevää, ei ole esimerkiksi mitään tarvetta siirrellä tilaa komponentille sen propsien kautta.

\n

Napit määrittelevä komponentti näyttää seuraavalta:

\n
import { useCounterStore } from './store'\n\nconst Controls = () => {\n  const increment = useCounterStore(state => state.increment)\n  const decrement = useCounterStore(state => state.decrement)\n  const zero = useCounterStore(state => state.zero)\n\n  return (\n    <div>\n      <button onClick={increment}>plus</button>\n      <button onClick={decrement}>minus</button>\n      <button onClick={zero}>zero</button>\n    </div>\n  )\n}\n\nexport default Controls
\n

Funktio useCounterStore ottaa parametrinaan selektorifunktion, joka määrittää mitä osaa tilasta halutaan käyttää. Esimerkiksi:

\n
  const increment = useCounterStore(state => state.increment)
\n

Tässä selektorifunktio state => state.increment poimii tilasta increment-avaimen arvon, eli funktion, joka kasvattaa laskuria, ja tallentaa sen increment-muuttujaan.

\n

Voisimme myös ottaa käyttöömme koko tilan, seuraavasti:

\n
  const state = useCounterStore()\n  // tekee saman asian kuin useCounterStore(state => state) eli valitsee koko tilan
\n

Nyt laskurin arvoon ja funktioinin voisi viitata pistenotaatiolla, eli state.counter ja state.counter.

\n

Herääkin kysymys olisiko mahdollista ottaa useita tilan osia käyttöön destrukturoimalla:

\n
import { useCounterStore } from './store'\n\nconst Controls = () => {\n  const { increment, decrement, zero } = useCounterStore()\n  return (\n    <div>\n      <button onClick={increment}>plus</button>\n      <button onClick={decrement}>minus</button>\n      <button onClick={zero}>zero</button>\n    </div>\n  )\n}\n\nexport default Controls
\n

Ratkaisu toimii, mutta siinä on eräs merkittävä heikkous. Destrukturointi aiheuttaa sen, että Controls-komponentti renderöidään uudelleen aina kun laskurin arvo muuttuu vaikka komponentti näyttää ainoastaan painikkeet eikä itse arvoa.

\n

Zustandin paras käytäntö onkin valita tilasta täsmälleen vain ne osat, joita kyseisessä komponentissa tarvitaan. Komponentti renderöityy uudelleen ainoastaan silloin, kun sen valitseman tilan osa muuttuu. Kun sen sijaan kirjoitetaan:

\n
  const { increment, decrement, zero } = useCounterStore()
\n

komponentti ei enää reagoi laskurin arvon muutoksiin, koska se ei ole valinnut sitä tilastaan.

\n

Tilan uudelleenorganisointi

\n

Saamme kuitenkin aikaan varsin nätin ratkaisun uudelleenorganisoimalla tilaa seuraavasti:

\n
export const useCounterStore = create(set => ({\n  counter: 0,\n  actions: {\n    increment: () => set(state => ({ counter: state.counter + 1 })),\n    decrement: () => set(state => ({ counter: state.counter - 1 })),\n    zero: () => set(() => ({ counter: 0 })),\n  }  \n}))
\n

Tilaa muuttavat funktiot on nyt koottu oman avaimen actions alle, ja ne voidaan valita kokonaisuudessaan ja destrukturoiden:

\n
const Controls = () => {\n  \n  const { increment, decrement, zero } = useCounterStore(state => state.actions)\n\n  return (\n    <div>\n      <button onClick={increment}>plus</button>\n      <button onClick={decrement}>minus</button>\n      <button onClick={zero}>zero</button>\n    </div>\n  )\n}
\n

Nyt uudelleenrenderöitymistä ei tapahdu, sillä tilasta on valittu ainoastaan funktiot, jotka pysyvät koko tilan elinajan samana.

\n

Joidenkin parhaiden käytänteiden mukaan, koko tilan määrittelevää funktiota ei kannata exportata koko ohjelman käyttöön. Sensijaan kannattaa luoda siitä pienempiä näkymiä, jotka paljastavat vain tarvittavat osat tilasta. Muokataan tilaa state.js seuraavasti:

\n
import { create } from 'zustand'\n\nconst useCounterStore = create(set => ({\n  counter: 0,\n  actions: {\n    increment: () => set(state => ({ counter: state.counter + 1 })),\n    decrement: () => set(state => ({ counter: state.counter - 1 })),\n    zero: () => set(() => ({ counter: 0 })),\n  }  \n}))\n\n// the hook functions that are used elsewhere in app\nexport const useCounter = () => useCounterStore(state => state.counter)export const useCounterControls = () => useCounterStore(state => state.actions)
\n

Nyt siis storen määrittelevän moduulin ulkopuolella on käytössä funktiot useCounter, jota kutsumalla saadaan laskurin arvo, sekä useCounterControls jota kutsumalla saadaan laskurin arvoa muuttavat funktiot. Käyttö muuttuu hieman:

\n
import { useCounter } from './store'\nconst Display = () => {\n  const counter = useCounter()\n  return (\n    <div>{counter}</div>\n  )\n}
\n
import { useCounterControls } from './store'\nconst Controls = () => {\n  const { increment, decrement, zero } = useCounterControls()\n  return (\n    <div>\n      <button onClick={increment}>plus</button>\n      <button onClick={decrement}>minus</button>\n      <button onClick={zero}>zero</button>\n    </div>\n  )\n}
\n

Näin käytettäessä tilaa, ei ole enää tarvetta käyttää selektorifunktiota, sillä niiden käyttö on piilotettu uusien apufunktioiden määrittelyn sisälle.

\n

Tarkkasilmäisimmät kiinnittivät huomiota siihen että Zustandiin liittyvät funktiot on nimetty alkamaan sanalla use. Syynä tähän on se, että Zustandin funktion create palauttama funktio, eli esimerkissämme useCounterStore on Reactin custom hook-funktio. Myös omat apufunktiomme useCounter ja useCounterControls ovat käytännössä custom hookeja, koska ne piilottavat sisälleen custom hookin useCounterStore käytön.

\n

Custom hookeihin taas liittyy joukko sääntöjä, esimerkiksi niiden nimeämisen oletetaan aina alkavan sanalla use. Osassa 1 läpikäydyt hookien säännöt koskevat myös custom hookeja!

\n
\n
\n

Tehtävä 6.1.

\n

Tehdään uusi versio osan 1 Unicafe-tehtävästä. Hoidetaan sovelluksen tilan käsittely Zustandin avulla.

\n

Voit ottaa sovelluksesi pohjaksi repositoriossa https://github.com/fullstack-hy2020/unicafe-zustand olevan projektin.

\n

Aloita poistamalla kloonatun sovelluksen Git-konfiguraatio ja asentamalla riippuvuudet:

\n
cd unicafe-zustand   // mene kloonatun repositorion hakemistoon\nrm -rf .git\nnpm install
\n

6.1: Unicafe revisited

\n

Toteuta sitten sovellukseen koko sen varsinainen toiminnallisuus.

\n

Sovelluksesi ulkonäkö ja toiminnallisuus on sama kuin osassa 1:

\n\n
\n
\n

Zustand-muistiinpanot

\n

Tavoitteenamme on tehdä vanhasta kunnon muistiinpanosovelluksesta Zustandia käyttävä versio.

\n

Sovelluksen ensimmäinen versio on seuraava. Komponentti App:

\n
import { useNotes } from './store'\n\nconst App = () => {\n  const notes = useNotes()\n\n  return (\n    <div>\n      <ul>\n        {notes.map(note => (\n          <li key={note.id}>\n            {note.important ? <strong>{note.content}</strong> : note.content}\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\nexport default App
\n

Store näyttää aluksi seuraavalta:

\n
import { create } from 'zustand'\n\nconst useNoteStore = create(set => ({\n  notes: [\n    {\n      id: 1,\n      content: 'Zustand is less complex than Redux',\n      important: true,\n    },\n  ],\n}))\n\nexport const useNotes = () => useNoteStore(state => state.notes)
\n

Toistaiseksi sovelluksessa ei siis ole toiminnallisuutta uusien muistiinpanojen lisäämiseen, myöskään store ei vielä sitä tue. Tila on alustettu siten, että sinne on lisätty jo yksi muistiinpano jotta voimme varmistua, että sovellus onnistuu renderöimään tilan.

\n

Puhtaat funktiot ja muuttumattomat (immutable) oliot

\n

Ensimmäinen yritys muistiinpanon lisäävästsä actionista on seuraava:

\n
note => set(\n          state => {\n            state.notes.push(note)\n            return state\n          }\n        )
\n

Funktio saa parametrikseen muistiinpanon, ja palauttaa tilan, missä vanhaan tilaan state on lisätty uusi muistiinpano.

\n

Yrityksemme on kuitenkin sääntöjen vastainen. Zustandin dokumentaatio toteaa Like with React's useState, we need to update state immutably, Kuten tiedämme state.notes.push muuttaa tila olion tilaa, eli ratkaisu ei kelpaa.

\n

Oikeaoppinen tapa on käyttää esimerkiksi Array.concat funktiota, joka ei muuta olemassaolevaa tilaa, vaan luo siitä uuden kopion, johon uusi muistiinpano on lisätty:

\n
note => set(\n          state => {\n            return { notes: state.notes.concat(note) }\n          }\n        )
\n

Kokonaisuudessaan storen määrittely näyttää nyt seuraavalta

\n
import { create } from 'zustand'\n\nconst useNoteStore = create(set => ({\n  notes: [],\n  actions: {\n    add: note => set(\n      state => ({ notes: state.notes.concat(note) })\n    )\n  }\n}))\n\nexport const useNotes = () => useNoteStore(state => state.notes)\nexport const useNoteActions = () => useNoteStore(state => state.actions)
\n
\n

Array spread -syntaksi

\n

Toinen usein nähty tapa hoitaa sama asia on käyttää taulukkojen spread -syntaksia:

\n
state => ({ notes: [...state.notes, note] })
\n

Tässä siis muodostetaan taulukko, johon otetaan spread-syntaksilla jokainen taulukon state.notes alkioista sekä lisätään vielä loppuun uusi muistiinpano notes. On makuasia käyttääkö spreadia vai funktiota concat.

\n
\n

Teknisesti ilmaisten Zustandilla muodostettu tila on muuttumaton (engl. immutable), ja tilaa muuttavien action-funktioiden tulee olla puhtaita funktioita.

\n

Puhtaat funktiot ovat sellaisia, että ne eivät aiheuta mitään sivuvaikutuksia ja ne palauttavat aina saman vastauksen samoilla parametreilla kutsuttaessa.

\n

Ei-kontrolloitu lomake

\n

Lisätään sovellukseen mahdollisuus uusien muistiinpanojen tekemiseen:

\n
import { useNotes, useNoteActions } from './store'\n\nconst App = () => {\n  const notes = useNotes()\n  const { add } = useNoteActions()\n  const generateId = () => Number((Math.random() * 1000000).toFixed(0))\n  const addNote = (e) => {    e.preventDefault()    const content = e.target.note.value    add({ id: generateId(), content, important: false })    e.target.reset()  }\n  return (\n    <div>\n      <form onSubmit={addNote}>        <input name=\"note\" />        <button type=\"submit\">add</button>      </form>      <ul>\n        {notes.map(note => (\n          <li key={note.id}>\n            {note.important ? <strong>{note.content}</strong> : note.content}\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}
\n

Toteutus on melko suoraviivainen. Huomionarvoista uuden muistiinpanon lisäämisessä on nyt se, että toisin kuin aiemmat Reactilla toteutetut lomakkeet, emme ole nyt sitoneet lomakkeen kentän arvoa komponentin App tilaan. React kutsuu tällaisia lomakkeita ei-kontrolloiduiksi.

\n
\n

Ei-kontrolloiduilla lomakkeilla on tiettyjä rajoitteita. Ne eivät mahdollista esim. lennossa annettavia validointiviestejä, lomakkeen lähetysnapin disabloimista sisällön perusteella yms. Meidän käyttötapaukseemme ne kuitenkin tällä kertaa sopivat.\nVoit halutessasi lukea aiheesta enemmän esim. täältä.

\n
\n

Lomake on erittäin yksinkertainen:

\n
<form onSubmit={addNote}>\n  <input name=\"note\" />\n  <button type=\"submit\">add</button>\n</form>
\n

Huomioinarvoista lomakkeessa on se, että syötekentällä on nimi. Tämän ansiosta käsittelijäfunktio pääsee kentän arvoon käsiksi.

\n

Lisäyksen käsittelijä on sekin suoraviivainen

\n
  const addNote = (e) => {\n    e.preventDefault()\n    const content = e.target.note.value\n    add({ id: generateId(), content, important: false })\n    e.target.reset()\n  }
\n

Lomakkeen tekstikentästä haetaan sisältö e.target.note.value muuttujaan, jota käytetään parametrina muistiinpanon lisäysfunktion add kutsussa.

\n

Viimeinen rivi eli, eli e.target.reset() tyhjentää lomakkeen.

\n

Sovelluksen tämänhetkinen koodi on kokonaisuudessaan GitHubissa, branchissa part6-1.

\n

Lisää komponentteja ja toiminnallisuutta

\n

Jaetaan sovellus useampaan komponenttiin. Eriytetään uuden muistiinpanon luominen, muistiinpanojen lista sekä yksittäisen muistiinpanon esittäminen omiksi komponenteikseen.

\n

Komponentti App on muutoksen jälkeen yksinkertainen:

\n
const App = () => (\n  <div>\n    <NoteForm />\n    <NoteList />\n  </div>\n)
\n

Muistiinpanon luominen eli NoteForm ei sisällä mitään dramaattista, ei toisteta sen koodia täällä.

\n

Muistiinpanojen listaamisesta vastaava komponentti NoteList näyttää seuraavalta

\n
import { useNotes } from './store'\nimport Note from './Note'\n\nconst NoteList = () => {\n  const notes = useNotes()\n\n  return (\n    <ul>\n      {notes.map(note => (\n        <Note key={note.id} note={note} />\n      ))}\n    </ul>\n  )\n}
\n

Komponentti siis hakee storesta muistiinpanojen listan, ja luo jokaista vastaavan Note komponentin, jolle se välittää muistiinpanon tiedot propsina:

\n
const Note = ({ note }) => (\n  <li>\n    {note.important ? <strong>{note.content}</strong> : note.content}\n  </li>\n)
\n

Lisätään vielä sovellukseen mahdollisuus muistiinpanon tärkeyden muuttamiseen. Komponentti on muutoksen jälkeen seuraava:

\n
import { useNoteActions } from './store'\n\nconst Note = ({ note }) => {\n  const { toggleImportance } = useNoteActions()\n  return (\n    <li>\n      {note.important ? <strong>{note.content}</strong> : note.content}\n      <button onClick={() => toggleImportance(note.id)}>        {note.important ? 'make not important' : 'make important'}      </button>    </li>\n  )\n}
\n

Komponentti destrukturoi funktion useNoteActions paluuarvosta tärkeyden muuttavan funktion, jota se kutsuu muutosnappia klikatessa.

\n

Tärkeyden muuttavan funktion toteutus näyttää seuraavalta:

\n
import { create } from 'zustand'\n\nconst useNoteStore = create(set => ({\n  notes: [],\n  actions: {\n    add: note => set(\n      state => ({ notes: state.notes.concat(note) })\n    ),\n    toggleImportance: id => set(      state => ({        notes: state.notes.map(note =>          note.id === id ? { ...note, important: !note.important } : note        )      })    )  }\n}))
\n

Funktio siis saa parametrikseen muutettavan muistiinpanon id:n. Uusi tila muodostetaan vanhan perusteella funktion map avulla siten, että mukaan otetaan kaikki vanhat\nmuistiinpanot, paitsi muutettavasta muistiinpanosta tehdään versio, jossa sen tärkeys muuttuu päinvastaiseksi:

\n
{ ...note, important: !note.important }
\n

Sovelluksen tämänhetkinen koodi on kokonaisuudessaan GitHubissa, branchissa part6-2.

\n
\n
\n

Tehtävät 6.2.-6.6.

\n

Toteutetaan uusi versio ensimmäisen osan anekdoottien äänestyssovelluksesta. Ota ratkaisusi pohjaksi repositoriossa https://github.com/fullstack-hy2020/zustand-anecdotes oleva projekti.

\n

Jos kloonaat projektin olemassaolevan Git-repositorion sisälle, poista kloonatun sovelluksen Git-konfiguraatio:

\n
cd zustand-anecdotes  // mene kloonatun repositorion hakemistoon\nrm -rf .git
\n

Sovellus käynnistyy normaaliin tapaan, mutta joudut ensin asentamaan sen riippuvuudet:

\n
npm install\nnpm run dev
\n

Kun teet seuraavat tehtävät, tulisi sovelluksen näyttää seuraavalta:

\n\"Sovellus\n

6.2: anekdootit, step1

\n

Toteuta mahdollisuus anekdoottien äänestämiseen. Äänien määrä tulee tallettaa Zustand-storeen.

\n

6.3: anekdootit, step2

\n

Tee sovellukseen mahdollisuus uusien anekdoottien lisäämiselle.

\n

Voit pitää lisäyslomakkeen aiemman esimerkin tapaan ei-kontrolloituna.

\n

6.4: anekdootit, step3

\n

Eriytä uuden anekdootin luominen omaksi komponentikseen nimeltään AnecdoteForm ja Eriytä anekdoottilistan näyttäminen omaksi komponentikseen nimeltään AnecdoteList.

\n

Tämän tehtävän jälkeen komponentin App pitäisi näyttää seuraavalta:

\n
import AnecdoteForm from './components/AnecdoteForm'\nimport AnecdoteList from './components/AnecdoteList'\n\nconst App = () => {\n  return (\n    <div>\n      <h2>Anecdotes</h2>\n      <AnecdoteList />\n      <AnecdoteForm />\n    </div>\n  )\n}\n\nexport default App
\n

6.5: anekdootit, step4

\n

Huolehdi siitä, että anekdootit pysyvät äänten mukaisessa suuruusjärjestyksessä.

\n

HUOM tässä tehtävässä kannattanee hyödyntää funktiota Array.toSorted, joka ei järjestä alkuperäistä taulukkoa vaan luo siitä järjestetyn kopion. Tämä sen takia, että Zustand-tilaa ei saa muuttaa!

\n
","frontmatter":{"mainImage":{"publicURL":"/static/a3b7bc3fafcb5b47227616e1343970e5/part-6.svg"},"part":6,"letter":"a","lang":"fi"}}},"pageContext":{"part":6,"letter":"a","lang":"fi"}},"staticQueryHashes":["3128451518"]}