reduxのconnect関数の２つ目の丸括弧は文法的にどういう意味？

Question

前提・実現したいこと

現在Reactの勉強をしています。
Reduxを学んでいるのですが、connect関数の構造が理解できていません。
以下のように丸括弧が２つあります。
これは文法的にどういう意味・構造なのでしょうか？

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

なんとなくコンテキスト的には、
引数にmapStateToProps, mapDispatchToPropsを渡して、propsを通してStateを受けたり、ActionをreducerにDispatchしたりしており、
TodoListに関してはComponetを指定してContainerとつないでいるイメージです。

しかし、この丸括弧が２つある構造を文法的に理解できていないので理解したいです
１つ目は引数の認識ですが、２つ目の丸括弧は何なのでしょうか？

試したこと

connectでググったりしてみた

Comments

[hoshi-takanori]

すでに回答がついてる通り、connect 関数の戻り値は関数なので、それを呼び出してるってことです。
で、connect 関数を使う方法はすでに古い　（もちろんまだまだ使われてはいますが) ので、今から新しく書くなら hooks を使う方法に切り替えることをお勧めします。(あわせて TypeScript と redux toolkit を使うといいかも。)
https://qiita.com/suketa/items/ae24a951527d709eaa15
https://future-architect.github.io/articles/20200501/

[k49977]

ありがとうございます

Answer 1

なるほどの〜

丸括弧が２つある構造を文法的に理解できていない

ゆうことやと、まず以下のコードで話しよか〜。下のコードでconst plusFunction に入れてるもんは、どないなことになっとるか、説明できるかのう？

const plusFunction = (a) => {
  const func = (x) => x + a;
  return func;
}

plusFunction は引数a を受け取る関数やねんな。で、何を返す関数かゆうと、関数を返してるんやな。どういう関数かゆうたら、(x) => x + a ゆう関数やね。つまりx を受け取って、そのx に a を足して返しとるわけやんか。そやから、

const addTen = plusFunction(10);

とすると、与えられた引数に10を足した結果を返す関数をplusFunction(10)が返してきて、それを変数 addTenに入れたわけや。そやから

const y = addTen(5);

とすると y には 15 が入ってくるわけやな。

console.log(y); // => 15

ほなら、plusFunction に別の数を与えてみよか〜

const addThousand = plusFunction(1000);

こうすると、addThousand には、与えられた引数に1000を加えた結果を返す関数が入ってくるねんな。そやから addThousand に 111 を渡せば、1111 が返されるねんな。

const z = addThousand(111);

console.log(z); // => 1111

➡ サンプル

ほんで、ここまでの話が、k49977はんにとって、「そんなんJavaScriptの基本のキや。知っとるがな！」ゆう話なのか、「なんやソレ。そないなplusFunctionみたいなもん、書けるん知らんかったわ〜」ゆう話なのか、そこがひとつポイントですわ。

知らんかったなら、

connectでググったりしてみた

