Distribuer des actions à partir de composants de présentation en ce qui concerne le modèle de composant de conteneur?

Question

Je viens de commencer à explorer le modèle Conteneur. Ce que je ne comprends pas encore, c'est le concept de composante de présentation qui ne concerne que les visuels. Est-ce que cela signifie que ces composants ne peuvent pas distribuer l'action qui changerait l'état de redux?

par exemple

<MainContainer> 
    <ListComponent /> 
    <GraphComponent /> 
</MainContainer> 

Say <GraphComponent> montre des graphiques sur la base d'une liste dans l'état Redux. Les <ListComponent> modifient alors cette liste dans l'état redux avec les boutons. Est-ce correct dans le modèle de conteneur?

Answer 1

Je pense que vous n'êtes pas censé distribuer des actions dans les composants. Dans le modèle Container-Component, vous êtes censé passer une fonction de rappel du conteneur (MainContainer dans votre cas) en tant que props à ListComponent, qui se déclenche lorsque vous cliquez sur le bouton et répartissez l'action (dans le conteneur) comme résultat.

Answer 2

Presentation (Dumb) components sont comme des étudiants de première année, ils ont leur apparence unique mais leur comportement et le contenu qu'ils émettent sont décidés ou enseignés par leurs parents. Exemple: <Button />

export const Button = props => { 
    <button type="button" onClick={props.onClick} />{props.text}</button> 
} 

apparence unique: il est un bouton
Comportement: onClick
Contenu: texte
Les deux onClick et les textes sont fournis par les parents.

---

Quand ils grandissent au 5ème ou 7ème année, ils peuvent commencer à avoir leur propre state et décider quelques-unes des choses eux-mêmes. Exemple: <Input />

class Input extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
    value: '' 
    } 
} 

handleChange = (e) => { 
    this.setState({value: e.target.value}); 
} 

render() { 
    return (
    <input 
    type="text" 
    value={this.state.value} 
    onChange={this.handleChange} 
    onFocus={this.props.onFocus} 
    /> 
); 
} 
} 

apparence unique: il est une entrée
Etat: décide propre valeur.
Comportement: onFocus
onFocus fourni par le parent.

---

Et quand ils deviennent adultes, ils peuvent commencer à se comporter eux-mêmes et ne peuvent pas besoin leurs conseils aux parents. Ils commencent à parler au monde extérieur (magasin de redux) par eux-mêmes (maintenant ils sont de nouveaux composants de conteneur). Exemple

const mapStateToProps = (state, [ownProps]) => { 
... 
} 

const mapDispatchToProps = (state, [ownProps]) => { 
... 
} 

const MyComponent = (props) => { 
return (
    <ChildComponent {...props} /> 
); 
} 

connect(mapStateToProps, mapDispatchToProps)(MyComponent); 

décide de son propre comportement et le contenu, ou non besoin de parents (lire ownProps)

---

composants présentationnelle peuvent ou peuvent ne pas avoir besoin de tout comportement de leur propre, dont ils dépendent leurs parents pour ça. Mais pour parler (expédier) au monde extérieur (magasin) ils doivent être assez grands (composants de conteneur).Donc, la principale chose à retenir ici est petit commencer et décider que votre composant se développe s'il doit être un composant de présentation ou de conteneur.