Comment accéder à stocker dans le deuxième volet de réagir-redux

J'ai un seul composant App.js où je en essayant de sauver de l'état à l'aide de redux. Dans index.js où j'ai mis store 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 de carte de l'état pour les accessoires qui sont disponibles à l'intérieur App.js.

App.js

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

Tout est bien, maintenant, je ne suis pas sûr de savoir comment accéder à { this.props.score} dans un autre composant ?

Quels sont les changements que je dois faire dans index.js et le second composant si je veux accéder à {this.props.score} dans un autre composant ?

OriginalL'auteur N Sharma | 2017-06-18

  1. 12

    Lorsque vous utilisez le Fournisseur de tout composant qui est des enfants du Fournisseur d'Ordre Supérieur Composant peut accéder à la fenêtre propriétés de la banque, bien que l'utilisation de connect fonction.

    De sorte que vous pouvez ajouter ce qui suit dans tout composant qui est un enfant du Fournisseur d'accès et le score prop 

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

export default connect(mapStateToProps)(MyComponent)

    Toutefois, si cette autre composante est un enfant direct de App composant, puis vous pouvez également passer le score prop comme un prop de ce composant à partir de l'App comme

    <MyComponent score={this.props.score}/>
    Pouvez-vous suggérer comment ajouter plusieurs enfants de la Provider ?
    simplement rendre le composant à l'intérieur du composant fournisseur de <Fournisseur de store={magasin}>< /App / ><MyComponent/></Fournisseur>,
    Peut on accéder à la boutique en ligne comme context.store ? Je suis Line 94: 'context' is not defined no-undef let store = context.store;
    Pas sûr, à la façon dont vous l'utiliser. Mais certainement la méthode ci-dessus est le chemin à parcourir
    Félicitations, cette réponse est meilleure que tous les tuto et les documents officiels que j'ai lu sur réagir-redux. Y compris le démarrage rapide, ce qui est tout à fait inutile.

    OriginalL'auteur Shubham Khatri

  2. 4

    Provider composant définit le cadre pour tous ses enfants, en leur donnant le magasin. lorsque vous utilisez le Haut-Composante de l'Ordre(HOC) connect vous pouvez envelopper un composant et accéder à la boutique à travers des mapStateToProps et mapStateToProps peu importe comment ils sont imbriqués. Vous pouvez également accéder à la boutique en utilisant le contexte context.store mais ce n'est pas recommandé. En utilisant les fonctions de mappage et connect, similaire à ce que vous avez avec votre App composant, est la meilleure approche.

    J'ai essayé comme render() { let store = context.store; mais j'obtiens une erreur Line 94: 'context' is not defined no-undef
    dans votre compoent vous devez déclarer contextTypes et si vous utilisez la classe des composants de base ne serait-ce.contexte
    let store = this.context.store; console.log(store); Je suis pas défini sur console
    avez-vous déclarer le contextTypes? regardez ce fil github.com/reactjs/react-redux/issues/...

    OriginalL'auteur Dayan Moreno Leon