そうやけど、ググるべき用語は、まずは「第一級関数」やもしれへんね。要は、関数もオブジェクトなので、関数を返す関数だったり、関数を引数に取る関数とかを、フツーにシレっと書けるゆうことやねん。ほんで話もどすと、上の例のplusFunction は、関数を返す関数になっとるわけや。こういうの**高階関数(higher-order function）**いいますう。

で、こういうplusFunction 作ると、10を加える関数作ってaddTen だったり、1000を加える関数作ってaddThousandだったりの変数に入れることができるのやけど、addTen を何回も使うわけではないのなら、わざわざaddTenゆう中間の変数に入れへんでも

const addTen = plusFunction(10);

const y = addTen(5);

となっているのを、addTenを無くして詰めて、

const y = plusFunction(10)(5);

と書いてもええねんな。これエラーにならずちゃんと動くで。➡サンプル

ほんで、上のコードのplusFunction(10)(5) やけど、(10)(5)ゆうことで丸カッコ連続しとるわな。で、ここで質問の本題につながるんやけど、react-reduxのconnect 使うとき丸カッコが２つ連続するのも、上のplusFunctionの後ろに丸カッコ２回連続で書けるのと同じ理屈や。connectも、１個目の丸カッコまでんとこ

connect(
    mapStateToProps,
    mapDispatchToProps
)

で関数が返ってくるねん。どういう関数かゆうたら、Reactコンポーネントを引数として受け取って、そのコンポーネントとRedux storeとをコネクトつまり接続する的な処理をしたReactコンポーネントを返してくれるねん。コンポーネントを引数として受け取り、何がしかのことをやって元のコンポーネントに機能を付加したコンポーネントを返す関数を 高階 (Higher-Order) コンポーネント略してHOC いいますう。そやから、connectは、mapStateToPropsやmapDispatchToPropsだったりを受け取って、HOCを返してくれる関数ですねん。react-redux のドキュメントでconnectが何を返すかの説明んとこ のサンプルコードの中にも

// first call: returns a hoc that you can use to wrap any component
const connectUser = connect(mapState, mapDispatch)

という二行があるわな。コメントよう見ると、 first call: returns a hoc ... ってありまっしゃろ？これの中のhoc ゆうんは、さっき言うた、高階 (Higher-Order) コンポーネントのことですねん。まあ、仕事の現場では、みんな「ホック」ゆうてますわ。公式のそこんとこのサンプルコードの上のほうのやつ：

import { login, logout } from './actionCreators'

const mapState = (state) => state.user
const mapDispatch = { login, logout }

// first call: returns a hoc that you can use to wrap any component
const connectUser = connect(mapState, mapDispatch)

// second call: returns the wrapper component with mergedProps
// you may use the hoc to enable different components to get the same behavior
const ConnectedUserLogin = connectUser(Login)
const ConnectedUserProfile = connectUser(Profile)

を、

In most cases, the wrapper function will be called right away, without being saved in a temporary variable:

とあるように、中間の変数(temporary variable)を省いて書けば下の

import { login, logout } from './actionCreators'

const mapState = (state) => state.user
const mapDispatch = { login, logout }

// call connect to generate the wrapper function, and immediately call
// the wrapper function to generate the final wrapper component.

export default connect(mapState, mapDispatch)(Login)

という、丸カッコが２つ連続するやつになるわけねんな。
繰り返すけど、これは冒頭に挙げたplusFunctionのサンプル

const addTen = plusFunction(10);

const y = addTen(5);

を、addTen省けば

const y = plusFunction(10)(5);

と、丸カッコ２個続けて書くのと同じことやねん。そして、plusFunction(10)(5)と書ける理屈としては、JavaScriptの関数が第一級だからゆう話になるわけや。

わかってもらえたかの〜

話だけだとしっくりこないんやったら、plusFunctionみたいな関数を返す関数や、HOCの簡単なサンプル、そして(connect同様に）HOCを返す関数のサンプルを自分で書いてみるといいかもしれんね。

ほな、また〜

追記：

ちょっと混乱させてしまうかもやけど、f が、関数を返す関数であるとすると、fが返す関数を実行するところまでを一度に書くと、上で説明したとおり、f(･･･)(･･･) と丸カッコが2連続になるわけやけど、もう一段増やして、fが、関数を返す関数を返す関数であるとすると、すべての段階の関数を実行するには、f(･･･)(･･･)(･･･)と丸カッコを３連続で書くことになります。さらにもう一段階増やして、f が、関数を返す関数を返す関数を返す関数、であるとすると、f(･･･)(･･･)(･･･)(･･･)とカッコを４つ連続で書くことになる。以下同文や。

たとえば、４つ連続でカッコを書くことになるfの例 ➡ サンプル

Comments

[k49977]

詳しい説明ありがとうございます！
２つ丸括弧をつなぐ書き方があるですね！何周か読み直して理解深めます

[k49977]

関数から関数を呼び出してるのかな