対ReduxのmapDispatchToPropsに反応しますはthis.props.dispatch
<Header btnMnuAction={() => this.props.dispatch(toggleSidebar())} logout={() => this.props.dispatch(logout())} >
、誰かがこれらのオプションの違いだものを私に説明することができますしてください？
ありがとう:)
実際には、大きな違いはありません。私が考えることができる違いは、レンダリングメソッドが呼び出されるたびに新しいインライン関数が作成されるということです。それ以外は、同じことをするのはちょうど異なる方法です。
mapDispatchToPropsための別の少ないコーディングとクリーナーアプローチがあります。あなたが唯一のちょうどmapDispatchToPropsにおけるディスパッチ呼内の関数を呼び出す場合は、それをすべて一緒に避け、直接connect方法の2番目の引数としてオブジェクトにあなたの方法を渡すことができます。
connect(mapStateToProps, {toggleSidebar, logout})(Component)
あなたはreduxからconnectを使用してmapDispatchToPropsを利用する場合は、mapDispatchToPropsによって返された機能は、あなたがアクセスする必要があります小道具からの最初のケース
const mapDispatchToProps = (dispatch) => {
return {
toggleSidebar:() => {
dispatch(toggleSidebar());
},
logout:() => {
dispatch(logout());
}
}
};
、例えば、小道具として使用可能です内部的に定義されているの発送を持ってtoggleSidebarとlogout、へ。あなたはconnectに2つ目の引数を渡さない場合は第2のケースで
は、それはデフォルトであなたにdispatchを使用できるようになり、その後、あなたは、したがって、これらは、ちょうど2つの異なる方法がありdispatch
を使用してアクションを呼び出すことができます同じ結果を達成し、同じことを内部的に行うこと。
mapDispatchToPropsという基本的な役割は、あなたの例ではインラインで行いますが、ディスパッチャーだけでなくターゲットコンポーネントの状態や所有する小道具も受け入れることができるため、柔軟性があります。
コンポーネントの状態に基づいて動作を変更する場合（たとえば、disabledの場合はバインドされていないアクションを返すことができます）、または小道具を使用することができます（たとえば、コンポーネントの独自の小道具にcleanStorageがある場合、それはlogoutアクションに沿って）。 mapDispatchToPropsを使用して
はあなたのコードがクリーンで、より良い分離します。 10+アクションを渡すと、手動でそれらを結合想像... Consumerコンポーネントのみが定義されたアクションを受け入れるべきではなく、一般的なdispatch、そのことにより、Reduxのへの結合を低減し、より容易なメンテナンスとテストが可能になります。
const bind => actions => dispatch =>
Object.entries(actions)
.map(([key, action]) => [key, (...args) => dispatch(action(...args)])
.reduce((acc, ([key, boundAction]) => ({...acc, [key]: boundAction}), {})
connect(mapStateToProps, bind({ toggleSidebar, logout }), ...)(Component)
それとも、定型を減らすためにbindActionCreators(actionCreators, dispatch)を使用します：
あなたはこのような例のために、あなただけのアクションクリエイターにディスパッチ関数をバインドするシンプルな機能bindを定義することができ、いくつかの高度な機能を使用することにより
import { bindActionCreators } from 'redux';
connect(
mapStateToProps,
dispatch => bindActionCreators({ toggleSidebar, logout }, dispatch),
...
)(Component)