J'essaie de séparer un composant de présentation d'un composant de conteneur. J'ai un SitesTable
et un SitesTableContainer
. Le conteneur est chargé de déclencher des actions de redux pour récupérer les sites appropriés en fonction de l'utilisateur actuel.
Le problème est que l'utilisateur actuel est extrait de manière asynchrone, une fois que le composant conteneur est rendu initialement. Cela signifie que le composant conteneur ne sait pas qu'il a besoin de réexécuter le code dans sa componentDidMount
fonction qui mettrait à jour les données à envoyer au SitesTable
. Je pense que j'ai besoin de rendre à nouveau le composant conteneur lorsque l'un de ses accessoires (utilisateur) change. Comment faire cela correctement?
class SitesTableContainer extends React.Component {
static get propTypes() {
return {
sites: React.PropTypes.object,
user: React.PropTypes.object,
isManager: React.PropTypes.boolean
}
}
componentDidMount() {
if (this.props.isManager) {
this.props.dispatch(actions.fetchAllSites())
} else {
const currentUserId = this.props.user.get('id')
this.props.dispatch(actions.fetchUsersSites(currentUserId))
}
}
render() {
return <SitesTable sites={this.props.sites}/>
}
}
function mapStateToProps(state) {
const user = userUtils.getCurrentUser(state)
return {
sites: state.get('sites'),
user,
isManager: userUtils.isManager(user)
}
}
export default connect(mapStateToProps)(SitesTableContainer);