web-dev-qa-db-fra.com

Comment écouter les modifications de propriétés spécifiques dans le magasin Redux après qu'une action est expédiée

J'essaie actuellement de conceptualiser la gestion de la répartition d'une action dans un composant en fonction d'un changement de données après une répartition dans un autre composant.

Prenez ce scénario:

dispatch(someAjax) -> propriété en mises à jour d'état.

Après cela, j'ai besoin d'un autre composant dépendant de cette même propriété pour savoir qu'il a été mis à jour et envoyer une action en fonction de la nouvelle valeur.

Plutôt que d'utiliser un certain type de value.on(change... solution, quel est le moyen privilégié de gérer ce type d’action en cascade?

reactjsreduxredux-thunk
50
Jazzy

Il existe deux approches de base: soit un middleware qui diffère l’état après qu’une action est faite, soit en utilisant le bas niveau store.subscribe API.

Le Redux FAQ a ne réponse qui couvre cela . De plus, je garde une liste catégorisée des addons et des utilitaires liés à Redux, et qui comprend un groupe de bibliothèques de souscription de modification de magasin existantes qui implémentent différentes approches pour écouter les modifications de données.

41
markerikson

Vous pouvez utiliser mapStateToProps et connect de Redux avec le hook componentDidUpdate(prevProps, prevState, snapshot) de React.

Donc, fondamentalement, votre code pourrait ressembler à ceci:

const mapStateToProps = (state) => ({ 
   specificProperty: state.specificProperty,
   // any props you need else
});

class YourComponent extends React.Component {
    render() {
      // render your component  
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (prevProps.specificProperty !== this.props.specificProperty) {
            // Do whatever you want
        }
    }
}

YourComponent = connect(mapStateToProps)(YourComponent);
70
PinkiNice