mapDispatchToPropsとmatchDispatchToPropsの違いは何ですか？

Question

タイトルは質問を説明しています。

私はreduxを使用して、ユーザーの状態をアクティブユーザーまたは非アクティブユーザーに変更しています。 matchDispatchToPropsで

：mapDispatchToPropsの場合

function matchDispatchToProps(dispatch){ 
    return bindActionCreators({selectUser: selectUser}, dispatch); 
} 

：

const mapDispatchToProps = (dispatch) => ({ 
    dispatch({selectUser: selectUser}) 
}) 

これらの違いを教えてください。

Answer 1

2つのものがここにあります。

まず、connect()の第2引数の固有名はmapDispatchToPropsとなります。頻繁にmapDispatchとも呼ばれます。しかし、JS内の任意の関数呼び出しのように、それは問題ではありません。何あなたコールあなた変数は - あなたがあなたの関数mapDispatchToProps、mapDispatch、fred、またはsomeFunctionName呼び出すことができます。 （つまり、それはなぜあなたがそれをmatchDispatchToPropsと呼んでいるのか、その名前を聞いたところではわかりません）。

第2に、あなたの2つの機能例は非常に異なっています。 mapDispatch関数の目的はオブジェクトを返すことであり、オブジェクトの各キー/値はコンポーネントの小道具になります。通常、そのオブジェクトの内部にバインドアップアクションクリエータ関数を返すので、コンポーネントはthis.props.doSomeWork()のような小道具を受け取ります。 return bindActionCreators({selectUser}, dispatch)を実行する最初の例は、これを正しく実行します。

あなたの第二の例では、有効なJSの構文ではありません。

const mapDispatchToProps = (dispatch) => ({ 
    dispatch({selectUser: selectUser}) 
}) 

我々はすぐにオブジェクトを返す矢印機能を持っているが、代わりにオブジェクトにキー/値のペアを宣言する、それが見えますすぐにdispatchに電話をかけようとしているようです。それはまったく有効ではありません。

Answer 2

matchDispatchToPropsは、react-reduxの標準参照語ではありません。 HoCがどのように機能するのかを概観します。

connect HoCには4つの引数があります。 mapStateToProps,mapDispatchToProps,mergePropsおよびoptions。あなたは次のようにお店のdispatch方法へのアクセス権を持っているあなたのコンポーネントに小道具としての機能を提供

mapStateToProps = (state) => ({ 
    user: state.user 
}); 

mapDispatchToPropsで：mapStateToPropsでは、次のようにコンポーネントの内部で使用できるようにしたいお店ではどのような情報割り当てます。

mapDispatchToProps = (dispatch) => ({ 
    updateUser: (user) => { 
     dispatch(updateUser(user)); 
    } 
}); 

注：updateUserはあなたがいただろうactionCreaterです。次のように

その後、connect HOCでそれらを使用します。

MyConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(MyComponent);

は今、あなたは<MyConnectedComponent />を使用することができますし、<MyComponent />コードの内側にあなたが({ user, updateUser })プロパティへのアクセス権を持っています。

：connectは、nullの引数も取ることができます。 connect()(Component)は、あなたのコンポーネントに小道具としてdispatchを提供します。これは引数なしのデフォルト設定です。 connect(null, mapDispatchToProps)(Component)を使用して、updateUserをコンポーネント内の支柱にして、コンポーネントをストアに接続しなくてもかまいません。ストアからuserへのアクセスを希望していても、コンポーネント内からディスパッチする必要がない場合はconnect(mapStateToProps)(Component)にすることもできます。

追加情報

[mergeProps（stateProps、dispatchProps、ownProps）：小道具]（ファンクション）：指定された

、それはmapStateToProps（の結果を渡された場合）、mapDispatchToProps （）、および親の小道具。それから返すプレーンオブジェクトは、ラップされたコンポーネントに小道具として渡されます。この関数を指定して、小道具に基づいて州の一部を選択したり、行動作成者を小道具の特定の変数に結びつけることができます。これを省略すると、Object.assign（{}、ownProps、stateProps、dispatchProps）がデフォルトで使用されます。

指定した場合、[オプション]（オブジェクト）

、さらにコネクタの挙動をカスタマイズ。 connectAdvanced()にまずまずのオプションに加えて（以下、これらを参照）、（接続）これらの追加のオプションを受け付けます（ブール）

• [純粋な]：trueの場合、（接続）が再描画しないようになり、関連する州/小道具オブジェクトがそれぞれの等価チェックに基づいて等しい場合、mapStateToProps、mapDispatchToProps、およびmergePropsを呼び出します。ラップされたコンポーネントが「純粋な」コンポーネントであり、そのプロップおよび選択されたReduxストアの状態以外の入力または状態に依存しないと仮定します。デフォルト値：true

• [areStatesEqual]（機能）：純粋な場合、着信ストアの状態を以前の値と比較します。デフォルト値：strictEqual（===）

• [機能]：純粋な場合、着信プロップを以前の値と比較します。デフォルト値：shallowEqual

• [areStatePropsEqual]（機能）：純粋な場合、mapStateToPropsの結果を以前の値と比較します。デフォルト値：shallowEqual

• [areMergedPropsEqual]（機能）：純粋な場合、mergePropsの結果を前の値と比較します。デフォルト値：shallowEqual

• [storeKey]（文字列）：店舗を読む場所のコンテキストのキー。おそらく、複数の店舗を持つことが賢明でない場合にのみ必要です。デフォルト値： 'store'

完全なドキュメントは、reactjs/react-reduxにあります。