react-reduxのconnect関数に渡す引数に、奇妙な構文が使われていて解読できません。

Question

###前提・実現したいこと
下記のURLのconnect関数の構文を理解したいです。
該当箇所

###発生している問題

reduxの公式tutorialなどに書いてある記法は、

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Root);

なのですが、
上記のURLのconnectの構文は少し違って見えます。

export default connect(() => ({}), {
  move
})(Notes);

これを上の記法と揃えて書くと、下記のようになりますよね。

export default connect(
() => ({}),
 {move}
)(Notes);

おそらく、分割代入のテクニックが使われているような気がするのですが、結局解読できませんでした。

これは一体どこでdispatchしているのでしょうか。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Answer 1

質問のコードは下記のように書かれているのと同じです。

const mapStateToProps = () => ({});
const mapDispatchToProps =  {
  move: move
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Notes);

※ moveは別ファイルからimportしているAction Creatorです。

mapStateToPropsやmapDispatchToPropsはそういう名前の関数やObjectがあるわけではなく、そういう機能に該当した関数やObjectを指定すると言うことです。直接書いても良いですし、変数に入れてから使用しても問題ありません。

mapStateToPropsで指定するのは関数です。これは、引数としてstateと(親コンポーネントから送られてきた)自身宛のprops(省略可)を受け取り、指定の子コンポーネント(質問のコードではNotesコンポーネント)へ渡すpropsを返す関数になります。() => ({})はどんなstateやpropsを受け取ったとしても、引数は無視して、常に{}という空のObjectを返します。つまり、この部分では子コンポーネントにはpropsは何も渡さないとなります。
※ 自身宛のpropsは省略する場合が多いです。
※ ここで関数を指定するとstoreが購読され、storeの変更の度に呼び出されます。購読させたくなければ、nullまたはundfeinedを使う必要があります。該当のコードがなぜnullまたはundefinedを使っていないのかはわかりません。

mapDispatchToPropsで指定するのは関数またはObjectです。関数の場合は、引数としてdispatch関数と(親コンポーネントから送られてきた)自身宛のprops(省略可)を受け取り、指定の子コンポーネント(質問のコードではNotesコンポーネント)へ渡すpropsを返す関数になります。dispatch関数が引数と渡されますので、dispatch関数を実行する関数が値となるpropsを作成できるのが特徴です。ここで作ったpropsを、子コンポーネントのイベントに結びつけると、イベント発生時にdispatchが実行され、Reduxの仕組みによりstoreの更新、購読しているコンポーネントの再レンダリングが行われます。また、Objectを指定することもできます。この場合は、同名のAction Creatorをdispatchする関数を値としたpropsを作成します。

Objectを渡す部分は少しわかりにくかったと思います。質問のコードの{move}部分は

(dispatch) => ({
  move: (...args) => {dispatch(move(...args))}
})

というような感じになっているということです。

そして最後に、connectは、自身宛のprops、mapStateToPropsで作成したprops、mapDispatchToPropsで作成したprops、この三つのpropsをマージして子コンポーネントに渡します。(マージの仕方は第三のオプションとして変更可能です)

その他、詳しいことは下記参考にあるAPIドキュメントを確認してみてください。

参考: connect() - react-redux API

Comments

[uuushiro]

回答ありがとうございます。
とてもわかりやすく詳しい説明ありがとうございます。
なるほど。mapDispatchToPropsは関数だけだと勘違いしておりました。ドキュメントを読まないから混乱してしまうのですね。反省します。
Objectを渡す部分をコードで説明してくださって、とても理解の助けになりました。ありがとうございました。