Tips & Tricks

Redux vervangen door React Context?

React 16.3 zag niet zo heel lang geleden het levenslicht. Deze nieuwe release bracht verschillende nieuwe functies met zich mee, ??n daarvan is React Context. Al moeten we heel eerlijk zijn: Context bestond al voor React 16.3, al was het toen vrij experimenteel. Sommige libraries, zoals React Router & React Redux, maakten hier gebruik van.?

De oude en nieuwe Context zijn echter een wereld van verschil. Wanneer je de nieuwe versie in je app gebruikt, moet je je logica refactoren, want de API is niet compatibel.?

Exit Redux?

Eerst en vooral wil ik duidelijkheid scheppen over Redux. Het is absoluut geen slechte zaak om Redux te gebruiken. Toch loont het de moeite om je app in vraag te stellen en jezelf af te vragen of Redux geen overkill is. React Context vervangt een groot deel van de functies die je vroeger aan Redux zou toevoegen – denk maar aan het verbergen of tonen van een sidebar, en deze keuze op te slaan.

Een beetje context over Context

React Context zorgt ervoor dat zogenaamde child components toegang krijgen tot bepaalde zaken in een parent component. React Context werd in de eerste plaats ontwikkeld om de prop drilling-problemen van React op te lossen. Dit issue maakt het moeilijk om zaken bij te houden, aangezien je helemaal vanaf de top naar de bottom van je React tree moet.?

React Context biedt dus een oplossing voor dit probleem. Je kan props of states delen met (indirecte) child of parent componenten.

Waarom zou je Redux vervangen door Context?

Wanneer je Redux voor de eerste keer gebruikt, valt het meteen op dat het bijzonder moeilijk is om mee te werken. Je moet bijvoorbeeld meer leren over store, reducers, actions en integraties. Dat alles maakt het moeilijker om verschillende zaken met elkaar te connecteren, waardoor je dan weer extra code moet schrijven. Redux ondersteunt de schaalbaarheid van je app, maar op zo?n moment is het gebruik van Redux overbodig.

Enkele voorbeelden

Laat me beginnen bij het begin. Vooraleer ik je meer vertel over het gebruik van React Context, toon ik hoe je een counter-component maakt zonder Redux. Daarna bekijken we het verschil tussen React Context en Redux.

import React, { Component } from "react";

class Counter extends Component {
  state = { value: 0 };
  
  increment = () => {
      this.setState(prevState => ({ value: prevState.value + 1 }));
  };
  
  decrement = () => {
      this.setState(prevState => ({ value: prevState.value - 1 }));
  };
  
  render() {
    return (
      
<div>
        {this.state.value}
        <button onclick={this.increment}>+</button>
        <button onclick={this.decrement}>-</button>
      </div>

    );
  }
}

Voorbeeld 1: Dit eenvoudige voorbeeld toont hoe je een counter maakt die de React-toestand bewaart. Je kan er natuurlijk ook voor kiezen om de huidige toestand niet te gebruiken.?

import React, { Component } from "react";
import { createStore } from "redux";
import { connect } from "react-redux";

const reducer = (state = { value: 0 }, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { value: state.value + 1 };
    case "DECREMENT":
      return { value: state.value - 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

const mapStateToProps = (mapState, ownProps) => {
  return { value: mapState.value };
};

class Counter extends Component {
  increment = () => {
    this.props.dispatch({ type: "INCREMENT" });
  };

  decrement = () => {
    this.props.dispatch({ type: "DECREMENT" });
  };

  render() {
    return (
      <Provider store={store}>
        {this.props.value}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </Provider>
    );
  }
}

export default connect(mapStateToProps)(Counter);

Voorbeeld 2: Dit is hetzelfde als bij de gewone React, maar met een Redux-integratie. In dit voorbeeld heb je een store, actions en reducers nodig om het volledige verhaal te laten werken. De waarde van de counter is herbruikbaar in andere componenten, zolang je je in de provider component bevindt.

import React, { createContext } from "react";
const Context = createContext();
const { Provider, Consumer } = Context;

class App extends Component {
    state = { value: 0 };
    
    increment = () => {
        this.setState(prevState => ({ value: prevState.value + 1 }));
    };
    
    decrement = () => {
        this.setState(prevState => ({ value: prevState.value - 1 }));
    };
    
    render() {
      return (
        <Provider value={{ value: this.state.value, increment: this.increment, decrement: this.decrement }} >
          <Counter />
        </Provider>
      );
    }
}

class Counter extends Component {
  render() {
    return (
      <Consumer>
        {({ value, increment, decrement }) => {
          
<div>
            {value}
            <button onClick={increment}>+</button>
            <button onClick={decrement}>-</button>
          </div>

;
        }}
      </Consumer>
    );
  }
}

Voorbeeld 3: In dit laatste voorbeeld maken we gebruik van de nieuwe Context. Wanneer je een Context (createContext) aanmaakt, kan je kiezen uit twee soorten – een provider en een consumer. We gebruiken de app als een type store, waar de provider wordt gebruikt. Tijdens de configuratie van de waarde maken we gebruik van renderprops. Die kunnen binnen de app gebruikt worden, zolang je de consumer gebruikt.?

Binnen <Counter/> heb je de consumer met de verschillende render props: value, increment en decrement. Die gebruiken we om alle zaken uit app.js (een type store) aan te spreken.

Wanneer gebruik je Redux??

Er zijn verschillende redenen om Redux te gebruiken:?

  • Je wil een global state opslaan (gemakkelijk om te debuggen, toegang tot de geschiedenis, geen overwrites).
  • Je hebt een heel grote applicatie
  • Je wil de schaalbaarheid van je applicatie vergroten
  • Je hebt een predictable state container

Wanneer gebruik je React Context zonder Redux?

In de volgende gevallen is het overbodig om Redux te gebruiken:

  • Je hebt een kleine app of website met enkel tekst en foto?s
  • Je wil iets dat makkelijk is om op te zetten
  • Je wil de grootte en performance beperken
  • Je hebt betere action returns met state chunk

Conclusie

Je kan React Context gebruiken wanneer je je state management simpel wil houden. Het is ook de way to go wanneer je props wil bereiken zonder Redux of Mobx te implementeren. Onze tip? Analyseer je huidige code en stel jezelf de volgende vragen:?

  • Moet ik Redux op dit moment echt gebruiken??
  • Zou mijn huidige app zodanig groeien dat er nood is aan state management??

Het is perfect mogelijk om voor kleinere apps (met een beperkt state management) gebruik te maken van React Context. Wil je toch schalen? Dan maak je best gebruik van Redux!

Enkele must-reads over Redux en React Context:

Ook interessant:

Zo word je een Microsoft MVP

First things first: wat is een Microsoft MVP? Wanneer we er de officiële omschrijving van Microsoft’s MVP-site bijhalen,...

Lees verder

10 tips voor Chrome DevTools

Debuggen is minstens even belangrijk als het schrijven van code. Developers moeten daarom zeer goed weten hoe ze...

Lees verder

Je app monitoren met Application Insights

Laten we heel eerlijk zijn: het was nog nooit zo gemakkelijk om een applicatie te creëren en te...

Lees verder