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.
published: Feb 23, 2021
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.

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.

 

JS

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:

JS

{
      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.

JS

//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. Hieronder is nog even een overzicht hoe alles met elkaar samenhangt

Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de ReactHooks serie! We gaan het hebben over useCallback en over useMemo. Met deze hooks kunnen we waardes of callback memoizen dit kan nuttig zijn bij zware operaties of om te zorgen dat bepaalde componenten niet altijd mee rerenderen. Zeker omdat bij kleine applicatie het vaak efficienter is om niet te optimaliseren dan wel.

Lees meer

Software ontwikkeling op maat

Hoe werkt het?

Wat wonderen doet voor het ene bedrijf kan zinloos zijn voor een ander bedrijf. Daarom hebben we oplossingen op maat die het unieke karakter van jouw bedrijf respecteren. We werken in een positieve spiraal van testen, monitoren en verzamelen gegevens om precies te weten te komen wat voor jou werkt en wat niet. Het is onze ‘whole package’-mindset, een aandacht voor details die ons in staat stelt om elke keer jouw prestatiedoelstellingen te bereiken. Dus ontspan en geniet van de rit!