Choisir la bonne gestion d’état pour votre application React / Blogs / Perficient

React, une puissante bibliothèque JavaScript pour créer des interfaces utilisateur, propose différentes solutions pour gérer l’état des applications. Deux choix populaires sont Redux et l’API Context. Ce blog comparera ces deux approches de gestion d’état, vous aidant à décider laquelle convient le mieux à votre application React.

Introduction

Redux

Redux est une bibliothèque de gestion d’état qui fonctionne bien avec React. Il introduit un magasin global pour contenir l’état de l’ensemble de l’application. Les composants peuvent accéder et modifier l’état en distribuant des actions, qui sont traitées par des réducteurs.

API de contexte

L’API Context fait partie de React qui permet aux composants de partager un état sans passer explicitement d’accessoires à chaque niveau de l’arborescence des composants. Il fournit un moyen de transmettre des données à travers l’arborescence des composants sans avoir à transmettre les accessoires manuellement.

Cas d’utilisation

Redux

Redux est bien adapté aux applications à grande échelle avec une logique d’état complexe. C’est bénéfique quand :

• Vous disposez d’un grand nombre de composants qui doivent accéder au même état.
• L’état de l’application est profondément imbriqué et passer des accessoires serait fastidieux.
• Vous avez besoin d’une source unique de vérité pour l’état de votre application.

API de contexte

L’API Context est plus appropriée pour les besoins de gestion d’état plus simples. Pensez à l’utiliser lorsque :

• Votre application est de petite à moyenne taille.
• Quelques composants doivent accéder à l’état partagé.
• Vous voulez éviter le perçage d’accessoires mais vous n’avez pas besoin de la complexité de Redux.

Exemples de codage

Examinons des exemples de codage pour illustrer l’utilisation de Redux et de l’API Context.

Redux

Installation

Installez les packages requis à l’aide de la commande ci-dessous :

npm install redux react-redux

Configuration du magasin Redux

// store.js

import { createStore } from 'redux';

import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

Réducteur

// reducers.js

const initialState = {

counter: 0,

};

const rootReducer = (state = initialState, action) => {

switch (action.type) {

case 'INCREMENT':

return { ...state, counter: state.counter + 1 };

case 'DECREMENT':

return { ...state, counter: state.counter - 1 };

default:

return state;

} };

export default rootReducer;

Composant

// CounterComponent.js

import React from 'react';

import { connect } from 'react-redux';

const CounterComponent = ({ counter, increment, decrement }) => {

return (

<div>

<p>Counter: {counter}</p>

<button onClick={increment}>Increment</button>

<button onClick={decrement}>Decrement</button>

</div>

); };

const mapStateToProps = (state) => {

return {

counter: state.counter,

}; };

const mapDispatchToProps = (dispatch) => {

return {

increment: () => dispatch({ type: 'INCREMENT' }),

decrement: () => dispatch({ type: 'DECREMENT' }),

}; };

export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);

API de contexte

Créer un contexte

// MyContext.js

import { createContext } from 'react';

const MyContext = createContext();

export default MyContext;

Fournir et consommer du contexte

// ParentComponent.js

import React from 'react';

import MyContext from './MyContext';

import ChildComponent from './ChildComponent';

const ParentComponent = () => {

const sharedState = {

message: 'Hello from Context!',

};

return (

<MyContext.Provider value={sharedState}>

<ChildComponent />

</MyContext.Provider>

); };

export default ParentComponent;



// ChildComponent.js

import React, { useContext } from 'react';

import MyContext from './MyContext';

const ChildComponent = () => {

const sharedState = useContext(MyContext);

return <p>{sharedState.message}</p>;

};

export default ChildComponent;

Considérations relatives aux performances

Redux

• Redux peut être excessif pour les applications de petite et moyenne taille.
• La configuration de Redux implique un code passe-partout, qui peut s’avérer inutile pour des projets plus simples.

API de contexte

• L’API Context fournit une solution légère pour des besoins de gestion d’état plus simples.
• Il n’a pas la même surcharge que Redux, ce qui le rend plus simple pour les petites applications.

Conclusion

Le choix entre Redux et l’API Context dépend de la complexité et de la taille de votre application. Pour les applications à grande échelle avec une logique d’état complexe, Redux fournit une solution robuste. En revanche, si votre application est plus petite et ne nécessite pas les fonctionnalités offertes par Redux, l’API Context est une alternative plus simple.