Qu'est-ce que Redux State Management

Redux est un outil utilisé pour gérer de manière centralisée l'état dans les applications JavaScript, adapté aux situations où la communication entre les composantes des grands projets est fréquente et l'état est difficile à maintenir. 1. Fournir une seule source de données et tous les états sont stockés dans le magasin unifié; 2. L'état est en lecture seule et l'intention de mise à jour est décrite par l'action; 3. Utilisez un réducteur de fonction pure pour effectuer des changements d'état. Dans le développement réel, Redux Toolkit et React-Redux sont souvent combinés pour simplifier les opérations, mais tous les projets ne doivent pas être utilisés. L'abus de l'État mondial et des effets secondaires dans le réducteur doit être évité.

Redux est un outil de gestion de l'État pour les applications JavaScript, qui aide les développeurs à gérer et à maintenir plus facilement l'état (état) dans les applications. Vous pouvez le comprendre comme un "référentiel" global qui est utilisé pour stocker de manière centralisée des données qui doivent être partagées dans l'ensemble de l'application.

Il a été à l'origine utilisé avec React, mais est maintenant largement utilisé dans d'autres cadres et même des projets JS natifs. Le concept de base est: la source de données unique, l'état en lecture seule et la mise à jour de l'état à travers des fonctions pures .

Pourquoi avez-vous besoin de redux?

Sans redux, les petits projets peuvent directement utiliser la gestion de l'État dans les composants (tels que UseState ou UserReducer de React), mais lorsque les projets deviennent plus grands et que les composants communiquent fréquemment, vous trouverez:

• L'état se propage sur plusieurs composants et est difficile à suivre
• La transmission de valeur entre les composants devient compliquée, et il est très difficile de passer la couche accessoire par couche.
• Les mêmes données peuvent être modifiées par différents composants et les erreurs sont sujettes à

Redux est utile pour le moment. Il fournit un endroit unifié pour stocker les états et spécifie comment ces états sont lus et mis à jour, rendant les changements de l'État plus prévisibles et faciles à déboguer.

Trois concepts de base de Redux

1. Store

Le magasin est le cœur de Redux, c'est un objet qui enregistre l'intégralité de l'état d'application. Il ne peut y avoir qu'un seul magasin dans l'ensemble de l'application, et tous les États existent ici. Vous pouvez le considérer comme un "cerveau" ou une "base de données centrale".

• La méthode de création est généralement createStore(reducer) (bien qu'il soit recommandé d'utiliser Redux Toolkit maintenant)
• Vous pouvez obtenir l'état actuel via store.getState()
• Le statut de mise à jour ne peut être utilisé que pour envoyer des actions via store.dispatch(action)

2. Actions

L'action est un objet normal qui décrit ce qui se passe. Il doit avoir un champ type qui indique le type d'opération à effectuer, et il peut également avoir une payload pour représenter des données spécifiques.

Par exemple:

 {Type: 'incrément', charge utile: 1}

Vous pouvez le comprendre comme une "commande" et dire à Redux ce que je veux faire.

3. Réducteurs

Reducer est une fonction pure qui reçoit l'état actuel et une action, puis renvoie le nouvel état. C'est le seul endroit qui peut vraiment changer l'état.

Sa structure est à peu près comme ceci:

 Fonction contre-inducteur (state = initialstate, action) {
  switch (action.type) {
    cas «incrément»:
      return {... state, count: state.Count action.payload};
    défaut:
      État de retour;
  }
}

Remarque: le réducteur doit être une fonction pure et ne doit pas avoir d'effets secondaires .

Comment l'utiliser dans le développement réel?

Dans les projets réels, vous n'utilisez généralement pas directement l'API Redux d'origine, mais combinez plutôt certains outils ou bibliothèques pour simplifier les opérations, telles que:

• Volie à outils Redux : La méthode officielle recommandée a des fonctions intégrées telles que CreateAction, CreateSlice, etc., ce qui réduit considérablement le code de la bail.
• React-Redux : Utilisé pour connecter les composants React et Redux Store. useSelector et useDispatch sont couramment utilisés pour obtenir des actions d'état et de répartition.

Pour donner un exemple simple:

 import {useSelector, usesispatch} depuis 'react-redux';
import {incrément} de './Counterslice';

fonction compteur () {
  const Count = useSelector ((état) => state.counter.value);
  const Dispatch = usedispatch ();

  Retour (
    <div>
      <p> {count} </p>
      <Button onClick = {() => Dispatch (incrément (1))}> 1 </futton>
    </div>
  ));
}

Malentendus et suggestions courantes

• Tous les projets ne nécessitent pas Redux : si votre application n'est pas grande ou si la logique de l'État n'est pas compliquée, vous pouvez d'abord utiliser la propre solution de gestion de l'État de React.
• N'abusez pas de l'état mondial : certaines données doivent être utilisées uniquement dans les composants, et il n'est pas nécessaire de les mettre dans Redux, sinon cela augmentera la complexité.
• Gardez le réducteur pur : n'effectuez pas d'opérations asynchrones, appelez des API ou modifiez les paramètres. Ceux-ci doivent être remis au middleware, tels que Redux-Thunk ou Redux-Saga.
• Réducteurs de fractionnement raisonnables : à mesure que l'état augmente, combineReducers peuvent être utilisées pour diviser différents réducteurs en modules pour une maintenance facile.

Fondamentalement, c'est tout. Bien que Redux soit un peu abstrait au début, une fois que vous comprenez ses idées de conception, vous constaterez qu'il est en fait assez intuitif. La clé consiste à maîtriser quand l'utiliser et à organiser la structure de l'état et à mettre à jour la logique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!