【javascript】【React/Redux】connectのexportで記述される処理は何をしているのですか？

Question

Reduxについて勉強しているます。
モジュールの使い方を調べていて、分からない記述があり教えていただきたいです。

Connect React Redux

connectのexportを指定するときに次のような書き方をします。

// TodoはReact.Component
export default connect()(TodoApp)

connect()の後に、(コンポーネント)としています。
javascriptではこのような書き方をした場合、どのような挙動をするのしょうか？

MDNのexportを確認してみましたが、同じような形式の処理はわかりませんでした。
export - JavaScript | MDN

Answer 1

こんにちは

ご質問にある疑問を解消して、理解を深めるには、React用語の「高階コンポーネント」を知っておくとよいかと思います。以下は、connect() が返す値についての react-redux 公式ドキュメントからの引用です。

--- 引用：ここから ---

connect() Returns

The return of connect() is a wrapper function that takes your component and returns a wrapper component with the additional props it injects.

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:

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)

--- 引用：ここまで ---

上記では、通常

export default connect(
  mapState,
  mapDispatch
)(Login)

と書くところを、connectが返す値をいったんconnectUser という変数に入れることで、

// 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)

という二段階にして説明しています。上記の connectUser に connect の返す値を代入する行の上に、以下のコメントがあります。

// first call: returns a hoc that you can use to wrap any component

上記を訳すと、connect の返す値の説明として、

// 1番目の呼び出し： 任意のコンポーネントをラップするために使用できる hoc を返します。

という感じですが、これに出てくる、hoc とは、**高階コンポーネント（HOC: Higher-Order Component)**のことです。以下は、React公式ドキュメントの高階 (Higher-Order) コンポーネント からの引用です。

具体的には、高階コンポーネントとは、あるコンポーネントを受け取って新規のコンポーネントを返すような関数です。

先の react-redux のサンプルコードでいうと

const connectUser = connect(
  mapState,
  mapDispatch
)

によって、connectUserには HOC が入ってきます。どのようなHOCかというと、

• 引数として与えられたコンポーネントのいくつかのpropsに、mapStateとmapDispatch で指定されたマッピングによって、redux の store の内容の一部と、dispatchを使った関数とが注入されてくるコンポーネントを返す

という、そういう働きをするHOCです。先のサンプルでは、connectUserにLogin コンポーネントを引数として渡して、connectの返すコンポーネントを、（先頭が大文字の）変数ConnectedUserLoginで受けることによって、新たに ConnectedUserLoginコンポーネントを作っています。

// 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)

よく使われるHOCの他の例として、react-router の withRouter や、react-redux の connect と同様に HOCを返す関数として、Material UI の withStyles などがあります。また、自作するアプリケーションのあるコンポーネント群に共通するpropを注入するためのHOCや、HOCを返す関数を自作することもできます。connect()の働きを理解するために、簡単なHOCや、HOCを返す関数を自作してみるのもよいかもしれません。

以上、参考になれば幸いです。

Comments

[hasshy]

ご回答いただきありがとうございます。
ご丁寧に公式ドキュメントもご解説いただきとても助かります。
まだ、いただいた回答とドキュメントを読んで理解を深めている所で理解しきれておりませんが、読み進めさせていただいております。

[jun68ykt]

どういたしまして

完全に把握しようと思えば、react-redux のconnect() のソースコードを読むのが確実ですが、はじめからそこまでいかなくても、まずは概要として

1) connect()は、あるコンポーネントをreduxに接続してくれるHOCを返してくれる関数

2) HOC もまた関数で、引数にコンポーネントを受け取り、コンポーネントを返す。

3) HOCは、コンポーネントの特定propsに、何らかのライブラリやモジュール(※) が提供する値だったり機能を渡すときに、よく使われる手法

という三点を押さえておけば十分かと思います。（※ここでいう、ライブラリやモジュールとは、公開されているものだけではなく、ある個別のアプリケーションに組み込まれている独自のものも含まれます）

[hasshy]

度々ありがとうございます！

Answer 2

内部的な実装を確認したわけではないのですがfunc()()の記法そのものはjavascriptでは稀に(?)見かけます。
例えば下記のように関数を返却する関数を実行した場合などです。

function generateFunc(){
  return function(){
    console.log("hogehoge");
  }
}

generateFunc()(); // -> hogehoge

したがってconnect()(TodoApp)は

• connect()でコンポーネントを引数に取る関数を返し
• (TodoApp)で返ってきた関数にTodoAppを渡す

という処理になります。

Comments

[hasshy]

ご回答いただきありがとうございます。
利用ケースが想像しにくい処理ですが、関数の中でさらに関数を呼び出す時に使うのですね。

Answer 3

動作的には以下のような感じかと

function connect(){
    return function(input){ console.log(input+'をこねくりました')}
}
connect()('ABC')

Comments

[hasshy]

ご回答いただきありがとうございます。
テストコードも記載いただきありがとうございます。
どのような挙動をするのか理解できました。