Comment utiliser le fournisseur de Redux avec React

J’ai suivi la documentation ReduxJS ici: http://redux.js.org/docs/basics/UsageWithReact.html

À la fin du document, il mentionne l’utilisation de l’object fournisseur, j’ai donc enveloppé mon composant App dans le fournisseur comme suit:

import React from 'react' import ReactDOM from 'react-dom' import { createStore } from 'redux' import { Provider } from 'react-redux' import RootReducer from './app/reducers' import App from './app/app' const store = createStore(RootReducer) ReactDOM.render(   , document.getElementById('root') ) 

Cependant, c’est là que la documentation se termine. Comment récupérer le magasin fourni par le fournisseur dans les composants?

Le meilleur moyen d’accéder à votre magasin via un composant est d’utiliser la fonction connect() , comme décrit dans la documentation . Cela vous permet de mapper les créateurs d’état et d’action sur votre composant et de les transmettre automatiquement lors de la mise à jour de votre magasin. De plus, par défaut, il passera en dispatch sous le nom this.props.dispatch . Voici un exemple tiré de la documentation:

 import { connect } from 'react-redux' import { setVisibilityFilter } from '../actions' import Link from '../components/Link' const mapStateToProps = (state, ownProps) => { return { active: ownProps.filter === state.visibilityFilter } } const mapDispatchToProps = (dispatch, ownProps) => { return { onClick: () => { dispatch(setVisibilityFilter(ownProps.filter)) } } } const FilterLink = connect( mapStateToProps, mapDispatchToProps )(Link) export default FilterLink 

Notez que connect crée en fait un nouveau composant qui entoure votre existant! Ce modèle est appelé Composants d’ordre supérieur et constitue généralement la méthode préférée pour étendre les fonctionnalités d’un composant dans React (sur des éléments tels que l’inheritance ou les mixins).

Comme les optimisations de performances sont assez nombreuses et qu’elles sont généralement moins susceptibles de causer des bogues, les développeurs Redux recommandent presque toujours d’utiliser directement la connect pour accéder au magasin – cependant, si vous avez de très bonnes raisons fait en sorte que tous ses enfants puissent accéder au magasin via this.context :

 class MyComponent { someMethod() { doSomethingWith(this.context.store); } } 

Merci pour la réponse, mais il manque un élément crucial, qui est en fait dans la documentation.

Si contextTypes n’est pas défini, alors le contexte sera un object vide.

J’ai donc dû append ce qui suit pour que cela fonctionne pour moi:

  static contextTypes = { store: PropTypes.object.isRequired } 

Pour utiliser le fournisseur de Redux avec réaction, vous devez utiliser un module, c.-à-d.

 npm install --save react-redux 

React-redux fournit la méthode connect() qui permet de lier le magasin du fournisseur au composant React.

Utiliser une méthode comme mapDispatchToProps et mapStateToProps

nous pouvons créer une condition dans laquelle le composant est rendu.

Ex:

 class Header extends Component { sendAlert = () => render() { 

Today's Fancy Alert is {this.props.fancyInfo}

} } const mapDispatchToProps = (dispatch) => { return { dispatch: dispatch } }; export default connect(state => state, mapDispatchToProps)(Header);

Nous obtenons maintenant la méthode de répartition fournie par le fournisseur et pouvons utiliser dans notre composant pour déclencher une action

ex:

 this.props.dispatch( { //Any Object`enter code here` })