Belangrijke termen in Redux

In deze les gaan we kort de belangrijkste concepten en termen doorlopen, waarvan kennis noodzakelijk is voor het verdere leren van Redux.

We beginnen met een actie (action). Dit is een gebeurtenis die beschrijft wat er in onze applicatie is gebeurd. Technisch gezien is het een gewoon JavaScript object, bevat een veld type, waarin we de naam van de actie schrijven.

Het tweede belangrijke veld van het actie-object is het veld payload. Het zal de nuttige lading van de actie bevatten. Onder nuttige lading wordt enkele data verstaan die als parameters aan de actie worden doorgegeven.

Ook kunnen in dit object andere velden met aanvullende informatie staan.

Laten we als voorbeeld een actie maken en deze addOrderAction noemen. Laat het verantwoordelijk zijn voor het toevoegen van een bestelling. Dan geven we in de eigenschap type aan dat de bestelling toegevoegd (orderAdded) is aan de bestellingen (orders). En in payload specificeren we in meer detail, wat de bestelling is, bijvoorbeeld - een muur verven:

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

Om niet elke keer het object met de actie handmatig te hoeven schrijven, kunnen we zogenaamde action creators gebruiken - functies die het actie-object voor ons aanmaken en teruggeven. Laten we deze addOrder noemen. Als parameter geven we er de gewenste tekst voor de eigenschap payload aan door:

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

Het volgende belangrijke concept in de keten is de reducer - een functie die de huidige staat en het actie-object accepteert. Deze functie beslist hoe de staat moet worden bijgewerkt en retourneert de bijgewerkte state indien nodig.

Volgend concept - de store (store) - dit is een object waarin de huidige globale staat van de Redux applicatie is opgeslagen. Dit object heeft een methode getState, waarmee de huidige waarde van de state kan worden opgehaald.

De store heeft ook een methode dispatch. Deze aanroepen en een actie-object doorgeven - is de enige manier om de state te veranderen. Als gevolg zal de store de reducer-functie uitvoeren en de nieuwe state waarde bij zich opslaan.

En het laatste concept dat we in deze les zullen bekijken - zijn de selectors. Selectors zijn speciale functies, die weten hoe ze informatie moeten halen uit de state in de store. Deze functies blijken bijzonder nuttig te zijn wanneer de applicatie groeit en helpen herhaling van code te voorkomen.

Meer over al deze concepten en over hun praktische toepassing leren we in de volgende delen van deze tutorial.