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

\n

Tämä on kurssin jo käytöstä poistettu Reduxiin liittyvä materiaali. Voit jatkaa tämän matariaalin ja siinä olevien tehtävien tekemistä jos olet jo aloittanut osan tekemisen Reduxilla. Muussa tapauksessa kannattaa seurata uutta materiaalia. Tämä materiaali poistuu näkyvistä kesäkuusa 2026.

\n

\n

\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ä kompontenteissa. 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 tapahtumien eli actionien avulla.

\n

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

\n

\"Action

\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

\n

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

\n

Redux

\n

Facebookilla on olemassa valmis toteutus Fluxille, mutta käytämme kuitenkin saman periaatteen mukaan toimivaa mutta hieman yksinkertaisempaa Redux-kirjastoa, jota myös Facebookilla käytetään nykyään alkuperäisen Flux-toteutuksen sijaan.

\n

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

\n

\"Renderöity

\n

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

\n

npm install redux

\n

Fluxin tapaan Reduxissa sovelluksen tila talletetaan storeen.

\n

Koko sovelluksen tila talletetaan yhteen storen tallettamaan JavaScript-objektiin. Koska sovelluksemme ei tarvitse mitään muuta tilaa kuin laskurin arvon, talletetaan se storeen sellaisenaan. Jos sovelluksen tila olisi monimutkaisempi, talletettaisiin \"eri asiat\" storessa olevaan olioon erillisinä kenttinä.

\n

Storen tilaa muutetaan actionien avulla. Actionit ovat olioita, joilla on vähintään actionin tyypin määrittelevä kenttä type. Sovelluksessamme tarvitsemme esimerkiksi seuraavaa actionia:

\n

{\n  type: 'INCREMENT'\n}

\n

Jos actioneihin liittyy dataa, määritellään niille tarpeen vaatiessa muitakin kenttiä. Laskurisovelluksemme on kuitenkin niin yksinkertainen, että actioneille riittää pelkkä tyyppikenttä.

\n

Actionien vaikutus sovelluksen tilaan määritellään reducerin avulla. Käytännössä reducer on funktio, joka saa parametrikseen staten nykyisen tilan sekä actionin ja palauttaa staten uuden tilan.

\n

Määritellään nyt sovelluksellemme reducer tiedostoon main.jsx. Tiedosto näyttää aluksi seuraavalta:

\n

const counterReducer = (state, action) => {\n  if (action.type === 'INCREMENT') {\n    return state + 1\n  } else if (action.type === 'DECREMENT') {\n    return state - 1\n  } else if (action.type === 'ZERO') {\n    return 0\n  }\n\n  return state\n}

\n

Ensimmäinen parametri on siis storessa oleva tila. Reducer palauttaa uuden tilan actionin tyypin mukaan. Eli esim. actionin tyypin ollessa INCREMENT tila saa arvokseen vanhan arvon plus yksi. Jos actionin tyyppi on ZERO tilan uusi arvo on nolla.

\n

Muutetaan koodia vielä hiukan. Reducereissa on tapana käyttää if:ien sijaan switch-komentoa.\nMääritellään myös parametrille state oletusarvoksi 0. Näin reducer toimii vaikka storen tilaa ei olisi vielä alustettu.

\n

