質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

3回答

1979閲覧

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

hasshy

総合スコア102

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/08/28 07:24

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

Connect React Redux

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

javascript

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

こんにちは

ご質問にある疑問を解消して、理解を深めるには、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.

javascript

1import { login, logout } from './actionCreators' 2 3const mapState = state => state.user 4const mapDispatch = { login, logout } 5 6// first call: returns a hoc that you can use to wrap any component 7const connectUser = connect( 8 mapState, 9 mapDispatch 10) 11 12// second call: returns the wrapper component with mergedProps 13// you may use the hoc to enable different components to get the same behavior 14const ConnectedUserLogin = connectUser(Login) 15const ConnectedUserProfile = connectUser(Profile)

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

javascript

1import { login, logout } from './actionCreators' 2 3const mapState = state => state.user 4const mapDispatch = { login, logout } 5 6// call connect to generate the wrapper function, and immediately call 7// the wrapper function to generate the final wrapper component. 8 9export default connect( 10 mapState, 11 mapDispatch 12)(Login)

--- 引用:ここまで ---

上記では、通常

javascript

1export default connect( 2 mapState, 3 mapDispatch 4)(Login)

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

javascript

1// first call: returns a hoc that you can use to wrap any component 2const connectUser = connect( 3 mapState, 4 mapDispatch 5) 6 7// second call: returns the wrapper component with mergedProps 8// you may use the hoc to enable different components to get the same behavior 9const ConnectedUserLogin = connectUser(Login)

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

// 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 のサンプルコードでいうと

javascript

1const connectUser = connect( 2 mapState, 3 mapDispatch 4)

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

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

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

javascript

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

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

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

投稿2020/08/29 02:05

jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hasshy

2020/08/29 06:10

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

2020/08/29 23:44

どういたしまして 完全に把握しようと思えば、react-redux のconnect() のソースコードを読むのが確実ですが、はじめからそこまでいかなくても、まずは概要として 1) connect()は、あるコンポーネントをreduxに接続してくれるHOCを返してくれる関数 2) HOC もまた関数で、引数にコンポーネントを受け取り、コンポーネントを返す。 3) HOCは、コンポーネントの特定propsに、何らかのライブラリやモジュール(※) が提供する値だったり機能を渡すときに、よく使われる手法 という三点を押さえておけば十分かと思います。(※ここでいう、ライブラリやモジュールとは、公開されているものだけではなく、ある個別のアプリケーションに組み込まれている独自のものも含まれます)
hasshy

2020/09/03 14:55

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

0

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

javascript

1function generateFunc(){ 2 return function(){ 3 console.log("hogehoge"); 4 } 5} 6 7generateFunc()(); // -> hogehoge

したがってconnect()(TodoApp)

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

という処理になります。

投稿2020/08/28 07:37

nekoniki

総合スコア2409

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hasshy

2020/08/29 06:12

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

0

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

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

投稿2020/08/28 07:37

hentaiman

総合スコア6389

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hasshy

2020/08/29 06:13

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問