Reduxの@connectについて

React.jsでReduxとストア接続する際に使用する＠connectについて
いまいちが理解できないため質問をさせていただきます。

@connect(({ app }) => {
	return {
		hoge: app.hoge
	};
})

上記記述の場合
自分の解釈では、パフォーマンスの観点からむやみにpropsとストアが連携するのを避けるために
@connectを使用してpropsを制限している、と言う認識なのですが、この認識はあってますでしょうか。

初学者のため、認識が大きくずれていた場合等、ご指摘いただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

自分の解釈を記載します。

connectとは何か？

connectはreduxというライブラリではなく、react-reduxというライブラリのAPIです。

react-redux API: connect

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

「パフォーマンスの観点から@connectを使用してpropsを制限している」のか？

＠connectについていまいちが理解できないため

connect関数自体より、connect関数の第一引数 mapStateToProps ({ app }) => { return { hoge: app.hoge}; } の役割に疑問を持っていらっしゃるのかなと解釈して回答します。

[mapStateToProps(state, [ownProps]): stateProps] (Function):
If this argument is specified, the new component will subscribe to Redux store updates.
この引数が与えられたとき、コンポーネントはReduxのStoreの更新をsubscribeします。
This means that any time the store is updated, mapStateToProps will be called.
つまりStoreが更新されるたびにmapStateToPropsが呼び出されることを意味します。

The results of mapStateToProps must be a plain object, which will be merged into the component’s props.
mapStateToPropsの返り値はプレーンなオブジェクトである必要があり、コンポーネントのpropsへ引き渡されます。
If you don't want to subscribe to store updates, pass null or undefined in place of mapStateToProps.
もしStoreの更新をsubscribeしたくなければ、mapStateToPropsにnullかundefinedを与えてください。