Grundläggande termer i Redux

I den här lektionen kommer vi kort att gå igenom de grundläggande begrepp och termer som behövs för att fortsätta studera Redux.

Vi börjar med aktion (action). Detta är en händelse som beskriver vad som har hänt i vår applikation. Tekniskt sett är det ett vanligt JavaScript objekt, som innehåller fältet type, där vi skriver aktionens namn.

Det andra viktiga fältet i aktionsobjektet är fältet payload. Det kommer att innehålla nyttolast för åtgärden. Med nyttolast menas vissa data som skickas som parametrar till åtgärden.

Det kan också finnas andra fält i detta objekt med ytterligare information.

Låt oss som exempel skapa en åtgärd och kalla den addOrderAction. Låt den hantera tillägget av en order. Då anger vi i egenskapen type att ordern har lagts till (orderAdded) i ordrar (orders). Och i payload anger vi mer i detalj, vilken order det är, till exempel - måla en vägg:

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

För att inte varje gång behöva skriva aktionsobjektet för hand kan vi använda oss av så kallade action creators - en funktion som skapar och returnerar ett aktionsobjekt till oss. Låt oss kalla den addOrder. Som parameter skickar vi den text vi behöver för egenskapen payload:

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

Nästa viktiga begrepp i kedjan är reducer (reducerare) - en funktion som tar emot det aktuella tillståndet och ett aktionsobjekt. Denna funktion bestämmer hur tillståndet ska uppdateras och returnerar det uppdaterade tillståndet, om det behövs.

Nästa begrepp - store (store) - är ett objekt där det aktuella globala tillståndet i Redux-applikationen lagras. Detta objekt har metoden getState, med vilken man kan få det aktuella värdet på tillståndet.

Store har också metoden dispatch. Att anropa den och skicka ett aktionsobjekt är det enda sättet att ändra tillståndet. Som ett resultat kommer store att köra reducer-funktionen och spara det nya tillståndsvärdet.

Och det sista begreppet som vi kommer att titta på i den här lektionen är selectors. Selectors är speciella funktioner som vet hur man extraherar information från tillståndet i store. Dessa funktioner visar sig vara särskilt användbara när applikationen växer och hjälper till att undvika kodupprepning.

Mer om alla dessa begrepp och om tillämpningen av dem i praktiken kommer vi att lära oss i de följande avsnitten i denna handledning.