Reduxin perustermit

Tällä oppitunnilla käymme lyhyesti läpi peruskäsitteet ja termit, joiden hallitseminen on välttämätöntä Reduxin jatko-opiskelua varten.

Aloitamme toiminnolla (action). Se on tapahtuma, joka kuvaa sitä, mitä sovelluksessamme on tapahtunut. Teknisesti se on tavallinen JavaScript-olio, jossa on kenttä type, johon kirjoitamme toiminnon nimen.

Toiminto-olion toinen tärkeä kenttä on kenttä payload. Se sisältää toiminnon hyötykuorman (payload). Hyötykuormalla tarkoitetaan tietoja, jotka välitetään parametreina toiminnolle.

Myös muut kentät, joissa on lisätietoa, voivat olla tässä oliossa.

Luodaan esimerkiksi toiminto ja nimetään se addOrderAction. Olkoon sen vastuulla tilauksen lisääminen. Ominaisuudessa type osoitamme, että tilaus on lisätty (orderAdded) tilauksiin (orders). Ja payload-kentässä määritellään tarkemmin, mikä tilaus on kyseessä, esimerkiksi - seinän maalaus:

const addOrderAction = {
	type: 'orders/orderAdded',
	payload: 'Paint a wall'
}

Jotta ei tarvitse aina kirjoittaa toiminto-oliota käsin, voimme käyttää niin kutsuttua action creator -funktiota, joka luo ja palauttaa meille toiminto-olion. Nimetään se addOrder. Parametrina annamme sille tarvitsemamme tekstin payload-ominaisuutta varten:

const addOrder = text => {
	return {
		type: 'orders/orderAdded',
		payload: text
	}
}

Seuraava tärkeä käsite ketjussa on reducer (redusori) - funktio, joka ottaa vastaan nykyisen tilan ja toiminto-olion. Tämä funktio päättää, kuinka tilaa päivitetään ja palauttaa päivitetyn tilan, jos se on tarpeen.

Seuraava käsite on säilö (store) - olio, jossa säilytetään Redux-sovelluksen nykyinen globaali tila. Tällä oliolla on metodi getState, jonka avulla voidaan saada tilan nykyinen arvo.

Säilöllä on myös metodi dispatch. Sen kutsuminen ja toiminto-olion välittäminen on ainoa tapa muuttaa tilaa. Tuloksena säilö käynnistää redusori-funktion ja tallentaa uuden tilan arvon.

Ja viimeinen käsite, jota tarkastelemme tällä oppitunnilla - selektorit. Selektorit ovat erikoisfunktioita, jotka osaavat poimia tietoa säilön tilasta. Nämä funktiot osoittautuvat erityisen hyödyllisiksi sovelluksen kasvaessa ja auttavat välttämään koodin toistoa.

Lue lisää kaikista näistä käsitteistä ja niiden käytännön soveltamisesta seuraavista oppaan osista.