A quoi sert React-Redux ?

Les fonctions de "react-redux" : 1. Divisez les composants en composants de conteneur et composants d'interface utilisateur ; 2. Remplacez "store.subscribe" dans redux pour surveiller les changements d'état des composants et utilisez-le pour restituer les composants ; redux, permet aux composants d'obtenir facilement le statut global et facilite la communication entre les composants.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

A quoi sert réagir-redux ?

react-redux est utilisé en conjonction avec redux L'injection des données du magasin définies par redux dans le composant permet au composant d'obtenir facilement l'état global et de faciliter la communication entre les composants. Connectez le package React au centre de données Redux (magasin). Après avoir appelé la fonction de répartition pour modifier l'état des données, la logique de traitement de mise à jour de la vue via l'enregistrement d'abonnement est déclenchée, y compris les données qui doivent être restituées et la fonction qui met à jour. les données.

Il est principalement utilisé pour envelopper les composants qui nécessitent Redux à l'entrée. Essentiellement, le magasin est placé dans son contexte.

Le couplage entre redux et composants étant trop élevé, afin de le découpler, redux a été conçu. Une fois que nous avons introduit React-Redux, nous n'avons plus besoin d'utiliser l'abonnement du magasin pour nous abonner nous-mêmes à l'état. Les composants de l'interface utilisateur sont comme des composants ordinaires sans redux à l'intérieur. Plus lisible.

Fonction 1

divise les composants en composants de conteneur et les composants d'interface utilisateur utilisent des accessoires pour obtenir l'état et l'état de fonctionnement.

Fonction 2

Utilisez le composant Provider pour remplacer store.subscribe dans Redux pour surveiller les changements d'état du composant et utilisez-le pour restituer le composant.

Fonction 3

Connectez les composants de l'interface utilisateur et le redux via l'API principale connect dans le composant conteneur connect est une fonction d'ordre élevé. Le premier paramètre reçoit deux fonctions de rappel 1 : recevra un état, puis. renvoie un objet objet contenant l'état souhaité du composant d'interface utilisateur. Fonction de rappel 2 : recevez une répartition et renvoyez un objet contenant les méthodes sur lesquelles le composant de l'interface utilisateur souhaite opérer. Il existe également une méthode abrégée, qui consiste à transmettre le deuxième paramètre directement dans un objet, qui contient des méthodes pour l'état de fonctionnement. (Core : mappage de l'état et envoi aux accessoires des composants de l'interface utilisateur)

Code principal

export default connect(
    state => ({count: state}),
    dispatch => {
        return {
            increment: number => dispatch(increment(number)),
            decrement: number => dispatch(decrement(number)),
        }
    }
)(Counter)

Ce qui suit est l'abréviation

export default connect(
    state => ({count: state}),
    {increment,decrement}
)(Counter)

Apprentissage recommandé : "Tutoriel vidéo React"

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!