Redux, Dois-je importer un magasin dans tous mes conteneurs si je veux avoir access aux données?

Peut-être ne suis-je pas en train de me concentrer sur redux, mais tous les exemples que j’ai vus n’accèdent pas vraiment à l’état entre les conteneurs et je n’ai donc pas vu beaucoup d’utilisation de store.getState (), mais même si vous voulez Envoi, vous devez avoir access au magasin, non?

Donc, à part l’importation du magasin d’importation depuis ‘path / to / store / store’

dans chaque fichier que je veux getState () ou “dispatch”, comment puis-je accéder à cet état parce que si je ne l’inclus pas, store n’est pas défini.

En général, vous souhaitez uniquement créer des composants de conteneur de niveau supérieur ayant access au magasin. Ils transmettent les données ou les envois d’action nécessaires aux composants de leurs enfants. C’est la différence entre un composant “intelligent” et un composant “stupide” – les composants “intelligents” connaissent le magasin / état Redux, tandis que les composants “idiots” ne font que transmettre les accessoires et n’ont aucune idée de l’état de l’application.

Cependant, même le simple fait de passer le magasin aux composants du conteneur peut devenir fastidieux. C’est pourquoi React-Redux fournit un composant unique qui englobe toute votre application. Vérifiez-le dans les documents. Il s’agit du composant Provider et lorsque vous l’emballez dans son intégralité, vous ne transmettez le magasin qu’à un composant une seule fois :

 import createStore from '../store'; const store = createStore() class App extends Component { render() { return (    ) } } 

Comme vous pouvez le voir ici, j’ai un fichier de configuration séparé pour mon magasin, car vous pouvez le modifier et pour toute application complexe à distance, vous allez faire la même chose avec l’utilisation de compos pour appliquer un middleware.

Ensuite, tous vos composants “intelligents” restants (généralement les wrappers) doivent écouter le magasin. Ceci est accompli en utilisant la méthode connect . Cela vous permet de mapper des éléments de l’état à vos propriétés de composant ainsi que des actions de répartition en tant que propriétés.

 import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import * as actionCreators from './actionCreators'; const mapStateToProps = function(state){ return { something: state.something, } } const mapDispatchToProps = function (dispatch) { return bindActionCreators({ getSomething: actionCreators.getSomething, }, dispatch) } class MainAppContainer extends Component { componentDidMount() { //now has access to data like this.props.something, which is from store //now has access to dispatch actions like this.props.getSomething } render() { //will pass down store data and dispatch actions to child components return ( 
) } } export default connect(mapStateToProps, mapDispatchToProps)(MainAppContainer)

Étant donné que vous transmettez toujours des actions et des données d’expédition à votre composant enfants en tant que propriétés, il vous suffit de référencer celles de ce composant avec this.props .

En vous basant sur l’exemple ci-dessus, vous verrez que parce que j’ai transmis this.props.something à ChildComponent1 , il a access aux données something du magasin mais il n’a pas access à l’action de dissortingbution getSomething . De même, ChildComponent2 uniquement access à l’action de dissortingbution getSomething mais pas aux données something . Cela signifie que vous n’exposez les composants qu’à ce dont ils ont besoin.

Par exemple, car l’action ChildComponent2 été transmise sous la forme getSomething , dans mon onClick je peux appeler this.props.getSomething , qui appellera l’action de dispatching sans avoir besoin d’accéder au magasin . De la même manière, il peut continuer à transmettre getSomething à un autre composant enfant et ce composant pourrait l’appeler et / ou le transmettre et le cycle pourrait continuer indéfiniment.

 class ChildComponent2 extends Component { render() { return ( 
Click me
) } }

Modifier à partir des commentaires

Bien que cela ne concerne pas directement la question, dans les commentaires, vous sembliez un peu confus au sujet des actions. Je n’ai pas vraiment défini l’action getSomething ici. Au lieu de cela, il est habituel dans les applications Redux de placer toutes vos définitions d’action dans un fichier distinct appelé actionCreators.js . Cela contient des fonctions nommées de la même manière que vos actions et renvoie un object avec une propriété de type et toute autre méthode / donnée requirejse par cette action. Par exemple, voici un exemple très simple du fichier actionCreators.js :

 export function getSomething() { return { type: 'GET_SOMETHING', payload: { something: 'Here is some data' } } } 

Ce type d’action correspond à ce que votre réducteur entendait pour savoir quelle action était déclenchée.

Si vous utilisez le package react-redux , vous finirez par envelopper vos composants dans un Provider avec un accessoire de store . Cela configure votre magasin unique dans un contexte React, auquel on accède ensuite à partir de la méthode connect dans les composants enfants. La méthode connect prend deux fonctions (mapStateToProps et mapDispatchToProps), qui sont vos points d’ancrage pour obtenir l’état du magasin et l’envoi des messages.

Jetez un oeil ici pour plus d’informations