Comment écouter les changements de propriétés spécifiques dans le magasin Redux après la distribution d'une action ?

Question

J'essaie actuellement de conceptualiser comment gérer l'envoi d'une action dans un composant en fonction d'un changement de données après un envoi dans un autre composant.

Prenez ce scénario :

dispatch(someAjax) -> propriété dans les mises à jour de l'état.

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

Plutôt que d'utiliser un type de value.on(change... quelle est la meilleure façon de gérer ce type d'action en "cascade" ?

Answer 1

Vous pouvez utiliser l'outil de Redux mapStateToProps y connect avec l'outil React componentDidUpdate(prevProps, prevState, snapshot) crochet.

Donc, en gros, 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);

Answer 2

Il existe deux approches de base : soit un intergiciel qui modifie l'état après l'exécution d'une action, soit l'utilisation de la fonction de bas niveau de Redux. store.subscribe API.

La FAQ de Redux a une réponse qui couvre ceci . Aussi, je garde une liste catégorisée d'addons et d'utilitaires liés à Redux, et cela inclut un groupe de bibliothèques d'abonnement de changement de magasin existant qui mettent en œuvre diverses approches pour écouter les changements de données.