Redux de Intro!

Deze week een korte introductie van de 4 basisbegrippen die je nodig hebt om Redux te begrijpen. We gaan kort uitleggen hoe state wordt aangepast in een Redux Store met behulp van Reducers en Actions. En we vertellen wat al deze begrippen doen en hoe ze werken in een Redux applicatie.

De reden waarom Redux zo populair is, is dat bij grote applicaties state management nogal complex wordt en bij complexe applicaties wordt het een nachtmerrie. En Redux is heel erg lightweight het is maar 2kb. Redux is een bibliotheek die er voor zorg dat het ondehouden van je state voorspelbaar is. Wat hier mee bedoelt wordt zijn de volgende punten, die gelijk 3 van de 4 hoofd concepten introduceren. Deze worden hieronder verder uitgelegd. – Je complete applicatie state wordt bewaart op 1 plek je STORE – Je state is kan alleen maar gelezen worden en alleen door het dispatchen van ACTIONS kan hij veranderd worden – Je specificeert wat het eindresultaat van je state moet zijn door middel van REDUCERS Deze 3 punten lijken een beetje vaag nu maar zodra ik ze uit ga leggen met wat voorbeelden wordt het hopelijk allemaal duidelijk.

De Store

In redux de store is het object waar we al onze state data in bewaren maar ook brengt hij de actions en reducers bij elkaar, hier zullen we straks meer over vertellen. In elke Redux applicatie is er maar 1 store. Het is heel erg makkelijk om data uit de store te halen maar om de state te veranderen en op te slaan dat is een ander verhaal. Willen we state updaten dan hebben we ACTIONS & REDUCERS nodig. De verchillende taken van de store zijn: – De state opvragen via getState() – Bewaren van de state van de hele applicatie – State laten updaten door middel van reducers die aangeroepen worden door actions

Reducers

Reducers zijn functies die de vorige state en een action als argumenten pakken en een nieuwe state terug geven. Reducers worden aangestuurd door actions en geven aan de hand van de action aan hoe de state veranderd. Reducers zijn pure functies dit houdt in dat een reducer nooit zijn eigen argumenten muteert dus hij kan nooit de state direct aanpassen maar hij pakt de state en geeft een nieuw object terug. Verder mar je nooit API calls doen in je reducer of van de ene naar de andere pagina routen. Ook mag je geen “niet pure” functies roepen zoals Date.now(); Hieronder staat een voorbeeld van een reducer die op aangeven van een action met type “INCREMENT” de state met de waarde verhoogt die is opgegeven in de action.

const defaultState = { count: 0 } const customReducer = (state = defaultState, action) => { switch(action.type){ case “INCREMENT”: return { …state, count: state.count + action.payload } default return state; } }

Actions

Heel simpel gezegd zijn actions event objecten die verstuurd kunnen worden met de dispatch functie. Ze versturen data door middel van gebruikers interactie naar de store. Die worden vervolgend opgevangen door Reducers om een state verandering uit te voeren. Een action heeft een type die aangeeft wat de action moet gaan doen en een optionele payload Een action object ziet er als volgt uit:

{ type: “INCREMENT”, payload: 3 }

Action Creators

Action Creators zijn functies die een action object teruggeven en maken dingen wat makkelijker om te testen. De actions die worden teruggegeven vanuit een action creator gaan door alle reducer van de store. Daarom hebben actions ook een action type om ze te onderscheiden. Om vervolgens een action te gebruiken kunnen we simpelweg de action creator aanroepen met de dispatch funtie.

//Action Creator const increaseCounter = ( incrementValue ) => { return { type: “INCREMENT”, payload: incrementValue } } //Dispatch dispatch(() => increaseCounter(incrementValue))

Dit zijn de 4 basis begrippen van Redux op zich zelf staand is het allemaal niet heel erg lastig maar gecombineerd kan het toch wel een complexe zaak zijn. Ik hoop dat ik aan de hand van dit artikel de basis begrippen van Redux heb uit kunnen leggen. In een volgend artikel komen we hier op terug en gaan we een mini appplicatie maken met Redux