Mastering React Hooks: Het Ontketenen van de Kracht van useContext en useReducer React Hooks Deel 2

kennisbank, React

Gepubliceerd: 31.01.2024

In het dynamische domein van React-ontwikkeling is het begrijpen en benutten van de mogelijkheden van hooks essentieel. In het tweede deel van onze React Hooks-serie duiken we in de wereld van useContext en useReducer. Deze hooks bieden, wanneer gecombineerd, een krachtige oplossing voor het beheren van state en context op een efficiënte en georganiseerde manier.

Begrip van useContext:

De useContext-hook komt naar voren als een game-wisselaar, waarmee ontwikkelaars worden bevrijd van de last van prop-drilling. Terwijl de standaard React-benadering inhoudt dat gegevens van ouder naar kindcomponenten worden doorgegeven, kan dit omslachtig worden in diep geneste structuren. Context, gefaciliteerd door useContext, biedt een naadloze manier om gegevens door verschillende delen van uw applicatie te verzenden zonder uitgebreide prop-doorgifte.

Om useContext te implementeren, begint u met het maken van een nieuw contextobject met React.createContext. Dit levert een Provider- en een Consumer-component op, die kunnen worden ontmanteld voor gebruik. De Provider-component zorgt ervoor dat uw state toegankelijk is voor elk kindcomponent. Omring uw oudercomponent met de Provider en verstrek een waarde aan de prop met de gewenste toegankelijke gegevens. In kindcomponenten verbruikt de Consumer deze waarde voor gebruik.

Echter, useContext vereenvoudigt dit proces aanzienlijk. Door het doorgeven van het createContext-object aan useContext, krijgt u direct toegang tot de waarden die zijn gespecificeerd in de Provider. Dit elimineert de noodzaak van uitgebreide nesting met Consumer-componenten. Hier is een voorbeeld:


// VoetbalContext.js
const clubsEredivisie = {
    nummer1: "Ajax",
    nummer2: "PSV",
    nummer3: "Vitesse",
};
export const VoetbalContext = React.createContext(clubsEredivisie.nummer1);

// index.js
import React from 'react';
import { VoetbalContext } from "./VoetbalContext";
const App = () => {
    return (
        <VoetbalContext.Provider value={clubsEredivisie}>
             <Home />
         </VoetbalContext.Provider>
    );
}
export default App

// MyPersonalComponent.js
import React, { useContext } from "react";
import VoetbalContext from './VoetbalContext';
const MyPersonalComponent = () => {
    const clubs = useContext(VoetbalContext);
    return (
        <div>
            <div>De nummer 1 club van de eredivisie is: {clubs.nummer1}</div>
            <div>De nummer 2 club van de eredivisie is: {clubs.nummer2}</div>
            <div>De nummer 3 club van de eredivisie is: {clubs.nummer3}</div>
        </div>
    )
};
export default MyPersonalComponent

Versterking van State Management met useReducer:

De useReducer-hook, gekoppeld aan useContext, transformeert uw applicatie tot een gecentraliseerde opslag, vergelijkbaar met Redux. Redux, een populaire oplossing voor state management, wordt onmisbaar naarmate uw applicatie groeit. Echter, useReducer biedt een lichtgewicht alternatief voor useState, vooral gunstig voor het afhandelen van complexe logica of afhankelijkheden.

Om useReducer te gebruiken, moet u het voorzien van een reducer-functie en een initiële staat. De reducer-functie bepaalt de nieuwe staat op basis van het actietype. Hier is een eenvoudig voorbeeld:


// VoteWidget.js
import React, { useReducer } from "react";
const initialState = {
    ajax: 10,
    psv: 4,
    vitesse: 6,
    feyenoord: 8
};
const reducer = (state, action) => {
    switch (action.type) {
        case 'ajax':
            return { ...state, ajax: state.ajax + 1 };
        case 'psv':
            return { ...state, psv: state.psv + 1 };
        case 'vitesse':
            return { ...state, vitesse: state.vitesse + 1 };
        case 'feyenoord':
            return { ...state, feyenoord: state.feyenoord + 1 };
        default:
            throw new Error();
    }
}


const VoteWidget = () => {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
        <div>
             <h1>Stem op je favoriete club!</h1>
            Ajax: {state.ajax}
            <button onClick={() => dispatch({ type: 'ajax' })}>Ajax</button>
            PSV: {state.psv}
            <button onClick={() => dispatch({ type: 'psv' })}>PSV</button>
            Vitesse: {state.vitesse}
            <button onClick={() => dispatch({ type: 'vitesse' })}>Vitesse</button>
            Feyenoord: {state.feyenoord}
           <button onClick={() => dispatch({ type: 'feyenoord' })}>Feyenoord</button>
        </div>
    );
}
export default VoteWidget

Het opnemen van useContext en useReducer in uw React-ontwikkeltoolkit opent nieuwe mogelijkheden voor efficiënt beheer van staat en delen van context. Terwijl u begint aan uw React-reis, zal het beheersen van deze hooks ongetwijfeld uw vermogen verbeteren om schaalbare en onderhoudsvriendelijke applicaties te bouwen.
Blijf op de hoogte voor meer inzichten in de wereld van React-hooks in onze aankomende artikelen. Veel programmeerplezier!

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