web-dev-qa-db-fra.com

Comment utiliser le fournisseur de Redux avec React

J'ai suivi la documentation ReduxJS ici: tilisation avec React

À la fin du document, il mentionne l'utilisation de l'objet fournisseur. J'ai encapsulé mon composant d'application dans le fournisseur de la manière suivante:

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(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

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

javascriptreactjsredux
52
Jacob Mason

Le meilleur moyen d'accéder à votre magasin via un composant consiste à utiliser la fonction connect(), comme décrit dans la documentation . Cela vous permet de mapper les créateurs d’états et d’actions sur votre composant et de les transmettre automatiquement à mesure que votre magasin se met à jour. De plus, par défaut, il passera dispatch comme 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 enveloppe votre composant existant! Ce modèle s'appelle composants d'ordre supérieur , et constitue généralement le moyen privilégié d'étendre les fonctionnalités d'un composant dans React (sur des éléments tels que l'héritage ou les mixins).

En raison de ses nombreuses optimisations de performances et de ses risques de bogues, les développeurs Redux recommandent presque toujours d’utiliser connect pour accéder directement au magasin - cependant, si vous avez un très bonne raison d'avoir besoin d'un accès de niveau inférieur, le composant Provider permet à tous ses enfants d'accéder au magasin via this.context :

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

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, le contexte sera un objet vide.

J'ai donc dû ajouter ce qui suit pour que cela fonctionne pour moi:

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