react-reduxのconnect()関数についてザックリと解説

takabee

react-reduxのconnect()関数を初めて見たので、改めて自分で調べたことをまとめてみた技術メモです。

コードを読んでいるときに親コンポーネントではpropsは渡してないのに、子コンポーネントでpropsを受け取っているのを見て、何が起こってるんだ？？と疑問を持ちました。

その答えはconnect()にありました。

まず参考にしたのはこちらの記事。

公式ドキュメントじゃなくて申し訳ないのですが結構わかりやすかったので、詳しく知りたい方は一回見てみるといいかもです。

ネコ大先生

この記事は【約3分】で読めるニャ！

疑問を持った経緯

実務でコードを見てて以下のようなコードに出会ったのがきっかけ。

//子コンポーネントの定義
export default class ChildComponent extends Component {
  const {hogehoge} = this.props //ここで親コンポーネントからprops.hogehoge受け取ってるはず。
  ...
  ...
}

//親コンポーネント側で子コンポーネントの呼び出し。あれ、props渡してなくない...？？？
<ChildComponent />

子コンポーネント側の定義では、

const {hogehoge} = this.props

で親コンポーネントから、this.props.hogehogeを受け取ってるはず。

なのに親コンポーネントで子コンポーネントを呼び出すときに

<ChildComponent />

propsを渡していない。はてはて、どういうこっちゃ。。。

connect()の登場

コードの一番下の部分で、こんな記述がありました。

export default connect(
  mapHogeHogeStateMapper,
  mapDispatchToProps,
)(ChildComponent);

どうやらこれがコンポーネントにpropsを渡しているようです。

connect()の動き

connect()は簡単にいうと、こんな感じの認識です。

まず先ほどの疑問を整理しておきましょう。

親コンポーネントではpropsを渡していないのに、子コンポーネントではpropsを受け取ってます。

当然「子コンポーネントはpropsをどこから受け取ってんの？」ていう疑問が浮かびます。

親がお小遣いを渡してないのに子供が金持ってたら悪い方向で考えちゃいますよね。

この疑問を解消するのがconnect()です。

connect()は中間コンポーネントを作成してstoreに接続し、子コンポーネントにpropsを渡すことができます。

つまり親からpropsを渡してないのに子コンポーネントがpropsを受け取っていたのは、中間コンポーネントがいたんですね。

この中間コンポーネントでは

を定義してstoreと接続します。

そうして子コンポーネント側でstoreが使えるようになるわけですね。

connect()のまとめ

いかがだったでしょうか。

結構ざっくりとメモしてみたのですが、こんな機能があることを自分も最近まで知らず、けっこう驚いてます。

まだまだ力不足なので、もっともっと実力のある方のコードを読んで精進します！

takabee

ではまた次の記事でお会いしましょう！

ネコ大先生

最後まで読んでくれてありがとうニャ！