Одно из возможных применений bindActionCreators()
- «сопоставить» несколько действий вместе как одну опору.
Обычная отправка выглядит так:
Сопоставьте пару общих действий пользователя с реквизитами.
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);
В более крупных проектах отображение каждой отправки по отдельности может показаться громоздким. Если у нас есть набор действий, связанных друг с другом, мы можем объединить эти действия. Например, файл действий пользователя, который выполнял всевозможные действия, связанные с пользователем. Вместо того, чтобы вызывать каждое действие как отдельную отправку, мы можем использовать bindActionCreators()
вместо dispatch
.
Множественные отправки с использованием bindActionCreators ()
Импортируйте все связанные с вами действия. Скорее всего, все они находятся в одном файле в магазине redux
import * as allUserActions from "./store/actions/user";
И теперь вместо использования отправки используйте bindActionCreators ()
const mapDispatchToProps = (dispatch: Dispatch) => {
return {
...bindActionCreators(allUserActions, dispatch);
},
};
};
export default connect(mapStateToProps, mapDispatchToProps,
(stateProps, dispatchProps, ownProps) => {
return {
...stateProps,
userAction: dispatchProps
ownProps,
}
})(MyComponent);
Теперь я могу использовать опору userAction
для вызова всех действий в вашем компоненте.
IE:
userAction.login()
userAction.editEmail()
or
this.props.userAction.login()
this.props.userAction.editEmail()
.
ПРИМЕЧАНИЕ. Вам не нужно сопоставлять bindActionCreators () с одной опорой. (Дополнительный => {return {}}
, который соответствует userAction
). Вы также можете использовать bindActionCreators()
, чтобы отобразить все действия одного файла как отдельные свойства. Но я считаю, что это может сбивать с толку. Я предпочитаю давать каждому действию или «группе действий» явное имя. Мне также нравится называть ownProps
, чтобы лучше описать, что это за «дочерние объекты» и откуда они берутся. При использовании Redux + React может немного запутаться, где предоставляются все реквизиты, поэтому чем более наглядно, тем лучше.
person
matthew
schedule
12.06.2019