const counterReducer = (state = 0, action) => {\n  switch (action.type) {\n    case 'INCREMENT':\n      return state + 1\n    case 'DECREMENT':\n      return state - 1\n    case 'ZERO':\n      return 0\n    default: // jos ei mikään ylläolevista tullaan tänne\n      return state\n  }\n}

\n

Reduceria ei ole tarkoitus kutsua koskaan suoraan sovelluksen koodista. Reducer ainoastaan annetaan parametrina storen luovalle createStore-funktiolle:

\n

import { createStore } from 'redux'\nconst counterReducer = (state = 0, action) => {\n  switch (action.type) {\n    case 'INCREMENT':\n      return state + 1\n    case 'DECREMENT':\n      return state - 1\n    case 'ZERO':\n      return 0\n    default:\n      return state\n  }\n}\n\nconst store = createStore(counterReducer)

\n

Koodieditori saattaa huomauttaa, että createStore on vanhentunut. Ei välitetä siitä toistaiseksi, alempana on tarkempi selitys asiasta.

\n

Store käyttää nyt reduceria käsitelläkseen actioneja, jotka dispatchataan eli \"lähetetään\" storelle sen dispatch-metodilla:

\n

store.dispatch({type: 'INCREMENT'})

\n

Storen tilan saa selville metodilla getState.

\n

Esim. seuraava koodi

\n

// ...\n\nconst store = createStore(counterReducer)\n\nconsole.log(store.getState())store.dispatch({type: 'INCREMENT'})store.dispatch({type: 'INCREMENT'})store.dispatch({type: 'INCREMENT'})console.log(store.getState())store.dispatch({type: 'ZERO'})store.dispatch({type: 'DECREMENT'})console.log(store.getState())

\n

tulostaisi konsoliin

\n

0\n3\n-1

\n

sillä ensin storen tila on 0. Kolmen INCREMENT-actionin jälkeen tila on 3, ja lopulta actionien ZERO ja DECREMENT jälkeen -1.

\n

Kolmas storen tärkeä metodi on subscribe, jonka avulla voidaan määritellä takaisinkutsufunktioita, joita store kutsuu sen tilan muuttumisen yhteydessä.

\n

Esimerkkinä voisimme tulostaa jokaisen storen muutoksen konsoliin näin:

\n

store.subscribe(() => {\n  const storeNow = store.getState()\n  console.log(storeNow)\n})

\n

Tällöin koodi

\n

// ...\n\nconst store = createStore(counterReducer)\n\nstore.subscribe(() => {  const storeNow = store.getState()  console.log(storeNow)})\nstore.dispatch({ type: 'INCREMENT' })store.dispatch({ type: 'INCREMENT' })store.dispatch({ type: 'INCREMENT' })store.dispatch({ type: 'ZERO' })store.dispatch({ type: 'DECREMENT' })

\n

tulostaisi

\n

1\n2\n3\n0\n-1

\n

Laskurisovelluksemme koodi on seuraavassa. Kaikki koodi on kirjoitettu samaan tiedostoon, joten store on suoraan React-koodin käytettävissä. Tutustumme React/Redux-koodin parempiin strukturointitapoihin myöhemmin. Tiedoston main.jsx sisältö näyttää seuraavalta:

\n

import ReactDOM from 'react-dom/client'\nimport { createStore } from 'redux'\n\nconst counterReducer = (state = 0, action) => {\n  switch (action.type) {\n    case 'INCREMENT':\n      return state + 1\n    case 'DECREMENT':\n      return state - 1\n    case 'ZERO':\n      return 0\n    default:\n      return state\n  }\n}\n\nconst store = createStore(counterReducer)\n\nconst App = () => {\n  return (\n    <div>\n      <div>{store.getState()}</div>\n      <button onClick={() => store.dispatch({ type: 'INCREMENT' })}>\n        plus\n      </button>\n      <button onClick={() => store.dispatch({ type: 'DECREMENT' })}>\n        minus\n      </button>\n      <button onClick={() => store.dispatch({ type: 'ZERO' })}>\n        zero\n      </button>\n    </div>\n  )\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'))\n\nconst renderApp = () => {\n  root.render(<App />)\n}\n\nrenderApp()\nstore.subscribe(renderApp)

\n

Koodissa on pari huomionarvoista seikkaa. App renderöi laskurin arvon kysymällä sitä storesta metodilla store.getState(). Nappien tapahtumankäsittelijät dispatchaavat suoraan oikean tyyppiset actionit storelle.

\n

Kun storessa olevan tilan arvo muuttuu, ei React osaa automaattisesti renderöidä sovellusta uudelleen. Olemmekin rekisteröineet koko sovelluksen renderöinnin suorittavan funktion renderApp kuuntelemaan storen muutoksia metodilla store.subscribe. Huomaa, että joudumme kutsumaan heti alussa metodia renderApp, sillä ilman kutsua sovelluksen ensimmäistä renderöintiä ei tapahdu ollenkaan.

\n

Huomautus funktion createStore käytöstä

\n

Tarkkasilmäisimmät huomaavat, että funktion createStore nimen päällä on viiva. Jos hiiren vie nimen päälle, tulee asialle selitystä

\n

\n

Selitys on kokonaisuudessaan seuraava

\n

\n
We recommend using the configureStore method of the @reduxjs/toolkit package, which replaces createStore.
\n
Redux Toolkit is our recommended approach for writing Redux logic today, including store setup, reducers, data fetching, and more.
\n
For more details, please read this Redux docs page: https://redux.js.org/introduction/why-rtk-is-redux-today
\n
configureStore from Redux Toolkit is an improved version of createStore that simplifies setup and helps avoid common bugs.
\n
You should not be using the redux core package by itself today, except for learning purposes. The createStore method from the core redux package will not be removed, but we encourage all users to migrate to using Redux Toolkit for all Redux code.
\n

\n

Funktion createStore sijaan siis suositellaan käytettäväksi hieman \"kehittyneempää\" funktiota configureStore, ja mekin tulemme ottamaan sen käyttöömme kun olemme ottaneet Reduxin perustoiminnallisuuden haltuun.

\n

Sivuhuomio: createStore on määritelty olevan \"deprecated\", joka yleensä tarkoittaa sitä, että ominaisuus tulee poistumaan kirjaston jossain uudemmassa versiossa. Yllä oleva selitys ja tämäkin keskustelu paljastavat, että createStore ei tule poistumaan, ja sille onkin annettu ehkä hieman virheellisin perustein status deprecated. Funktio ei siis ole vanhentunut, mutta nykyään on olemassa suositeltavampi, uusi tapa tehdä suunnilleen sama asia.

\n

Redux-muistiinpanot

\n

Tavoitteenamme on muuttaa muistiinpanosovellus käyttämään tilanhallintaan Reduxia. Katsotaan kuitenkin ensin eräitä konsepteja hieman yksinkertaistetun muistiinpanosovelluksen kautta.

\n

Sovelluksen ensimmäinen versio tiedostossa main.jsx on seuraava:

\n

import ReactDOM from 'react-dom/client'\nimport { createStore } from 'redux'\n\nconst noteReducer = (state = [], action) => {\n  switch (action.type) {\n    case 'NEW_NOTE':\n      state.push(action.payload)\n      return state\n    default:\n      return state\n  }\n}\n\nconst store = createStore(noteReducer)\n\nstore.dispatch({\n  type: 'NEW_NOTE',\n  payload: {\n    content: 'the app state is in redux store',\n    important: true,\n    id: 1\n  }\n})\n\nstore.dispatch({\n  type: 'NEW_NOTE',\n  payload: {\n    content: 'state changes are made with actions',\n    important: false,\n    id: 2\n  }\n})\n\nconst App = () => {\n  return (\n    <div>\n      <ul>\n        {store.getState().map(note => (\n          <li key={note.id}>\n            {note.content} <strong>{note.important ? 'important' : ''}</strong>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'))\n\nconst renderApp = () => {\n  root.render(<App />)\n}\n\nrenderApp()\nstore.subscribe(renderApp)

\n

Toistaiseksi sovelluksessa ei siis ole toiminnallisuutta uusien muistiinpanojen lisäämiseen, mutta voimme toteuttaa sen dispatchaamalla NEW_NOTE-tyyppisiä actioneja koodista.

\n

Actioneissa on nyt tyypin lisäksi kenttä payload, joka sisältää lisättävän muistiinpanon:

\n

{\n  type: 'NEW_NOTE',\n  payload: {\n    content: 'state changes are made with actions',\n    important: false,\n    id: 2\n  }\n}

\n

Kentän nimen valinta ei ole sattumanvarainen. Yleinen konventio on, että actioneilla on juurikin kaksi kenttää, tyypin kertova type ja actionin mukana olevan tiedon sisältävä payload.

\n

Puhtaat funktiot ja muuttumattomat (immutable) oliot

\n

Reducerimme alustava versio on yksinkertainen:

\n

const noteReducer = (state = [], action) => {\n  switch (action.type) {\n    case 'NEW_NOTE':\n      state.push(action.payload)\n      return state\n    default:\n      return state\n  }\n}

\n

Tila on nyt taulukko. NEW_NOTE-tyyppisen actionin seurauksena tilaan lisätään uusi muistiinpano metodilla push.

\n

Sovellus näyttää toimivan, mutta määrittelemämme reduceri on huono, sillä se rikkoo Reduxin reducerien perusolettamusta siitä, että reducerien 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

Lisäsimme tilaan uuden muistiinpanon metodilla state.push(action.payload), joka muuttaa state-olion tilaa. Tämä ei ole sallittua. Ongelman voi korjata helposti käyttämällä metodia concat, joka luo uuden taulukon, jonka sisältönä on vanhan taulukon alkiot sekä lisättävä alkio:

\n

const noteReducer = (state = [], action) => {\n  switch (action.type) {\n    case 'NEW_NOTE':\n      return state.concat(action.payload)    default:\n      return state\n  }\n}

\n

Reducerin tilan tulee koostua muuttumattomista eli immutable-olioista. Jos tilaan tulee muutos, ei vanhaa oliota muuteta, vaan se korvataan uudella muuttuneella oliolla. Juuri näin toimimme uudistuneessa reducerissa, eli vanha taulukko korvaantuu uudella.

\n

Laajennetaan reduceria siten, että se osaa käsitellä muistiinpanon tärkeyteen liittyvän muutoksen:

\n

{\n  type: 'TOGGLE_IMPORTANCE',\n  payload: {\n    id: 2\n  }\n}

\n

Koska meillä ei ole vielä koodia joka käyttää ominaisuutta, laajennetaan reduceria testivetoisesti.

\n

Testiympäristön konfigurointi

\n

Konfiguroidaan sovellukseen Vitest. Asennetaan se sovelluksen kehityksenaikaiseksi riippuvuudeksi:

\n

npm install --save-dev vitest

\n

Lisätään tiedostoon package.json testit suorittava skripti:

\n

{\n  // ...\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build\",\n    \"lint\": \"eslint .\",\n    \"preview\": \"vite preview\",\n    \"test\": \"vitest\"  },\n  // ...\n}

\n

Jotta testaus olisi helpompaa, siirretään reducerin koodi ensin omaan moduuliinsa tiedostoon src/reducers/noteReducer.js:

\n

const noteReducer = (state = [], action) => {\n  switch (action.type) {\n    case 'NEW_NOTE':\n      return state.concat(action.payload)\n    default:\n      return state\n  }\n}\n\nexport default noteReducer

\n

Tiedosto main.jsx muuttuu seuraavasti:

\n

import ReactDOM from 'react-dom/client'\nimport { createStore } from 'redux'\nimport noteReducer from './reducers/noteReducer'\nconst store = createStore(noteReducer)\n\n// ...

\n

Otetaan lisäksi käyttöön kirjasto deep-freeze, jonka avulla voimme varmistaa, että reducer on määritelty oikeaoppisesti puhtaana funktiona. Asennetaan kirjasto kehitysaikaiseksi riippuvuudeksi:

\n

npm install --save-dev deep-freeze

\n

Olemme nyt valmiita kirjoittamaan testejä.

\n

Testit noteReducerille

\n

Aloitetaan tekemällä testi actionin NEW_NOTE käsittelylle. Määritellään testi tiedostoon src/reducers/noteReducer.test.js:

\n

import deepFreeze from 'deep-freeze'\nimport { describe, expect, test } from 'vitest'\nimport noteReducer from './noteReducer'\n\ndescribe('noteReducer', () => {\n  test('returns new state with action NEW_NOTE', () => {\n    const state = []\n    const action = {\n      type: 'NEW_NOTE',\n      payload: {\n        content: 'the app state is in redux store',\n        important: true,\n        id: 1\n      }\n    }\n\n    deepFreeze(state)\n    const newState = noteReducer(state, action)\n\n    expect(newState).toHaveLength(1)\n    expect(newState).toContainEqual(action.payload)\n  })\n})

\n

Suoritetaan testi komennolla npm test. Testi siis varmistaa, että reducerin palauttama uusi tila on taulukko, joka sisältää yhden elementin, joka on sama kun actionin kentän payload sisältävä olio.

\n

Komento deepFreeze(state) varmistaa, että reducer ei muuta parametrina olevaa storen tilaa. Jos reducer käyttäisi tilan manipulointiin komentoa push, testi ei menisi läpi:

\n

\"Testi

\n

Tehdään sitten testi actionin TOGGLE_IMPORTANCE käsittelylle:

\n

test('returns new state with action TOGGLE_IMPORTANCE', () => {\n  const state = [\n    {\n      content: 'the app state is in redux store',\n      important: true,\n      id: 1\n    },\n    {\n      content: 'state changes are made with actions',\n      important: false,\n      id: 2\n    }\n  ]\n\n  const action = {\n    type: 'TOGGLE_IMPORTANCE',\n    payload: {\n      id: 2\n    }\n  }\n\n  deepFreeze(state)\n  const newState = noteReducer(state, action)\n\n  expect(newState).toHaveLength(2)\n\n  expect(newState).toContainEqual(state[0])\n\n  expect(newState).toContainEqual({\n    content: 'state changes are made with actions',\n    important: true,\n    id: 2\n  })\n})

\n

Eli seuraavan actionin

\n

{\n  type: 'TOGGLE_IMPORTANCE',\n  payload: {\n    id: 2\n  }\n}

\n

tulee muuttaa tärkeys muistiinpanolle, jonka id on 2.

\n

Reducer laajenee seuraavasti:

\n

const noteReducer = (state = [], action) => {\n  switch(action.type) {\n    case 'NEW_NOTE':\n      return state.concat(action.payload)\n    case 'TOGGLE_IMPORTANCE': {      const id = action.payload.id      const noteToChange = state.find(n => n.id === id)      const changedNote = {        ...noteToChange,        important: !noteToChange.important      }      return state.map(note => (note.id !== id ? note : changedNote))    }    default:\n      return state\n  }\n}

\n

Luomme tärkeyttä muuttaneesta muistiinpanosta kopion osasta 2 tutulla syntaksilla ja korvaamme tilan uudella tilalla, johon otetaan muuttumattomat muistiinpanot ja muutettavasta sen muutettu kopio changedNote.

\n

Kerrataan vielä mitä koodissa tapahtuu. Ensin etsitään olio, jonka tärkeys on tarkoitus muuttaa:

\n

const noteToChange = state.find(n => n.id === id)

\n

Luodaan sitten uusi olio, joka on muuten kopio muuttuvasta oliosta mutta kentän important arvo on muutettu päinvastaiseksi:

\n

const changedNote = { \n  ...noteToChange, \n  important: !noteToChange.important \n}

\n

Lopuksi palautetaan uusi tila. Se saadaan valitsemalla kaikki vanhan tilan muistiinpanot pois lukien etsittävää id:tä vastaava muistiinpano, jonka tilalle valitaan juuri muokattu muistiinpano:

\n

state.map(note => (note.id !== id ? note : changedNote))

\n

Array spread ‑syntaksi

\n

Koska reducerille on nyt suhteellisen hyvät testit, voimme refaktoroida koodia turvallisesti.

\n

Uuden muistiinpanon lisäys luo palautettavan tilan taulukon concat-funktiolla. Katsotaan nyt miten voimme toteuttaa saman hyödyntämällä JavaScriptin array spread ‑syntaksia:

\n

const noteReducer = (state = [], action) => {\n  switch(action.type) {\n    case 'NEW_NOTE':\n      return [...state, action.payload]    case 'TOGGLE_IMPORTANCE': {\n      // ...\n    }\n    default:\n    return state\n  }\n}

\n

Spread-syntaksi toimii seuraavasti. Jos määrittelemme

\n

const luvut = [1, 2, 3]

\n

niin ...luvut hajottaa taulukon yksittäisiksi alkioiksi, eli voimme sijoittaa sen esim. toisen taulukon sisään:

\n

[...luvut, 4, 5]

\n

ja lopputuloksena on taulukko, jonka sisältö on [1, 2, 3, 4, 5].

\n

Jos olisimme sijoittaneet taulukon toisen sisälle ilman spreadia, eli

\n

[luvut, 4, 5]

\n

lopputulos olisi ollut [[1, 2, 3], 4, 5].

\n

Samannäköinen syntaksi toimii taulukosta destrukturoimalla alkioita otettaessa siten, että se kerää loput alkiot:

\n

const luvut = [1, 2, 3, 4, 5, 6]\n\nconst [eka, toka, ...loput] = luvut\n\nconsole.log(eka)    // tulostuu 1\nconsole.log(toka)   // tulostuu 2\nconsole.log(loput)  // tulostuu [3, 4, 5, 6]

\n

\n

\n

Tehtävät 6.1.-6.2.

\n

Tehdään hieman yksinkertaistettu versio osan 1 Unicafe-tehtävästä. Hoidetaan sovelluksen tilan käsittely Reduxin avulla.

\n

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

\n

Aloita poistamalla kloonatun sovelluksen Git-konfiguraatio ja asentamalla riippuvuudet:

\n

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

\n

6.1: Unicafe revisited, step1

\n

Ennen sivulla näkyvää toiminnallisuutta toteutetaan storen edellyttämä toiminnallisuus.

\n

Storeen täytyy tallettaa erikseen lukumäärä jokaisentyyppisestä palautteesta. Storen hallitsema tila on siis muotoa:

\n

{\n  good: 5,\n  ok: 4,\n  bad: 2\n}

\n

Projektissa on seuraava runko reducerille:

\n

const initialState = {\n  good: 0,\n  ok: 0,\n  bad: 0\n}\n\nconst counterReducer = (state = initialState, action) => {\n  console.log(action)\n  switch (action.type) {\n    case 'GOOD':\n      return state\n    case 'OK':\n      return state\n    case 'BAD':\n      return state\n    case 'RESET':\n      return state\n    default:\n      return state\n  }\n}\n\nexport default counterReducer

\n

Testien runko on:

\n

import deepFreeze from 'deep-freeze'\nimport { describe, expect, test } from 'vitest'\nimport counterReducer from './reducer'\n\ndescribe('unicafe reducer', () => {\n  const initialState = {\n    good: 0,\n    ok: 0,\n    bad: 0\n  }\n\n  test('should return a proper initial state when called with undefined state', () => {\n    const action = {\n      type: 'DO_NOTHING'\n    }\n\n    const newState = counterReducer(undefined, action)\n    expect(newState).toEqual(initialState)\n  })\n\n  test('good is incremented', () => {\n    const action = {\n      type: 'GOOD'\n    }\n    const state = initialState\n\n    deepFreeze(state)\n    const newState = counterReducer(state, action)\n    expect(newState).toEqual({\n      good: 1,\n      ok: 0,\n      bad: 0\n    })\n  })\n})

\n

Toteuta reducer ja tee sille testit.

\n

Valmiina olevan ensimmäisen testin pitäisi mennä suoraan läpi ilman muutoksia. Redux olettaa, että reducer palauttaa järkevän alkutilan kun sitä kutsutaan siten että ensimmäinen parametri eli aiempaa tilaa edustava state on undefined.

\n

Aloita laajentamalla reduceria siten, että molemmat testeistä menevät läpi. Lisää tämän jälkeen loput testit reducerin eri actioneille ja toteuta niitä vastaava toiminnallisuus reduceriin.

\n

Varmista testeissä deep-freeze-kirjaston avulla, että kyseessä on puhdas funktio. Reducerin toteutuksessa kannattaa ottaa mallia yllä olevasta Redux-muistiinpanot-esimerkistä.

\n

6.2: Unicafe revisited, step2

\n

Toteuta sitten sovellukseen koko sen varsinainen toiminnallisuus.

\n

Sovelluksesi saa olla ulkoasultaan vaatimaton, muuta ei tarvita kuin napit ja tieto kunkin tyyppisen arvostelun lukumäärästä:

\n

\n

\n

\n

Ei-kontrolloitu lomake

\n

Lisätään sovellukseen mahdollisuus uusien muistiinpanojen tekemiseen sekä tärkeyden muuttamiseen:

\n

// ...\n\nconst generateId = () => Number((Math.random() * 1000000).toFixed(0))\nconst App = () => {\n  const addNote = event => {    event.preventDefault()    const content = event.target.note.value    event.target.note.value = ''    store.dispatch({      type: 'NEW_NOTE',      payload: {        content,        important: false,        id: generateId()      }    })  }\n  const toggleImportance = id => {    store.dispatch({      type: 'TOGGLE_IMPORTANCE',      payload: { id }    })  }\n  return (\n    <div>\n      <form onSubmit={addNote}>        <input name=\"note\" />         <button type=\"submit\">add</button>      </form>      <ul>\n        {store.getState().map(note => (\n          <li key={note.id} onClick={() => toggleImportance(note.id)}>            {note.content} <strong>{note.important ? 'important' : ''}</strong>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\n// ...

\n

Molemmat toiminnallisuudet on toteutettu suoraviivaisesti. 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 täältä.
\n

\n

Muistiinpanon lisäämisen käsittelevä metodi on yksinkertainen. Se dispatchaa muistiinpanon lisäävän actionin:

\n

addNote = event => {\n  event.preventDefault()\n  const content = event.target.note.value\n  event.target.note.value = ''\n  store.dispatch({    type: 'NEW_NOTE',    payload: {      content,      important: false,      id: generateId()    }  })}

\n

Uuden muistiinpanon sisältö saadaan suoraan lomakkeen syötekentästä, johon päästään käsiksi tapahtumaolion kautta:

\n

const content = event.target.note.value

\n

Kannattaa huomata, että syötekentällä on oltava nimi, jotta sen arvoon on mahdollista päästä käsiksi:

\n

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

\n

Tärkeys muutetaan klikkaamalla muistiinpanon nimeä. Käsittelijä on erittäin yksinkertainen:

\n

toggleImportance = id => {\n  store.dispatch({\n    type: 'TOGGLE_IMPORTANCE',\n    payload: { id }\n  })\n}

\n

Action creatorit

\n

Alamme huomata, että jo näinkin yksinkertaisessa sovelluksessa Reduxin käyttö yksinkertaistaa sovelluksen ulkoasusta vastaavaa koodia. Pystymme kuitenkin vielä paljon parempaan.

\n

React-komponenttien on oikeastaan tarpeetonta tuntea Reduxin actionien tyyppejä ja esitysmuotoja. Eristetään actioneiden luominen omiin funktioihinsa:

\n

const createNote = content => {\n  return {\n    type: 'NEW_NOTE',\n    payload: {\n      content,\n      important: false,\n      id: generateId()\n    }\n  }\n}\n\nconst toggleImportanceOf = id => {\n  return {\n    type: 'TOGGLE_IMPORTANCE',\n    payload: { id }\n  }\n}

\n

Actioneja luovia funktioita kutsutaan action creatoreiksi.

\n

Komponentin App ei tarvitse enää tietää mitään actionien sisäisestä esitystavasta, vaan se saa sopivan actionin kutsumalla creator-funktiota:

\n

const App = () => {\n  const addNote = event => {\n    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    store.dispatch(createNote(content))  }\n  \n  const toggleImportance = id => {\n    store.dispatch(toggleImportanceOf(id))  }\n\n  // ...\n}

\n

Redux-storen välittäminen eri komponenteille

\n

Koko sovellus on toistaiseksi kirjoitettu reduceria lukuunottamatta yhteen tiedostoon, minkä ansiosta joka puolelta sovellusta on päästy käsiksi Redux-storeen. Entä jos haluamme jakaa sovelluksen useisiin, omiin tiedostoihinsa sijoitettuihin komponentteihin?

\n

Tapoja välittää Redux-store sovelluksen komponenteille on useita. Tutustutaan ensin ehkä uusimpaan ja helpoimpaan tapaan eli React Redux-kirjaston tarjoamaan hooks-rajapintaan.

\n

Asennetaan react-redux:

\n

npm install react-redux

\n

Jäsennellään samalla sovelluksen koodi järkevämmin useisiin eri tiedostoihin. Tiedosto main.jsx näyttää muutosten jälkeen seuraavalta:

\n

import ReactDOM from 'react-dom/client'\nimport { createStore } from 'redux'\nimport { Provider } from 'react-redux'\n\nimport App from './App'\nimport noteReducer from './reducers/noteReducer'\n\nconst store = createStore(noteReducer)\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <App />\n  </Provider>\n)

\n

Uutta tässä on se, että sovellus on määritelty React Redux ‑kirjaston tarjoaman Provider-komponentin lapsena ja että sovelluksen käyttämä store on annettu Provider-komponentin attribuutiksi store:

\n

const store = createStore(noteReducer)\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>    <App />\n  </Provider>)

\n

Tämän ansiosta store on kaikkien ohjelman komponenttien saavutettavissa, kuten tulemme pian näkemään.

\n

Action creator ‑funktioiden määrittely on siirretty reducerin kanssa samaan tiedostoon src/reducers/noteReducer.js, joka näyttää seuraavalta:

\n

const noteReducer = (state = [], action) => {\n  switch (action.type) {\n    case 'NEW_NOTE':\n      return [...state, action.payload]\n    case 'TOGGLE_IMPORTANCE': {\n      const id = action.payload.id\n      const noteToChange = state.find(n => n.id === id)\n      const changedNote = {\n        ...noteToChange,\n        important: !noteToChange.important\n      }\n      return state.map(note => (note.id !== id ? note : changedNote))\n    }\n    default:\n      return state\n  }\n}\n\nconst generateId = () =>\n  Number((Math.random() * 1000000).toFixed(0))\n\nexport const createNote = (content) => {\n  return {\n    type: 'NEW_NOTE',\n    payload: {\n      content,\n      important: false,\n      id: generateId()\n    }\n  }\n}\n\nexport const toggleImportanceOf = (id) => {\n  return {\n    type: 'TOGGLE_IMPORTANCE',\n    payload: { id }\n  }\n}\n\nexport default noteReducer

\n

Moduulissa on nyt useita export-komentoja. Reducer-funktio palautetaan edelleen komennolla export default. Tämän ansiosta reducer importataan tuttuun tapaan:

\n

import noteReducer from './reducers/noteReducer'

\n

Moduulilla voi olla vain yksi default export, mutta useita \"normaaleja\" exporteja:

\n

export const createNote = (content) => {\n  // ...\n}\n\nexport const toggleImportanceOf = (id) => { \n  // ...\n}

\n

Normaalisti (eli ei defaultina) exportattujen funktioiden käyttöönotto tapahtuu aaltosulkusyntaksilla:

\n

import { createNote } from './../reducers/noteReducer'

\n

Eriytetään seuraavaksi komponentti App tiedostoon src/App.jsx. Tiedoston sisältö on seuraava:

\n

import { createNote, toggleImportanceOf } from './reducers/noteReducer'\nimport { useSelector, useDispatch } from 'react-redux' \n\n\nconst App = () => {\n  const dispatch = useDispatch()\n  const notes = useSelector(state => state)\n\n  const addNote = (event) => {\n    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    dispatch(createNote(content))\n  }\n\n  const toggleImportance = (id) => {\n    dispatch(toggleImportanceOf(id))\n  }\n\n  return (\n    <div>\n      <form onSubmit={addNote}>\n        <input name=\"note\" /> \n        <button type=\"submit\">add</button>\n      </form>\n      <ul>\n        {notes.map(note => \n          <li\n            key={note.id} \n            onClick={() => toggleImportance(note.id)}\n          >\n            {note.content} <strong>{note.important ? 'important' : ''}</strong>\n          </li>\n        )}\n      </ul>\n    </div>\n  )\n}\n\nexport default App

\n

Komponentin koodissa on muutama mielenkiintoinen seikka. Aiemmin koodi hoiti actionien dispatchaamisen kutsumalla Redux-storen metodia dispatch:

\n

store.dispatch({\n  type: 'TOGGLE_IMPORTANCE',\n  payload: { id }\n})

\n

Nyt sama tapahtuu useDispatch-hookin avulla saatavan dispatch-funktion avulla:

\n

import { useSelector, useDispatch } from 'react-redux'\nconst App = () => {\n  const dispatch = useDispatch()  // ...\n\n  const toggleImportance = (id) => {\n    dispatch(toggleImportanceOf(id))  }\n\n  // ...\n}

\n

React Redux ‑kirjaston tarjoama useDispatch-hook siis tarjoaa mille tahansa React-komponentille pääsyn tiedostossa main.jsx määritellyn Redux-storen dispatch-funktioon, jonka avulla komponentti pääsee tekemään muutoksia Redux-storen tilaan.

\n

Storeen talletettuihin muistiinpanoihin komponentti pääsee käsiksi React Redux ‑kirjaston useSelector-hookin kautta:

\n

import { useSelector, useDispatch } from 'react-redux'\nconst App = () => {\n  // ...\n  const notes = useSelector(state => state)  // ...\n}

\n

useSelector saa parametrikseen funktion, joka hakee tai valitsee (engl. select) tarvittavan datan Redux-storesta. Tarvitsemme nyt kaikki muistiinpanot, eli selektorifunktiomme palauttaa koko staten, eli on muotoa:

\n

state => state

\n

joka siis tarkoittaa samaa kuin

\n

(state) => {\n  return state\n}

\n

Yleensä selektorifunktiot ovat mielenkiintoisempia ja valitsevat vain osan Redux-storen sisällöstä. Voisimme esimerkiksi hakea storesta ainoastaan tärkeät muistiinpanot seuraavasti:

\n

const importantNotes = useSelector(state => state.filter(note => note.important))

\n

Redux-sovelluksen tämänhetkinen koodi on kokonaisuudessaan GitHubissa, branchissa part6-0.

\n

Lisää komponentteja

\n

Eriytetään uuden muistiinpanon luomisesta vastaava lomake omaksi komponentikseen tiedostoon src/components/NoteForm.jsx:

\n

import { useDispatch } from 'react-redux'\nimport { createNote } from '../reducers/noteReducer'\n\nconst NoteForm = () => {\n  const dispatch = useDispatch()\n\n  const addNote = (event) => {\n    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    dispatch(createNote(content))\n  }\n\n  return (\n    <form onSubmit={addNote}>\n      <input name=\"note\" />\n      <button type=\"submit\">add</button>\n    </form>\n  )\n}\n\nexport default NoteForm

\n

Toisin kuin aiemmin ilman Reduxia tekemässämme React-koodissa, sovelluksen tilaa (joka on nyt siis Reduxissa) muuttava tapahtumankäsittelijä on siirretty pois App-komponentista, alikomponentin vastuulle. Itse tilaa muuttava logiikka on kuitenkin siististi Reduxissa eristettynä koko sovelluksen React-osuudesta.

\n

Eriytetään vielä muistiinpanojen lista ja yksittäisen muistiinpanon esittäminen omiksi komponenteikseen. Sijoitetaan molemmat tiedostoon src/components/Notes.jsx:

\n

import { useDispatch, useSelector } from 'react-redux'\nimport { toggleImportanceOf } from '../reducers/noteReducer'\n\nconst Note = ({ note, handleClick }) => {\n  return (\n    <li onClick={handleClick}>\n      {note.content}\n      <strong> {note.important ? 'important' : ''}</strong>\n    </li>\n  )\n}\n\nconst Notes = () => {\n  const dispatch = useDispatch()\n  const notes = useSelector(state => state)\n\n  return (\n    <ul>\n      {notes.map(note => (\n        <Note\n          key={note.id}\n          note={note}\n          handleClick={() => dispatch(toggleImportanceOf(note.id))}\n        />\n      ))}\n    </ul>\n  )\n}\n\nexport default Notes

\n

Muistiinpanon tärkeyttä muuttava logiikka on nyt muistiinpanojen listaa hallinnoivalla komponentilla.

\n

Tiedostoon App.jsx jää vain vähän koodia:

\n

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

\n

Yksittäisen muistiinpanon renderöinnistä huolehtiva Note on erittäin yksinkertainen, eikä ole tietoinen siitä, että sen propsina saama tapahtumankäsittelijä dispatchaa actionin. Tällaisia komponentteja kutsutaan Reactin terminologiassa presentational-komponenteiksi.

\n

Notes taas on sellainen komponentti, jota kutsutaan container-komponentiksi. Se sisältää sovelluslogiikkaa eli määrittelee mitä Note-komponenttien tapahtumankäsittelijät tekevät ja koordinoi presentational-komponenttien eli Notejen konfigurointia.

\n

Palaamme presentational/container-jakoon tarkemmin myöhemmin tässä osassa.

\n

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

\n

\n

\n

Tehtävät 6.3.-6.8.

\n

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

\n

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

\n

cd redux-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.3: anekdootit, step1

\n

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

\n

6.4: anekdootit, step2

\n

Tee sovellukseen mahdollisuus uusien anekdoottien lisäämiselle.

\n

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

\n

6.5: anekdootit, step3

\n

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

\n

6.6: anekdootit, step4

\n

Jos et jo sitä tehnyt, eriytä action-olioiden luominen action creator ‑funktioihin ja sijoita ne tiedostoon src/reducers/anecdoteReducer.js. Toimi siis kuten materiaalin esimerkissä on toimittu kohdasta action creator alkaen.

\n

6.7: anekdootit, step5

\n

Eriytä uuden anekdootin luominen omaksi komponentikseen nimeltään AnecdoteForm. Siirrä kaikki anekdootin luomiseen liittyvä logiikka uuteen komponenttiin.

\n

6.8: anekdootit, step6

\n

Eriytä anekdoottilistan näyttäminen omaksi komponentikseen nimeltään AnecdoteList. Siirrä kaikki anekdoottien äänestämiseen liittyvä logiikka uuteen komponenttiin.

\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      <AnecdoteForm />\n      <AnecdoteList />\n    </div>\n  )\n}\n\nexport default App

\n

\n

\n

Jatketaan muistiinpanosovelluksen yksinkertaistetun Redux-version laajentamista.

\n

Sovelluskehitystä helpottaaksemme laajennetaan reduceria siten, että storelle määritellään alkutila, jossa on pari muistiinpanoa:

\n

const initialState = [  {    content: 'reducer defines how redux store works',    important: true,    id: 1,  },  {    content: 'state of store can contain any data',    important: false,    id: 2,  },]\nconst noteReducer = (state = initialState, action) => {  // ...\n}\n\n// ...\n\nexport default noteReducer

\n

Monimutkaisempi tila storessa

\n

Toteutetaan sovellukseen näytettävien muistiinpanojen filtteröinti, jonka avulla näytettäviä muistiinpanoja voidaan rajata. Filtterin toteutus tapahtuu radiopainikkeiden avulla:

\n

\"Sivun

\n

Aloitetaan todella suoraviivaisella toteutuksella:

\n

import NoteForm from './components/NoteForm'\nimport Notes from './components/Notes'\n\nconst App = () => {\n  const filterSelected = (value) => {    console.log(value)  }\n  return (\n    <div>\n      <NoteForm />\n      <div>        <input          type=\"radio\"          name=\"filter\"          onChange={() => filterSelected('ALL')}        />        all        <input          type=\"radio\"          name=\"filter\"          onChange={() => filterSelected('IMPORTANT')}        />        important        <input          type=\"radio\"          name=\"filter\"          onChange={() => filterSelected('NONIMPORTANT')}        />        nonimportant      </div>      <Notes />\n    </div>\n  )\n}

\n

Koska painikkeiden attribuutin name arvo on kaikilla sama, muodostavat ne nappiryhmän, joista ainoastaan yksi voi olla kerrallaan valittuna.

\n

Napeille on määritelty muutoksenkäsittelijä, joka tällä hetkellä ainoastaan tulostaa painettua nappia vastaavan merkkijonon konsoliin.

\n

Päätämme toteuttaa filtteröinnin siten, että talletamme muistiinpanojen lisäksi sovelluksen storeen myös filtterin arvon. Eli muutoksen jälkeen storessa olevan tilan tulisi näyttää seuraavalta:

\n

{\n  notes: [\n    { content: 'reducer defines how redux store works', important: true, id: 1},\n    { content: 'state of store can contain any data', important: false, id: 2}\n  ],\n  filter: 'IMPORTANT'\n}

\n

Tällä hetkellähän tilassa on ainoastaan muistiinpanot sisältävä taulukko. Uudessa ratkaisussa tilalla on siis kaksi avainta eli notes, jonka arvona muistiinpanot ovat sekä filter, jonka arvona on merkkijono joka kertoo, mitkä muistiinpanoista tulisi näyttää ruudulla.

\n

Yhdistetyt reducerit

\n

Voisimme periaatteessa muokata jo olemassaolevaa reduceria ottamaan huomioon muuttuneen tilanteen. Parempi ratkaisu on kuitenkin määritellä tässä tilanteessa uusi, filtterin arvosta huolehtiva reduceri. Määritellään samalla myös sopiva action creator ‑funktio. Sijoitetaan koodi moduuliin src/reducers/filterReducer.js:

\n

const filterReducer = (state = 'ALL', action) => {\n  switch (action.type) {\n    case 'SET_FILTER':\n      return action.payload\n    default:\n      return state\n  }\n}\n\nexport const filterChange = filter => {\n  return {\n    type: 'SET_FILTER',\n    payload: filter\n  }\n}\n\nexport default filterReducer

\n

Filtterin arvon asettavat actionit ovat siis muotoa:

\n

{\n  type: 'SET_FILTER',\n  payload: 'IMPORTANT'\n}

\n

Saamme nyt muodostettua varsinaisen reducerin yhdistämällä kaksi olemassaolevaa reduceria funktion combineReducers avulla.

\n

Määritellään yhdistetty reducer tiedostossa main.jsx. Tiedoston päivitetty sisältö on seuraavanlainen:

\n

import ReactDOM from 'react-dom/client'\nimport { Provider } from 'react-redux'\nimport { createStore, combineReducers } from 'redux'\n\nimport App from './App'\nimport filterReducer from './reducers/filterReducer'\nimport noteReducer from './reducers/noteReducer'\n\nconst reducer = combineReducers({\n  notes: noteReducer,\n  filter: filterReducer\n})\n\nconst store = createStore(reducer)\n\nconsole.log(store.getState())\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <div />\n  </Provider>\n)

\n

Koska sovelluksemme hajoaa tässä vaiheessa täysin, komponentin App sijasta renderöidään tyhjä div-elementti.

\n

console.log-komennon ansiosta konsoliin tulostuu storen tila:

\n

\"Konsolista

\n

Store on siis juuri siinä muodossa jossa haluammekin sen olevan!

\n

Tarkastellaan vielä yhdistetyn reducerin luomista:

\n

const reducer = combineReducers({\n  notes: noteReducer,\n  filter: filterReducer,\n})

\n

Näin tehdyn reducerin määrittelemän storen tila on olio, jossa on kaksi kenttää: notes ja filter. Tilan kentän notes arvon määrittelee noteReducer, jonka ei tarvitse välittää mitään tilan muista kentistä. Vastaavasti filter kentän käsittely tapahtuu filterReducer:in avulla.

\n

Ennen muun koodin muutoksia kokeillaan vielä konsolista, miten actionit muuttavat yhdistetyn reducerin muodostamaa staten tilaa. Lisätään seuraavat rivit väliaikaisesti tiedostoon main.jsx:

\n

// ...\n\nconst store = createStore(reducer)\n\nconsole.log(store.getState())\n\nimport { createNote } from './reducers/noteReducer'import { filterChange } from './reducers/filterReducer'\nstore.subscribe(() => console.log(store.getState()))store.dispatch(filterChange('IMPORTANT'))store.dispatch(createNote('combineReducers forms one reducer from many simple reducers'))\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <div />\n  </Provider>\n)

\n

Kun simuloimme näin filtterin tilan muutosta ja muistiinpanon luomista, konsoliin tulostuu storen tila jokaisen muutoksen jälkeen:

\n

\"Storen

\n

Jo tässä vaiheessa kannattaa laittaa mieleen eräs tärkeä detalji. Jos molempien reducerien alkuun lisätään konsoliin tulostus

\n

const filterReducer = (state = 'ALL', action) => {\n  console.log('ACTION: ', action)  // ...\n}

\n

niin nyt konsolin perusteella näyttää siltä, että jokainen action kahdentuu:

\n

\"Konsolin

\n

Onko koodissa bugi? Ei. Yhdistetty reducer toimii siten, että jokainen action käsitellään kaikissa yhdistetyn reducerin osissa. Usein tietystä actionista on kiinnostunut vain yksi reducer, mutta on kuitenkin tilanteita, joissa useampi reducer muuttaa hallitsemaansa staten tilaa jonkin actionin seurauksena.

\n

Filtteröinnin viimeistely

\n

Viimeistellään nyt sovellus käyttämään yhdistettyä reduceria. Poistetaan tiedostosta main.jsx ylimääräiset kokeilut ja palautetaan App renderöitäväksi komponentiksi. Tiedoston päivitetty sisältö on seuraava:

\n

import ReactDOM from 'react-dom/client'\nimport { Provider } from 'react-redux'\nimport { createStore, combineReducers } from 'redux'\n\nimport App from './App'\nimport filterReducer from './reducers/filterReducer'\nimport noteReducer from './reducers/noteReducer'\n\nconst reducer = combineReducers({\n  notes: noteReducer,\n  filter: filterReducer\n})\n\nconst store = createStore(reducer)\n\nconsole.log(store.getState())\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <App />\n  </Provider>\n)

\n

Korjataan sitten bugi, joka johtuu siitä, että koodi olettaa storen tilan olevan mustiinpanot tallettava taulukko:

\n

\"komennon

\n

Korjaus on helppo. Koska muistiinpanot ovat nyt storen kentässä notes, riittää pieni muutos selektorifunktioon:

\n

const Notes = () => {\n  const dispatch = useDispatch()\n  const notes = useSelector(state => state.notes)\n  return (\n    <ul>\n      {notes.map(note =>\n        <Note\n          key={note.id}\n          note={note}\n          handleClick={() => \n            dispatch(toggleImportanceOf(note.id))\n          }\n        />\n      )}\n    </ul>\n  )\n}

\n

Aiemminhan selektorifunktio palautti koko storen tilan:

\n

const notes = useSelector(state => state)

\n

Nyt siis palautetaan tilasta ainoastaan sen kenttä notes:

\n

const notes = useSelector(state => state.notes)

\n

Eriytetään näkyvyyden säätelyfiltteri omaksi, tiedostoon src/components/VisibilityFilter.jsx sijoitettavaksi komponentiksi:

\n

import { useDispatch } from 'react-redux'\nimport { filterChange } from '../reducers/filterReducer'\n\nconst VisibilityFilter = () => {\n  const dispatch = useDispatch()\n\n  return (\n    <div>\n      <input\n        type=\"radio\"\n        name=\"filter\"\n        onChange={() => dispatch(filterChange('ALL'))}\n      />\n      all\n      <input\n        type=\"radio\"\n        name=\"filter\"\n        onChange={() => dispatch(filterChange('IMPORTANT'))}\n      />\n      important\n      <input\n        type=\"radio\"\n        name=\"filter\"\n        onChange={() => dispatch(filterChange('NONIMPORTANT'))}\n      />\n      nonimportant\n    </div>\n  )\n}\n\nexport default VisibilityFilter

\n

Toteutus on suoraviivainen - radiopainikkeen klikkaaminen muuttaa storen kentän filter tilaa.

\n

Komponentti App yksinkertaisuu nyt seuraavasti:

\n

import NoteForm from './components/NoteForm'\nimport Notes from './components/Notes'\nimport VisibilityFilter from './components/VisibilityFilter'\n\nconst App = () => {\n  return (\n    <div>\n      <NoteForm />\n      <VisibilityFilter />\n      <Notes />\n    </div>\n  )\n}\n\nexport default App

\n

Muutetaan vielä komponenttia Notes ottamaan huomioon filtteri:

\n

const Notes = () => {\n  const dispatch = useDispatch()\n  const notes = useSelector(state => {    if (state.filter === 'ALL') {      return state.notes    }    return state.filter === 'IMPORTANT'      ? state.notes.filter(note => note.important)      : state.notes.filter(note => !note.important)  })\n  return (\n    <ul>\n      {notes.map(note => (\n        <Note\n          key={note.id}\n          note={note}\n          handleClick={() => dispatch(toggleImportanceOf(note.id))}\n        />\n      ))}\n    </ul>\n  )\n}

\n

Muutos kohdistuu siis ainoastaan selektorifunktioon, joka oli aiemmin muotoa

\n

useSelector(state => state.notes)

\n

Yksinkertaistetaan vielä selektoria destrukturoimalla parametrina olevasta tilasta sen kentät erilleen:

\n

const notes = useSelector(({ filter, notes }) => {\n  if ( filter === 'ALL' ) {\n    return notes\n  }\n  return filter  === 'IMPORTANT' \n    ? notes.filter(note => note.important)\n    : notes.filter(note => !note.important)\n})

\n

Sovelluksessa on vielä pieni kauneusvirhe, sillä vaikka oletusarvosesti filtterin arvo on ALL eli näytetään kaikki muistiinpanot, ei vastaava radiopainike ole valittuna. Ongelma on luonnollisestikin mahdollista korjata, mutta koska kyseessä on ikävä, mutta harmiton feature, jätämme korjauksen myöhemmäksi.

\n

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

\n

\n

\n

Tehtävä 6.9

\n

Jatketaan tehtävässä 6.3 aloitetun Reduxia käyttävän anekdoottisovelluksen parissa.

\n

6.9 anekdootit, step7

\n

Toteuta sovellukseen näytettävien anekdoottien filtteröiminen:

\n

\"Yläosaan

\n

Säilytä filtterin tila Redux-storessa. Käytännössä kannattaa tehdä uusi reducer ja action creatorit, ja luoda storea varten yhdistetty reduceri funktion combineReducers avulla.

\n

Tee filtterin ruudulla näyttämistä varten komponentti Filter. Voit ottaa sen pohjaksi seuraavan koodin:

\n

const Filter = () => {\n  const handleChange = (event) => {\n    // input-kentän arvo muuttujassa event.target.value\n  }\n  const style = {\n    marginBottom: 10\n  }\n\n  return (\n    <div style={style}>\n      filter <input onChange={handleChange} />\n    </div>\n  )\n}\n\nexport default Filter

\n

\n

\n

Redux Toolkit ja storen konfiguraation refaktorointi

\n

Kuten olemme jo tähän asti huomanneet, Reduxin konfigurointi ja tilanhallinnan toteutus vaativat melko paljon vaivannäköä. Tämä ilmenee esimerkiksi reducereiden ja action creatorien koodista, jossa on jonkin verran toisteisuutta. Redux Toolkit on kirjasto, joka soveltuu näiden yleisten Reduxin käyttöön liittyvien ongelmien ratkaisemiseen. Kirjaston käyttö mm. yksinkertaistaa huomattavasti Redux-storen luontia ja tarjoaa suuren määrän tilanhallintaa helpottavia työkaluja.

\n

Otetaan Redux Toolkit käyttöön sovelluksessamme refaktoroimalla nykyistä koodia. Aloitetaan kirjaston asennuksella:

\n

npm install @reduxjs/toolkit

\n

Avataan sen jälkeen main.jsx-tiedosto, jossa nykyinen Redux-store luodaan. Käytetään storen luonnissa Reduxin createStore-funktion sijaan Redux Toolkitin configureStore-funktiota:

\n

import ReactDOM from 'react-dom/client'\nimport { Provider } from 'react-redux'\nimport { configureStore } from '@reduxjs/toolkit'\nimport App from './App'\nimport filterReducer from './reducers/filterReducer'\nimport noteReducer from './reducers/noteReducer'\n\nconst store = configureStore({  reducer: {    notes: noteReducer,    filter: filterReducer  }})\nconsole.log(store.getState())\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <App />\n  </Provider>\n)

\n

Pääsimme eroon jo muutamasta koodirivistä, kun reducerin muodostamiseen ei enää tarvita combineReducers-funktiota. Tulemme pian näkemään, että configureStore-funktion käytöstä on myös monia muita hyötyjä, kuten kehitystyökalujen ja usein käytettyjen kirjastojen vaivaton käyttöönotto ilman erillistä konfiguraatiota.

\n

Siistitään vielä main.jsx-tiedostoa siirtämällä Redux-storen luontiin liittyvä koodi erilliseen tiedostoon. Luodaan uusi tiedosto src/store.js:

\n

import { configureStore } from '@reduxjs/toolkit'\n\nimport noteReducer from './reducers/noteReducer'\nimport filterReducer from './reducers/filterReducer'\n\nconst store = configureStore({\n  reducer: {\n    notes: noteReducer,\n    filter: filterReducer\n  }\n})\n\nexport default store

\n

Muutosten jälkeen main.jsx-tiedosto näyttää seuraavalta:

\n

import ReactDOM from 'react-dom/client'\nimport { Provider } from 'react-redux'\n\nimport App from './App'\nimport store from './store'\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <App />\n  </Provider>\n)

\n

Redux Toolkit ja reducereiden refaktorointi

\n

Siirrytään seuraavaksi reducereiden refaktorointiin, jossa Redux Toolkitin edut tulevat parhaiten esiin. Redux Toolkitin avulla reducerin ja siihen liittyvät action creatorit voi luoda kätevästi createSlice-funktion avulla. Voimme refaktoroida reducers/noteReducer.js-tiedostossa olevan reducerin ja action creatorit createSlice-funktion avulla seuraavasti:

\n

import { createSlice } from '@reduxjs/toolkit'\nconst initialState = [\n  {\n    content: 'reducer defines how redux store works',\n    important: true,\n    id: 1,\n  },\n  {\n    content: 'state of store can contain any data',\n    important: false,\n    id: 2,\n  },\n]\n\nconst generateId = () =>\n  Number((Math.random() * 1000000).toFixed(0))\n\nconst noteSlice = createSlice({  name: 'notes',  initialState,  reducers: {    createNote(state, action) {      const content = action.payload      state.push({        content,        important: false,        id: generateId(),      })    },    toggleImportanceOf(state, action) {      const id = action.payload      const noteToChange = state.find(n => n.id === id)      const changedNote = {         ...noteToChange,         important: !noteToChange.important       }      return state.map(note =>        note.id !== id ? note : changedNote       )         }  },})\nexport const { createNote, toggleImportanceOf } = noteSlice.actionsexport default noteSlice.reducer

\n

createSlice-funktion name-parametri määrittelee etuliitteen, jota käytetään actioneiden type-arvoissa. Esimerkiksi myöhemmin määritelty createNote-action saa type-arvon notes/createNote. Parametrin arvona on hyvä käyttää muiden reducereiden kesken uniikkia nimeä, jotta sovelluksen actioneiden type-arvoissa ei tapahtuisi odottamattomia yhteentörmäyksiä. Parametri initialState määrittelee reducerin alustavan tilan. Parametri reducers määrittelee itse reducerin objektina, jonka funktiot käsittelevät tietyn actionin aiheuttamat tilamuutokset. Huomaa, että funktioissa action.payload sisältää action creatorin kutsussa annetun parametrin:

\n

dispatch(createNote('Redux Toolkit is awesome!'))

\n

Tämä dispatch-kutsu vastaa seuraavan objektin dispatchaamista:

\n

dispatch({ type: 'notes/createNote', payload: 'Redux Toolkit is awesome!' })

\n

Jos olit tarkkana, saatoit huomata, että actionin createNote kohdalla tapahtuu jotain, mikä vaikuttaa rikkovan aiemmin mainittua reducereiden immutabiliteetin periaatetta:

\n

createNote(state, action) {\n  const content = action.payload\n\n  state.push({\n    content,\n    important: false,\n    id: generateId(),\n  })\n}

\n

Mutatoimme state-argumentin taulukkoa kutsumalla push-metodia sen sijaan, että palauttaisimme uuden instanssin taulukosta. Mistä on kyse?

\n

Redux Toolkit hyödyntää createSlice-funktion avulla määritellyissä reducereissa Immer-kirjastoa, joka mahdollistaa state-argumentin mutatoinnin reducerin sisällä. Immer muodostaa mutatoidun tilan perusteella uuden, immutablen tilan ja näin tilamuutosten immutabiliteetti säilyy.

\n

Huomaa, että tilaa voi muuttaa myös \"mutatoimatta\" kuten esimerkiksi toggleImportanceOf ‑actionin kohdalla on tehty. Tällöin funktio palauttaa uuden tilan. Mutatointi osoittautuu kuitenkin usein hyödylliseksi etenkin rakenteeltaan monimutkaisen tilan päivittämisessä.

\n

Funktio createSlice palauttaa objektin, joka sisältää sekä reducerin että reducers-parametrin actioneiden mukaiset action creatorit. Reducer on palautetussa objektissa noteSlice.reducer-kentässä kun taas action creatorit ovat noteSlice.actions-kentässä. Voimme muodostaa tiedoston exportit kätevästi:

\n

const noteSlice = createSlice({\n  // ...\n})\n\nexport const { createNote, toggleImportanceOf } = noteSlice.actionsexport default noteSlice.reducer

\n

Importit toimivat muissa tiedostoissa tavalliseen tapaan:

\n

import noteReducer, { createNote, toggleImportanceOf } from './reducers/noteReducer'

\n

Joudumme hieman muuttamaan testejämme Redux Toolkitin nimeämiskäytäntöjen takia:

\n

import deepFreeze from 'deep-freeze'\nimport { describe, expect, test } from 'vitest'\nimport noteReducer from './noteReducer'\n\ndescribe('noteReducer', () => {\n  test('returns new state with action notes/createNote', () => {    const state = []\n    const action = {\n      type: 'notes/createNote',      payload: 'the app state is in redux store'    }\n\n    deepFreeze(state)\n    const newState = noteReducer(state, action)\n\n    expect(newState).toHaveLength(1)\n    expect(newState.map(note => note.content)).toContainEqual(action.payload)  })\n})\n\ntest('returns new state with action notes/toggleImportanceOf', () => {  const state = [\n    {\n      content: 'the app state is in redux store',\n      important: true,\n      id: 1\n    },\n    {\n      content: 'state changes are made with actions',\n      important: false,\n      id: 2\n    }\n  ]\n\n  const action = {\n    type: 'notes/toggleImportanceOf',    payload: 2  }\n\n  deepFreeze(state)\n  const newState = noteReducer(state, action)\n\n  expect(newState).toHaveLength(2)\n\n  expect(newState).toContainEqual(state[0])\n\n  expect(newState).toContainEqual({\n    content: 'state changes are made with actions',\n    important: true,\n    id: 2\n  })\n})

\n

Sovelluksen tämänhetkinen koodi on GitHubissa branchissa part6-3.

\n

Redux Toolkit ja console.log

\n

Kuten olemme oppineet, on console.log äärimmäisen voimakas työkalu, se pelastaa meidät yleensä aina pulasta.

\n

Yritetään kokeeksi tulostaa Redux-storen tila konsoliin kesken funktiolla createSlice luodun reducerin:

\n

const noteSlice = createSlice({\n  name: 'notes',\n  initialState,\n  reducers: {\n    // ...\n    toggleImportanceOf(state, action) {\n      const id = action.payload\n\n      const noteToChange = state.find(n => n.id === id)\n\n      const changedNote = { \n        ...noteToChange, \n        important: !noteToChange.important \n      }\n\n      console.log(state)\n      return state.map(note =>\n        note.id !== id ? note : changedNote \n      )     \n    }\n  },\n})

\n

Kun nyt muistiinpanon tärkeyttä muuttaa klikkaamalla sen nimeä, konsoliin tulostuu seuraava

\n

\n

Tulostus on mielenkiintoinen mutta ei kovin hyödyllinen. Kyse tässä jo edellä mainitusta Redux toolkitin käyttämästä Immer-kirjastosta, mitä käytetään nyt sisäisesti storen tilan tallentamiseen.

\n

Tilan voi muuntaa ihmisluettavaan muotoon käyttämällä immer-kirjaston current-funktiota. Funktion voi importata käyttöön komennolla:

\n

import { current } from '@reduxjs/toolkit'

\n

ja tämän jälkeen tilan voi tulostaa konsoliin komennolla:

\n

console.log(current(state))

\n

Konsolitulostus on nyt ihmisluettava:

\n

\n

Redux DevTools

\n

Chromeen on asennettavissa Redux DevTools ‑lisäosa, jonka avulla Redux-storen tilaa ja sitä muuttavia actioneja on mahdollisuus seurata selaimen konsolista. Redux Toolkitin configureStore-funktion avulla luodussa storessa Redux DevTools on käytössä automaattisesti ilman ylimääräistä konfigurointia.

\n

Kun lisäosa on asennettu Chromeen, konsolin Redux-välilehti pitäisi näyttää seuraavalta:

\n

\"Redux

\n

Kunkin actionin storen tilaan aiheuttamaa muutosta on helppo tarkastella:

\n

\"edux

\n

Konsolin avulla on myös mahdollista dispatchata actioneja storeen:

\n

\"Mahdollisuus

\n

\n

\n

Tehtävät 6.10-6.13

\n

6.10 anekdootit, step8

\n

Asenna projektiin Redux Toolkit. Siirrä tämän jälkeen Redux-storen määrittely omaan tiedostoon store.js ja hyödynnä sen luonnissa Redux Toolkitin configureStore-funktiota.

\n

Muuta filter reduserin ja action creatorien määrittely tapahtumaan Redux Toolkitin createSlice-funktion avulla.

\n

Ota myös käyttöön Redux DevTools sovelluksen tilan debuggaamisen helpottamiseksi.

\n

6.11 anekdootit, step9

\n

Muuta myös anekdoottireduserin ja action creatorien määrittely tapahtumaan Redux Toolkitin createSlice-funktion avulla.

\n

6.12 anekdootit, step10

\n

Sovelluksessa on valmiina komponentin Notification runko:

\n

const Notification = () => {\n  const style = {\n    border: 'solid',\n    padding: 10,\n    borderWidth: 1,\n    marginBottom: 10\n  }\n\n  return (\n    <div style={style}>\n      render here notification...\n    </div>\n  )\n}\n\nexport default Notification

\n

Laajenna komponenttia siten, että se renderöi Redux-storeen talletetun viestin. Tee toiminnallisuutta varten oma reduceri ja hyödynnä jälleen Redux Toolkitin createSlice-funktiota.

\n

Tässä vaiheessa sovelluksen ei vielä tarvitse osata käyttää Notification-komponenttia järkevällä tavalla, vaan riittää että sovellus toimii ja näyttää notificationReducerin alkuarvoksi asettaman viestin.

\n

6.13 anekdootit, step11

\n

Laajenna sovellusta siten, että se näyttää Notification-komponentin avulla viiden sekunnin ajan, kun sovelluksessa äänestetään tai luodaan uusia anekdootteja:

\n

\"Äänestyksen

\n

Notifikaation asettamista ja poistamista varten kannattaa toteuttaa action creatorit.

\n

\n

\n

JSON Serverin käyttöönotto

\n

Laajennetaan sovellusta siten, että muistiinpanot talletetaan backendiin. Käytetään osasta 2 tuttua JSON Serveriä.

\n

Tallennetaan projektin juureen tiedostoon db.json tietokannan alkutila:

\n

{\n  \"notes\": [\n    {\n      \"content\": \"the app state is in redux store\",\n      \"important\": true,\n      \"id\": 1\n    },\n    {\n      \"content\": \"state changes are made with actions\",\n      \"important\": false,\n      \"id\": 2\n    }\n  ]\n}

\n

Asennetaan projektiin JSON Server

\n

npm install json-server --save-dev

\n

ja lisätään tiedoston package.json osaan scripts rivi

\n

\"scripts\": {\n  \"server\": \"json-server -p 3001 db.json\",\n  // ...\n}

\n

Käynnistetään JSON Server komennolla npm run server.

\n

Fetch API

\n

Ohjelmistokehityksessä joudutaan usein pohtimaan, kannattaako jokin toiminnallisuus toteuttaa käyttämällä ulkoista kirjastoa vai onko parempi hyödyntää ympäristön tarjoamia natiiveja ratkaisuja. Molemmilla lähestymistavoilla on omat etunsa ja haasteensa.

\n

Käytimme HTTP-pyyntöjen tekemiseen kurssin aiemmissa osissa Axios-kirjastoa. Tutustutaan nyt vaihtoehtoiseen tapaan tehdä HTTP-pyyntöjä natiivia Fetch APIa hyödyntäen.

\n

On tyypillistä, että ulkoinen kirjasto kuten Axios on toteutettu hyödyntäen muita ulkoisia kirjastoja. Esimerkiksi jos Axioksen asentaa projektiin komennolla npm install axios, konsoliin tulostuu:

\n

$ npm install axios\n\nadded 23 packages, and audited 302 packages in 1s\n\n71 packages are looking for funding\n  run `npm fund` for details\n\nfound 0 vulnerabilities

\n

Komento asentaisi projektiin siis Axios-kirjaston lisäksi yli 20 muuta npm-pakettia, jotka Axios tarvitsisi toimiakseen.

\n

Fetch API tarjoaa samankaltaisen tavan tehdä HTTP-pyyntöjä kuin Axios, mutta Fetch APIn käyttäminen ei vaadi ulkoisten kirjastojen asentamista. Sovelluksen ylläpito helpottuu, kun päivitettäviä kirjastoja on vähemmän, ja myös tietoturva paranee, koska sovelluksen mahdollinen hyökkäyspinta-ala pienenee. Sovellusten tietoturvaa ja ylläpitoa sivutaan kurssin osassa 7.

\n

Pyyntöjen tekeminen tapahtuu käytännössä käyttämällä fetch()-funktiota. Käytettävässä syntaksissa on jonkin verran eroja verrattuna Axiokseen. Huomaamme myös pian, että Axios on huolehtinut joistakin asioista puolestamme ja helpottanut elämäämme. Käytämme nyt kuitenkin Fetch APIa, koska se on laajasti käytetty natiiviratkaisu, joka jokaisen Full Stack -kehittäjän on syytä tuntea.

\n

Datan hakeminen palvelimelta

\n

Tehdään backendistä dataa hakeva metodi tiedostoon src/services/notes.js:

\n

const baseUrl = 'http://localhost:3001/notes'\n\nconst getAll = async () => {\n  const response = await fetch(baseUrl)\n\n  if (!response.ok) {\n    throw new Error('Failed to fetch notes')\n  }\n\n  const data = await response.json()\n  return data\n}\n\nexport default { getAll }

\n

Tutkitaan getAll-metodin toteutusta tarkemmin. Muistiinpanot haetaan backendistä nyt kutsumalla fetch()-funktiota, jolle on annettu argumentiksi backendin URL-osoite. Pyynnön tyyppiä ei ole erikseen määritelty, joten fetch toteuttaa oletusarvoisen toiminnon eli GET-pyynnön.

\n

Kun vastaus on saapunut, tarkistetaan pyynnön onnistuminen vastauksen kentästä response.ok ja heitetään tarvittaessa virhe:

\n

if (!response.ok) {\n  throw new Error('Failed to fetch notes')\n}

\n

Attribuutti response.ok saa arvon true, jos pyyntö on onnistunut eli jos vastauksen statuskoodi on välillä 200-299. Kaikilla muilla statuskoodeilla, esimerkiksi 404 tai 500, se saa arvon false.

\n

Huomaa, että fetch ei automaattisesti heitä virhettä, vaikka vastauksen statuskoodi olisi esimerkiksi 404. Virheenkäsittely tulee toteuttaa manuaalisesti, kuten olemme nyt tehneet.

\n

Jos pyyntö on onnistunut, vastauksen sisältämä data muunnetaan JSON-muotoon:

\n

const data = await response.json()

\n

fetch ei siis automaattisesti muunna vastauksen mukana mahdollisesti olevaa dataa JSON-muotoon, vaan muunnos tulee tehdä manuaalisesti. On myös hyvä huomata, että response.json() on asynkroninen metodi, eli sen kanssa tulee käyttää await-avainsanaa.

\n

Suoraviivaistetaan koodia vielä hieman palauttamalla suoraan metodin response.json() palauttama data:

\n

const getAll = async () => {\n  const response = await fetch(baseUrl)\n\n  if (!response.ok) {\n    throw new Error('Failed to fetch notes')\n  }\n\n  return await response.json()}

\n

Storen alustaminen palvelimelta haetulla datalla

\n

Muutetaan nyt sovellustamme siten, että sovelluksen tila alustetaan palvelimelta haetuilla muistiinpanoilla.

\n

Muutetaan tiedostossa noteReducer.js tapahtuvaa muistiinpanojen tilan alustusta siten, että oletusarvoisesti muistiinpanoja ei ole:

\n

const noteSlice = createSlice({\n  name: 'notes',\n  initialState: [],  // ...\n})

\n

Lisätään action creator setNotes, jonka avulla muistiinpanojen taulukon voi suoraan korvata. Saamme createSlice-funktion avulla luotua haluamamme action creatorin seuraavasti:

\n

// ...\n\nconst noteSlice = createSlice({\n  name: 'notes',\n  initialState: [],\n  reducers: {\n    createNote(state, action) {\n      const content = action.payload\n      state.push({\n        content,\n        important: false,\n        id: generateId()\n      })\n    },\n    toggleImportanceOf(state, action) {\n      const id = action.payload\n      const noteToChange = state.find(n => n.id === id)\n      const changedNote = {\n        ...noteToChange,\n        important: !noteToChange.important\n      }\n      return state.map(note => (note.id !== id ? note : changedNote))\n    },\n    setNotes(state, action) {      return action.payload    }  }\n})\n\nexport const { createNote, toggleImportanceOf, setNotes } = noteSlice.actionsexport default noteSlice.reducer

\n

Toteutetaan muistiinpanojen alustus App-komponentiin, eli kuten yleensä dataa palvelimelta haettaessa, käytetään useEffect-hookia:

\n

import { useEffect } from 'react'import { useDispatch } from 'react-redux'\nimport NoteForm from './components/NoteForm'\nimport Notes from './components/Notes'\nimport VisibilityFilter from './components/VisibilityFilter'\nimport { setNotes } from './reducers/noteReducer'import noteService from './services/notes'\nconst App = () => {\n  const dispatch = useDispatch()\n  useEffect(() => {    noteService.getAll().then(notes => dispatch(setNotes(notes)))  }, [dispatch])\n  return (\n    <div>\n      <NoteForm />\n      <VisibilityFilter />\n      <Notes />\n    </div>\n  )\n}\n\nexport default App

\n

Muistiinpanot haetaan palvelimelta siis käyttäen määrittelemäämme getAll()-metodia ja tallennetaan sitten Redux-storeen dispatchaamalla setNotes -action creatorin palauttama action. Toiminnot tehdään useEffect-hookissa eli ne suoritetaan App-komponentin ensimmäisen renderoinnin yhteydessä.

\n

Tutkitaan vielä tarkemmin erästä pientä yksityiskohtaa. Olemme lisänneet dispatch-muuttujan useEffect-hookin riippuvuustaulukkoon. Jos yritämme käyttää tyhjää riippuvuustaulukkoa, ESLint antaa seuraavan varoituksen: React Hook useEffect has a missing dependency: 'dispatch'. Mistä on kyse?

\n

Koodi toimisi loogisesti täysin samoin, vaikka käyttäisimme tyhjää riippuvuustaulukkoa, koska dispatch viittaa samaan funktioon koko ohjelman suorituksen ajan. On kuitenkin hyvän ohjelmointikäytännön mukaista lisätä useEffect-hookin riippuvuuksiksi kaikki sen käyttämät muuttujat ja funktiot, jotka on määritelty kyseisen komponentin sisällä. Näin voidaan välttää yllättäviä bugeja.

\n

Datan lähettäminen palvelimelle

\n

Toteutetaan seuraavaksi toiminnallisuus uuden muistiinpanon lähettämiseksi palvelimelle. Pääsemme samalla harjoittelemaan, miten POST-pyyntö tehdään fetch()-metodia käyttäen.

\n

Laajennetaan tiedostossa src/services/notes.js olevaa palvelimen kanssa kommunikoivaa koodia seuraavasti:

\n

const baseUrl = 'http://localhost:3001/notes'\n\nconst getAll = async () => {\n  const response = await fetch(baseUrl)\n\n  if (!response.ok) {\n    throw new Error('Failed to fetch notes')\n  }\n\n  return await response.json()\n}\n\nconst createNew = async (content) => {  const response = await fetch(baseUrl, {    method: 'POST',    headers: { 'Content-Type': 'application/json' },    body: JSON.stringify({ content, important: false }),  })    if (!response.ok) {    throw new Error('Failed to create note')  }    return await response.json()}\nexport default { getAll, createNew }

\n

Tutkitaan createNew-metodin toteutusta tarkemmin. fetch()-funktion ensimmäinen parametri määrittelee URL-osoitteen, johon pyyntö tehdään. Toinen parametri on olio, joka määrittelee muut pyynnön yksityiskohdat, kuten pyynnön tyypin, otsikot ja pyynnön mukana lähetettävän datan. Voimme selkeyttää koodia vielä hieman tallentamalla pyynnön yksityiskohdat määrittelevän olion erilliseen options-apumuuttujaan:

\n

const createNew = async (content) => {\n  const options = {    method: 'POST',    headers: { 'Content-Type': 'application/json' },    body: JSON.stringify({ content, important: false }),  }    const response = await fetch(baseUrl, options)\n  if (!response.ok) {\n    throw new Error('Failed to create note')\n  }\n  \n  return await response.json()\n}

\n

Tutkitaan options-oliota tarkemmin:

\n

method määrittelee pyynnön tyypin, joka tässä tapauksessa on POST
headers määrittelee pyynnön otsikot. Liitämme pyyntöön otsikon 'Content-Type': 'application/json', jotta palvelin tietää, että pyynnön mukana oleva data on JSON-muotoista, ja osaa käsitellä pyynnön oikein
body sisältää pyynnön mukana lähetettävän datan. Kentään ei voi suoraan sijoittaa JavaScript-oliota, vaan se tulee ensin muuntaa JSON-merkkijonoksi kutsumalla funktiota JSON.stringify()

\n

Kuten GET-pyynnön kanssa, myös nyt vastauksen statuskoodi tutkitaan virheiden varalta:

\n

if (!response.ok) {\n  throw new Error('Failed to create note')\n}

\n

Jos pyyntö onnistuu, JSON Server palauttaa juuri luodun muistiinpanon, jolle se on generoinut myös yksilöllisen id:n. Vastauksen sisältämä data tulee kuitenkin vielä muuntaa JSON-muotoon metodilla response.json():

\n

return await response.json()

\n

Muutetaan sitten sovelluksemme NoteForm-komponenttia siten, että uusi muistiinpano lähetetään backendiin. Komponentin metodi addNote muuttuu hiukan:

\n

import { useDispatch } from 'react-redux'\nimport { createNote } from '../reducers/noteReducer'\nimport noteService from '../services/notes'\nconst NoteForm = (props) => {\n  const dispatch = useDispatch()\n  \n  const addNote = async (event) => {    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    const newNote = await noteService.createNew(content)    dispatch(createNote(newNote))  }\n\n  return (\n    <form onSubmit={addNote}>\n      <input name=\"note\" />\n      <button type=\"submit\">add</button>\n    </form>\n  )\n}\n\nexport default NoteForm

\n

Kun uusi muistiinpano luodaan backendiin kutsumalla createNew()-metodia, saadaan paluuarvona muistiinpanoa kuvaava olio, jolle backend on generoinut id:n. Muutetaan siksi tiedostossa notesReducer.js määritelty action creator createNote seuraavaan muotoon:

\n

const noteSlice = createSlice({\n  name: 'notes',\n  initialState: [],\n  reducers: {\n    createNote(state, action) {\n      state.push(action.payload)    },\n    // ..\n  },\n})

\n

Muistiinpanojen tärkeyden muuttaminen olisi mahdollista toteuttaa samalla periaatteella, eli tehdä palvelimelle ensin asynkroninen metodikutsu ja sen jälkeen dispatchata sopiva action.

\n

Sovelluksen tämänhetkinen koodi on GitHubissa branchissa part6-4.

\n

\n

\n

Tehtävät 6.14.-6.15.

\n

6.14 anekdootit ja backend, step1

\n

Hae sovelluksen käynnistyessä anekdootit JSON Serverillä toteutetusta backendistä. Käytä HTTP-pyynnön tekemiseen Fetch APIa.

\n

Backendin alustavan sisällön saat esim. täältä.

\n

6.15 anekdootit ja backend, step2

\n

Muuta uusien anekdoottien luomista siten, että anekdootit talletetaan backendiin. Hyödynnä toteutuksessasi jälleen Fetch APIa.

\n

\n

\n

Asynkroniset actionit ja Redux Thunk

\n

Lähestymistapamme on melko hyvä, mutta siinä mielessä ikävä, että palvelimen kanssa kommunikointi tapahtuu komponentit määrittelevien funktioiden koodissa. Olisi parempi, jos kommunikointi voitaisiin abstrahoida komponenteilta siten, että niiden ei tarvitsisi kuin kutsua sopivaa action creatoria. Esim. App voisi alustaa sovelluksen tilan seuraavasti:

\n

const App = () => {\n  const dispatch = useDispatch()\n\n  useEffect(() => {\n    dispatch(initializeNotes())\n  }, [dispatch]) \n  \n  // ...\n}

\n

NoteForm puolestaan loisi uuden muistiinpanon seuraavasti:

\n

const NoteForm = () => {\n  const dispatch = useDispatch()\n  \n  const addNote = async (event) => {\n    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    dispatch(createNote(content))\n  }\n\n  // ...\n}

\n

Molemmat komponentit dispatchaisivat ainoastaan actionin välittämättä siitä, että taustalla tapahtuu todellisuudessa palvelimen kanssa tapahtuvaa kommunikointia. Tämän kaltaisten asynkronisten actioneiden käyttö onnistuu Redux Thunk-kirjaston avulla. Kirjaston käyttö ei vaadi ylimääräistä konfiguraatiota eikä asennusta, kun Redux-store on luotu Redux Toolkitin configureStore-funktiolla.

\n

Redux Thunkin ansiosta on mahdollista määritellä action creatoreja, jotka palauttavat objektin sijaan funktion. Tämän ansiosta on mahdollista toteuttaa asynkronisia action creatoreja, jotka ensin odottavat jonkin asynkronisen toimenpiteen valmistumista ja vasta sen jälkeen dispatchaavat varsinaisen actionin.

\n

Jos action creator palauttaa funktion, Redux välittää palautetulle funktiolle automaattisesti Redux-storen dispatch- ja getState-metodit argumenteiksi. Sen ansiosta voimme määritellä muistiinpanojen alkutilan palvelimelta hakevan action creatorin initializeNotes tiedostossa noteReducer.js seuraavasti:

\n

import { createSlice } from '@reduxjs/toolkit'\nimport noteService from '../services/notes'\nconst noteSlice = createSlice({\n  name: 'notes',\n  initialState: [],\n  reducers: {\n    createNote(state, action) {\n      state.push(action.payload)\n    },\n    toggleImportanceOf(state, action) {\n      const id = action.payload\n      const noteToChange = state.find((n) => n.id === id)\n      const changedNote = {\n        ...noteToChange,\n        important: !noteToChange.important,\n      }\n      return state.map((note) => (note.id !== id ? note : changedNote))\n    },\n    setNotes(state, action) {\n      return action.payload\n    },\n  },\n})\n\nconst { setNotes } = noteSlice.actions\nexport const initializeNotes = () => {  return async (dispatch) => {    const notes = await noteService.getAll()    dispatch(setNotes(notes))  }}\nexport const { createNote, toggleImportanceOf } = noteSlice.actions\nexport default noteSlice.reducer

\n

Sisemmässä funktiossaan eli asynkronisessa actionissa operaatio hakee ensin palvelimelta kaikki muistiinpanot ja sen jälkeen dispatchaa muistiinpanot storeen lisäävän actionin. Huomionarvioista on se, että Redux välittää dispatch-metodin viitteen automaattisesti funktion argumentiksi, eli action creator initializeNotes ei tarvitse mitään parametreja.

\n

Action creatoria setNotes ei enää exportata moduulin ulkopuolelle, koska muistiinpanojen alkutila on tarkoitus asettaa jatkossa käytämällä tekemäämme asynkronista action creatoria initialNotes. Hyödynnämme kuitenkin edelleen setNotes -action creatoria moduulin sisällä.

\n

Komponentti App voidaan nyt määritellä seuraavasti:

\n

import { useEffect } from 'react'\nimport { useDispatch } from 'react-redux'\n\nimport NoteForm from './components/NoteForm'\nimport Notes from './components/Notes'\nimport VisibilityFilter from './components/VisibilityFilter'\nimport { initializeNotes } from './reducers/noteReducer'\nconst App = () => {\n  const dispatch = useDispatch()\n\n  useEffect(() => {\n    dispatch(initializeNotes())  }, [dispatch])\n\n  return (\n    <div>\n      <NoteForm />\n      <VisibilityFilter />\n      <Notes />\n    </div>\n  )\n}\n\nexport default App

\n

Ratkaisu on elegantti, sillä muistiinpanojen alustuslogiikka on eriytetty kokonaan React-komponenttien ulkopuolelle.

\n

Luodaan seuraavaksi appendNote-niminen asynkroninen action creator:

\n

import { createSlice } from '@reduxjs/toolkit'\nimport noteService from '../services/notes'\n\nconst noteSlice = createSlice({\n  name: 'notes',\n  initialState: [],\n  reducers: {\n    createNote(state, action) {\n      state.push(action.payload)\n    },\n    toggleImportanceOf(state, action) {\n      const id = action.payload\n      const noteToChange = state.find((n) => n.id === id)\n      const changedNote = {\n        ...noteToChange,\n        important: !noteToChange.important,\n      }\n      return state.map((note) => (note.id !== id ? note : changedNote))\n    },\n    setNotes(state, action) {\n      return action.payload\n    },\n  },\n})\n\nconst { createNote, setNotes } = noteSlice.actions\nexport const initializeNotes = () => {\n  return async (dispatch) => {\n    const notes = await noteService.getAll()\n    dispatch(setNotes(notes))\n  }\n}\n\nexport const appendNote = (content) => {  return async (dispatch) => {    const newNote = await noteService.createNew(content)    dispatch(createNote(newNote))  }}\nexport const { toggleImportanceOf } = noteSlice.actions\nexport default noteSlice.reducer

\n

Periaate on jälleen sama. Ensin suoritetaan asynkroninen operaatio, ja sen valmistuttua dispatchataan storen tilaa muuttava action. createNote -action creatoria ei enää exportata tiedoston ulkopuolelle, vaan sitä käytetään ainoastaan sisäisesti appendNote -funktion toteutuksessa.

\n

Komponentti NoteForm yksinkertaistuu seuraavasti:

\n

import { useDispatch } from 'react-redux'\nimport { appendNote } from '../reducers/noteReducer'\nconst NoteForm = () => {\n  const dispatch = useDispatch()\n\n  const addNote = async (event) => {\n    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    dispatch(appendNote(content))  }\n\n  return (\n    <form onSubmit={addNote}>\n      <input name=\"note\" />\n      <button type=\"submit\">add</button>\n    </form>\n  )\n}

\n

Sovelluksen tämänhetkinen koodi on GitHubissa branchissa part6-5.

\n

Redux Toolkit tarjoaa myös hieman kehittyneempiä työkaluja asynkronisen tilanhallinnan helpottamiseksi, esim mm. createAsyncThunk-funktion ja RTK Query ‑API:n. Yksinkertaisissa sovelluksissa näiden tuoma hyöty lienee kuitenkin vähäinen.

\n

\n

\n

Tehtävät 6.16.-6.19.

\n

6.16 anekdootit ja backend, step3

\n

Muuta Redux-storen alustus tapahtumaan Redux Thunk ‑kirjaston avulla toteutettuun asynkroniseen actioniin.

\n

6.17 anekdootit ja backend, step4

\n

Muuta myös uuden anekdootin luominen tapahtumaan Redux Thunk ‑kirjaston avulla toteutettuihin asynkronisiin actioneihin.

\n

6.18 anekdootit ja backend, step5

\n

Äänestäminen ei vielä talleta muutoksia backendiin. Korjaa tilanne Redux Thunk ‑kirjastoa ja Fetch APIa hyödyntäen.

\n

6.19 anekdootit ja backend, step6

\n

Notifikaatioiden tekeminen on nyt hieman ikävää, sillä se edellyttää kahden actionin tekemistä ja setTimeout-funktion käyttöä:

\n

dispatch(setNotification(`new anecdote '${content}'`))\nsetTimeout(() => {\n  dispatch(clearNotification())\n}, 5000)

\n

Toteuta action creator, joka mahdollistaa notifikaation antamisen seuraavasti:

\n

dispatch(setNotification(`you voted '${anecdote.content}'`, 10))

\n

Ensimmäisenä parametrina on renderöitävä teksti ja toisena notifikaation näyttöaika sekunneissa.

\n

Ota paranneltu notifikaatiotapa käyttöön sovelluksessasi.

\n

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