Redux de Intro!

Auteur: 4BIS Innovations | Support

Gepubliceerd: 23.02.2021

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.


In een vorig artikel, over React Hooks, heb ik gezegd dat useReducer & useContext samen een vervanging kunnen zijn voor Redux. Maar ik heb toen niet uitgelegd wat Redux nou eigenlijk is. Als we naar de officiele documentatie kijken dan lezen we dat Redux is een voorspelbare state container voor JavaScript applicaties. In dit eerste artikel over Redux ga ik proberen de basis concepten van Redux uit te leggen en in een volgend artikel gaan we er een applicatie mee bouwen.

Context & Reducers

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

Niet kunnen vinden wat je zocht?_

Heb je het antwoord op een vraag niet kunnen vinden? Of heb je het idee dat er nog iets ontbreekt op onze kennisbank? Laat het ons weten. Stel je vraag direct per telefoon aan onze Supportdesk of zet je verzoek op de mail en je ontvangt binnen 24 uur een reactie.