Une utilisation possible de bindActionCreators()
est de «mapper» plusieurs actions ensemble comme un seul accessoire.
Un envoi normal ressemble à ceci:
Mappez quelques actions utilisateur courantes sur des accessoires.
const mapStateToProps = (state: IAppState) => {
return {
// map state here
}
}
const mapDispatchToProps = (dispatch: Dispatch) => {
return {
userLogin: () => {
dispatch(login());
},
userEditEmail: () => {
dispatch(editEmail());
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
Dans les projets plus importants, la cartographie de chaque expédition séparément peut sembler lourde. Si nous avons un ensemble d'actions qui sont liées les unes aux autres, nous pouvons combiner ces actions . Par exemple, un fichier d'action utilisateur qui effectue toutes sortes d'actions différentes liées à l'utilisateur. Au lieu d'appeler chaque action comme une distribution distincte, nous pouvons utiliser à la bindActionCreators()
place de dispatch
.
Dépêches multiples utilisant bindActionCreators ()
Importez toutes vos actions associées. Ils sont probablement tous dans le même fichier dans le magasin redux
import * as allUserActions from "./store/actions/user";
Et maintenant, au lieu d'utiliser la répartition, utilisez bindActionCreators ()
const mapDispatchToProps = (dispatch: Dispatch) => {
return {
...bindActionCreators(allUserActions, dispatch);
},
};
};
export default connect(mapStateToProps, mapDispatchToProps,
(stateProps, dispatchProps, ownProps) => {
return {
...stateProps,
userAction: dispatchProps
ownProps,
}
})(MyComponent);
Maintenant, je peux utiliser l'accessoire userAction
pour appeler toutes les actions de votre composant.
IE:
userAction.login()
userAction.editEmail()
ou
this.props.userAction.login()
this.props.userAction.editEmail()
.
REMARQUE: vous ne devez pas mapper le bindActionCreators () à un seul accessoire. (Le supplémentaire => {return {}}
qui correspond à userAction
). Vous pouvez également utiliser bindActionCreators()
pour mapper toutes les actions d'un seul fichier en tant qu'accessoires séparés. Mais je trouve que faire cela peut être déroutant. Je préfère que chaque action ou "groupe d'action" reçoive un nom explicite. J'aime aussi nommer le ownProps
pour être plus descriptif sur ce que sont ces "accessoires pour enfants" ou d'où ils viennent. Lorsque vous utilisez Redux + React, il peut être un peu déroutant de savoir où tous les accessoires sont fournis, donc plus ils sont descriptifs, mieux c'est.
#3
un raccourci pour l'option#1
?