の使用例の1つbindActionCreators()は、複数のアクションを1つの小道具として「マッピング」することです。
通常のディスパッチは次のようになります。
いくつかの一般的なユーザーアクションを小道具にマッピングします。
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()
または
this.props.userAction.login() this.props.userAction.editEmail()。
注：bindActionCreators（）を単一のプロップにマップする必要はありません。（に=> {return {}}マップされる 追加userAction）。を使用bindActionCreators()して、1つのファイルのすべてのアクションを個別の小道具としてマップすることもできます。しかし、それを行うと混乱を招く可能性があります。私は、各アクションまたは「アクショングループ」に明示的な名前を付けることを好みます。私はまたownProps、これらの「子の小道具」が何であるか、またはそれらがどこから来ているのかについてより説明的になるように名前を付けたいと思います。Redux + Reactを使用すると、すべての小道具が提供されている場所で少し混乱する可能性があるため、説明が多いほど良いでしょう。
#3の省略形#1ですか？