Redux de Intro!

kennisbank, Automatisering, React

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.


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

Lees hier onze blogs!

Breid je kennis uit met de 4BIS Blog...

WordPress en Plugins – Een wereld die voor je open gaat!

WordPress, Webontwikkeling, Ecommerce / Webshop, kennisbank, WooCommerce

Met plugins kan je functionaliteit van wordpress uitbreiden of geheel nieuwe functies aan wordpress toevoegen. Plugins kan je zelf maken, mits je verstand hebt van php, of je kan ze downloaden.

Lees meer

Onthulling van Tech-Nieuws.nl: Waar Innovatie Samenkomt met Vindingrijkheid

SEO / SEA, Software-modernisering, Webontwikkeling, PHP, Symfony, Digitale Marketing

In het bruisende rijk van technologie is up-to-date blijven niet alleen een noodzaak maar een levensstijl geworden. Met een overvloed aan informatie die ons dagelijks overspoelt, wordt een betrouwbare bron om het laatste technieuws te selecteren en te...

Lees meer

HR software: Zo automatiseer je Human Resource Management

Bedrijfssoftware, Software-modernisering, Webontwikkeling, Automatisering

HRM, ook wel Human Resource Management, is een belangrijk onderdeel voor ieder bedrijf. Vooral als je veel werknemers hebt, is een HR afdeling niet te missen. Het is echter niet nodig om een enorme HR afdeling te hebben. Veel is te automatiseren door...

Lees meer

En wat kunnen we voor jou betekenen?_

Wil je meer weten of heb je interesse? Neem dan gerust direct contact met ons op, per telefoon of via de mail.
Of maak gebruik van één van onze contactformulieren zodat we je zo snel en gepast mogelijk antwoord kunnen geven. We horen graag van je!

back to top