Une comparaison rapide / Blogs / Perficient

Imaginez que vous êtes dans une bibliothèque. Redux est comme une immense bibliothèque bien organisée où chaque livre est parfaitement classé, étiqueté et placé à son endroit spécifique. C’est idéal pour une collection massive, mais tout mettre en ordre peut prendre beaucoup de temps. Zustand, en revanche, est comme un coin de lecture confortable avec seulement quelques livres triés sur le volet. Tout est à portée de main et vous n’avez pas besoin de passer du temps à l’organiser ; prenez ce dont vous avez besoin et profitez-en.

Dans ce blog, nous explorerons Redux et Zustand pour vous aider à décider lequel convient parfaitement à votre projet, que vous gériez une énorme quantité d’état ou que vous ayez juste besoin de quelques éléments clés.

Dans un blog précédentj’ai exploré les facteurs essentiels à garder à l’esprit lors du choix d’une bibliothèque de gestion d’État. Examinons maintenant de plus près ce qui distingue Redux et Zustand dans ce processus décisionnel.

Chaque bibliothèque, qu’il s’agisse de Redux ou de Zustand, a ses propres défis. Discutons de inconvénients!

Redux :

• Difficile pour les débutants: Maîtriser Redux peut être difficile pour les nouveaux arrivants en raison de ses concepts complexes tels que les réducteurs et les middlewares.
• Gonflement du code: Attendez-vous à beaucoup de code passe-partout, en particulier pour les tâches les plus simples, ce qui peut ralentir le processus de développement.
• Trop complexe pour les petites applications: Redux peut être sur-conçu pour des projets plus petits, ajoutant une complexité inutile et du code supplémentaire.

Condition:

• Middleware limité : Aucun outil intégré pour les effets secondaires comme Redux, vous devez donc le configurer vous-même.
• Petite communauté : Moins de ressources et de tutoriels par rapport à Redux.
• Pas pour les états complexes : Ce n’est pas le meilleur choix pour une gestion d’État très vaste ou complexe.

Implémentation avec du code

Examinons quelques exemples de code pour montrer comment Redux et Zustand fonctionnent en action.

Redux :

Installez les packages de Redux en exécutant la commande ci-dessous :

npm install @reduxjs/toolkit react-redux

Exemple –

Créons une application de compteur simple utilisant Redux pour la gestion de l’état au sein d’une application React. Voici comment nous pouvons le mettre en œuvre étape par étape :

Action.js :

export const increment = () => ({ type: 'INCREMENT' });
export const decrement = () => ({ type: 'DECREMENT' });

réducteur.js

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

Store.js

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './reducer';

// Create Redux store using configureStore
const store = configureStore({
  reducer: counterReducer
});

export default store;

App.js

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from './actions';

function App() {
  const count = useSelector((state) => state); // Access state from Redux store
  const dispatch = useDispatch();

  return (
    <div style={{ textAlign: 'center' }}>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store'; // Import the store

// Wrap your app with Provider and pass the Redux store
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Concepts clés de Redux :

• État centralisé: Redux stocke l’intégralité de l’état de l’application dans un magasin unique et immuable, fournissant un état cohérent dans toute l’application.
• Actions et réducteurs: Des actions sont envoyées pour signaler les changements d’état. Les réducteurs répondent en mettant à jour l’état en fonction de ces actions de manière pure et prévisible.
• Code passe-partout: Redux implique souvent une quantité importante de passe-partout, nécessitant des définitions explicites pour les actions, les réducteurs et la configuration du magasin.
• Intégration de réaction: La bibliothèque React-redux est utilisée pour connecter les composants React au magasin Redux, permettant l’accès à l’état et les mises à jour via les hooks useSelector et useDispatch ou la fonction de connexion.

Condition:

Pour installer l’état –

npm install Zustand

Exemple –

Store.js

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 }))
}));

export default useStore;

App.js

// App.js (React Component)
import React from 'react';
import useStore from './store';  // Import the Zustand store

function App() {
  // Accessing the state and actions from Zustand store
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default App;

index.js

// index.js (React entry point)
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';  // Import the App component

// Rendering the App component into the DOM
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Concepts de conditions clés :

• Configuration minimale: Créez une boutique avec une seule fonction create().
• Manipulation directe de l’état: L’état est muté directement dans le magasin, sans actions ni réducteurs.
• Pas de passe-partout: API simple et intuitive avec une configuration minimale.
• Intégration de réaction: utilisez le hook useStore pour accéder à l’état et aux actions des composants.

Choisir entre Redux et Zustand –

Choisir entre Redux et Zustand, c’est comme choisir entre un moteur puissant et une conduite douce. Redux offre une tonne de fonctionnalités, ce qui le rend parfait pour les applications volumineuses et complexes, mais son apprentissage nécessite du temps et des efforts. Zustand, en revanche, est la solution idéale pour les projets simples et rapides, vous offrant une configuration rapide et une facilité d’utilisation avec un minimum de tracas. Besoin de puissance et de personnalisation ? Redux est votre choix. Envie de rapidité et de simplicité ? Allez avec Zustand. Que vous ayez besoin de créer quelque chose d’évolutif ou simplement de faire le travail rapidement.

À mon avis, la clé est de comprendre les besoins de votre projet. Une fois cela fait, vous pouvez choisir le bon outil pour un développement fluide et une gestion facile de l’état.

Choisissez judicieusement en fonction de ce qui correspond le mieux à votre flux de travail ! C’est tout pour aujourd’hui, mais ne vous inquiétez pas ; d’autres articles sur les bibliothèques de gestion d’État seront bientôt disponibles pour vous aider à améliorer vos projets. En attendant, continuez à expérimenter et bon codage !