Réaction-redux Tutoriel

React Redux est une bibliothèque qui fournit des liaisons React pour Redux.

Les composants React conscients du magasin Redux sont appelés “Containers”, “Smart Components” ou “Higher Order Component” (HOC). De tels composants, pour utiliser Redux, doivent :

  • Abonnez-vous au magasin pour obtenir les mises à jour du magasin Redux
  • Répartir les actions

Faire cela à la main impliquerait d’utiliser store.subscribe et store.dispatch(action) dans les conteneurs React.

React Redux simplifie la liaison entre le magasin Redux et un composant de conteneur React au moyen de la fonction “connect”, qui mappe les propriétés d’état Redux et les créateurs d’action aux accessoires du composant.

connect est une fonction qui crée un composant d’ordre supérieur. Connect accepte 3 fonctions (mapStateToProps, mapDispatchToProps, mergeProps) et renvoie un composant conteneur, qui enveloppe le composant d’origine pour en faire un composant “connecté”:

import { connect } from 'react-redux';

const Customers = { ... };
const mapStateToProps = (state) => { ... }
const mapDispatchToProps = (dispatch) => { ... }

export default connect(mapStateToProps, mapDispatchToProps)(Customers);

Voir la section exemples pour un exemple complet.

Étant donné que tous les composants du conteneur doivent accéder au magasin Redux, la méthode recommandée consiste à utiliser un composant spécial <Provider> de React Redux, qui transmet le magasin à tous les composants enfants (en interne en utilisant le contexte React).

Documents officiels : http://redux.js.org/docs/basics/UsageWithReact.html

Dépôt GitHub : https://github.com/reactjs/react-redux