web-dev-qa-db-fra.com

Comment accéder au magasin dans le deuxième composant de React-Redux

J'ai un seul composant App.js où j'essaye d'enregistrer l'état en utilisant redux. Dans index.js où j'ai défini le magasin pour seulement <App /> composant.

index.js

let store = createStore(scoreReducer);

ReactDOM.render(
  <Provider store={store}><App /></Provider>,
  document.getElementById("root")
);
registerServiceWorker();

J'ai cette méthode dans App.js pour mapper l'état des accessoires qui est disponible dans App.js.

App.js

function mapStateToProps(state) {
  return { score: state.score, status: state.status };
}

Tout va bien jusqu'à présent, maintenant je ne sais pas comment accéder à { this.props.score} dans un autre composant?

Quels changements dois-je faire dans index.js et deuxième composant si je veux accéder à {this.props.score} dans un autre composant?

reactjsreduxreact-redux
12
N Sharma

Lorsque vous utilisez le fournisseur, tout composant qui est enfant du composant d'ordre supérieur du fournisseur peut accéder aux propriétés du magasin via l'utilisation de la fonction connect.

Vous pouvez donc ajouter ce qui suit dans n'importe quel composant qui est un enfant du fournisseur et accéder à l'accessoire de score

function mapStateToProps(state) {
  return { score: state.score, status: state.status };
}

export default connect(mapStateToProps)(MyComponent)

Cependant, si cet autre composant est un enfant direct du composant App, vous pouvez également passer le score prop en tant que prop à ce composant de l'application comme

<MyComponent score={this.props.score}/>
16
Shubham Khatri

Le composant Provider définit le contexte de tous ses enfants, en y fournissant le magasin. lorsque vous utilisez le High Order Component (HOC) connect, vous pouvez envelopper n'importe quel composant et accéder au magasin via les mapStateToProps et mapStateToProps fournis, quelle que soit leur imbrication. Vous pouvez également accéder au magasin à l'aide du contexte context.store mais ce n'est pas recommandé. Utiliser les fonctions de carte et connect, similaire à ce que vous avez avec votre composant App, est la meilleure approche.

4
Dayan Moreno Leon