Reducerit Reduxissa

Edellisellä oppitunnilla loimme funktiolla createSlice slice-tuotteen products ja reducerin, joka päivittää tätä storeen tallennettua slicea. Muistutan vielä, että Reduxissa tilan dataa muutetaan reducereiden avulla.

On muistettava, että reducereihin kohdistuu useita rajoituksia. Reducer päivittää tilan vain nykyisen tilan ja action-objektin saamien arvojen perusteella, ja sitten päättää, kuinka tilaa muutetaan ja palauttaa sen uuden arvon.

Tiedämme, että oletusarvoisesti objektit ja taulukot JavaScriptissä ovat mutoituvia (muutettavissa). Myös tiedämme, että tilaa ei saa muuttaa suoraan, vain kopioiden kanssa tulee työskennellä. Tähän sääntyn tulee reducerinkin noudattaa. Mutta tällaisen logiikan kirjoittaminen käsin voi olla melko työlästä ja vaikeaa, ja tässä apuun tulee funktio createSlice, joka käyttää Immer-kirjastoa, muuntaen 'mutoitavan' koodisi 'ei-mutoitavaksi'. Näin ollen, syntiä ja elämän helpottamista on sallittua vain käytettäessä funktioita createSlice tai createReducer.

Reducerin rajoituksiin kuuluu myös asynkronisen logiikan käyttö, satunnaisten arvojen laskeminen ja muiden "sivuvaikutusten" suorittaminen. Nyt, kun olemme tutustuneet reduceriin lähemmin, palaamme tuotesovellukseemme.

Sovelluksessamme on store, joka loimme aiemmissa oppitunneissa, mutta toistaiseksi siinä ei ole mitään. Avataan tiedostomme store.js ja lisätään siihen vähän koodia. Aluksi tuodaan siihen reducer-funktio tuotteille:

import productsReducer from '../parts/products/productsSlice'

Nyt voimme määritellä tuodun funktion productsReducer reduceriksi:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

Yllä olevalla rivillä kerromme storillemme, että nyt kun action ilmenee kaikki sliceen state.products liittyvät tiedot päivittyvät reducerilla productsReducer.

Nyt voit käynnistää sovelluksen (huomaa, että konsolista katosi varoitus epäkelvosta reducerista!), avata Redux DevToolsin selaimessa ja selaille sen välilehtiä. Esimerkiksi klikkaamalla State-välilehteä Inspector-välilehdellä voimme nähdä kaksi tuoteobjektiamme, jotka tulostuivat tilan alkuarvoina sovelluksen ensimmäisellä käynnistyksellä. Log monitor -välilehdellä näemme mitkä slicet globaali tila sisältää - se on slice products, johon kuuluu kaksi objektia. Kurkkaa myös Chart-välilehdelle.

Avaa opiskelijasovelluksesi ja muuta tiedoston store.js koodia kuten oppitunnilla näytetään.

Käynnistä selaimessa sovelluksesi ja selaa Redux DevTools -laajennuksen välilehtiä.