Grunnleggende termer i Redux

I denne leksjonen vil vi kort gå gjennom de grunnleggende begrepene og termene som det er nødvendig å beherske for videre studier av Redux.

Vi starter med handling (action). Dette er en hendelse som beskriver det som skjedde i applikasjonen vår. Teknisk sett er det et vanlig JavaScript objekt, som inneholder et felt type der vi skriver navnet på handlingen.

Det andre viktige feltet i handlingsobjektet er feltet payload. Det vil inneholde nyttelast til handlingen. Med nyttelast menes noen data som overføres som parametre til handlingen.

Det kan også være andre felter i dette objektet med tilleggsinformasjon.

La oss for eksempel opprette en handling og kalle den addOrderAction. La den være ansvarlig for å legge til en ordre. Da vil vi i egenskapen type indikere at ordren er lagt til (orderAdded) i ordrene (orders). Og i payload spesifiserer vi nærmere hva slags ordre det er, for eksempel - male en vegg:

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

For ikke å måtte skrive handlingsobjektet manuelt hver gang, kan vi bruke såkalte action creators - en funksjon som oppretter og returnerer et handlingsobjekt for oss. La oss kalle den addOrder. Som parameter vil vi sende den den nødvendige teksten for egenskapen payload:

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

Det neste viktige begrepet i kjeden er reducer (reduserer) - en funksjon som tar imot den nåværende tilstanden og et handlingsobjekt. Denne funksjonen bestemmer hvordan tilstanden skal oppdateres og returnerer den oppdaterte staten om nødvendig.

Neste begrep er store (store) - dette er et objekt der den nåværende globale tilstanden til Redux-applikasjonen lagres. Dette objektet har en metode kalt getState, som kan brukes for å hente den nåværende verdien av staten.

Storet har også en metode kalt dispatch. Å kalle på denne og sende et handlingsobjekt er den eneste måten å endre staten på. Som et resultat vil storet kjøre redusererfunksjonen og lagre den nye staten.

Og det siste begrepet vi skal se på i denne leksjonen er selectors. Selectorer er spesielle funksjoner som vet hvordan de skal hente informasjon fra staten i storet. Disse funksjonene viser seg å være spesielt nyttige når applikasjonen vokser, og de hjelper med å unngå kodeduplikering.

Vi vil lære mer om alle disse begrepene og hvordan de brukes i praksis i de følgende delene av denne veiledningen.