【Redux】mapStateToPropsを書いた方が良いのか

Question

前提・実現したいこと

最近のReact Reduxの書き方について質問がございます。
mapStateToPropsを切り出した方が良いのか、
それとも下記のコードように渡す方が良いのか、
どうなりますでしょうか…

該当のソースコード

connect(state => ({})

Comments

[HayatoKamono]

この質問するに至った背景、具体的に何が分かりたいのかを明確に記載なさって下さい

[OOO_777]

具体的に何を行いたい等はございませんが、mapStateToPropsを使わない方法もあると聞いて、どちらの方が最近の書き方にあっているのかと思っている次第です。

[OOO_777]

なのでmapStateToPropsを使用していて特に不便などを思っている訳ではないです。

[HayatoKamono]

最近の書き方というのはどういうことですか？どっちが今っぽい書き方という意味ですか？その場合、それを何の為に知りたいのでしょうか？(上位の目的の確認)

Answer 1

最近のReact Reduxの書き方について質問がございます。
mapStateToPropsを切り出した方が良いのか、
それとも下記のコードように渡す方が良いのか、

質問の意図がよく理解出来ていませんが、どちらを選ぶかは「最近の書き方」がどうこうで考えることではないかと思います。

const mapStateToProps = (state, ownProps) => ({
	isActive: ownProps.filter === state.visibilityFilter,
	users: state.users
})

const mapDispatchToProps = (dispatch, ownProps) => ({
	onClick: () => dispatch(setVisibilityFilter(ownProps.filter))
})
​
connect(mapStateToProps, mapDispatchToProps)(XYZ);

例えば、こう書くのか、

connect(
	(state, ownProps) => ({
		isActive: ownProps.filter === state.visibilityFilter,
		users: state.users
	}),
	(dispatch, ownProps) => ({
		onClick: () => dispatch(setVisibilityFilter(ownProps.filter))
	}
)(XYZ);

このように書くのかの違いなだけですよね。

そして、後者はやはり、それぞれの関数内の記述量が増えた場合、読みづらかったり、扱いづらかったりするのではないでしょうか？connect()を他の関数で更にラップすることも場合によっては有りますし、そうなると尚更そうなるかなと。

なので、短ければ後者でも良いのでしょうが、長い場合もあったり、短い場合もある訳で、それを考えると一貫性を保つために前者に統一しておくのが無難だとは思います。

Comments

[OOO_777]

確かに後者だと読みにく感じがありますね…
ご回答ありがとうございます。
勉強になりました。