私の結論から先に述べると、
connectするのはcontainersでcomponentsは極力connectしない。のが正解だと思います。
container = page
component = 部品(list viewや、button、labelなど)
下記のようにContainerでreducerを受け取り、各ComponentにDataを渡します。
javascript
1...
2class ContainerPage extends React.Component{
3 render(){
4 return(
5 <Button
6 title={this.props.title}
7 subTitle={this.props.subTilte}/>
8 <Label
9 title={this.props.title}
10 subTitle={this.props.subTilte}/>
11 );
12 }
13}
14...
15function mapStateToProps(state) {
16 const { reducer } = state
17 const {
18 title: title,
19 subTitle: subTitle,
20 } = reducer || {
21 title: title,
22 subTitle: subTitle,
23 }
24 return {
25 title,
26 subTitle,
27 }
28}
29
30export default connect(mapStateToProps)(ContainerPage)
恐らくですが、componetsがconnectまみれになってしまうのは、
eventのtriggerをcomponetに持ってしまうからだと考えます。
javascript
1<Button
2 title={this.props.title}
3 subTitle={this.props.subTilte}
4 onClick={this._onClick.bind(this)}/>
と、functionをpropsで渡してあげ、containerにfunctionを追加します。
javascript
1_onClick(hoge1, hoge2){
2 const {dispatch} = this.props
3 dispatch(testAction(hoge1, hoge2))
4}
こうすると、Reduxとの接地面が抑えらる。且つ、componentとの疎結合化が進むと考えます。
私はcontainerはpageまたはそれに近い機能単位で持ち、componentはcontainerからparameterを渡す。
を意識し設計しています。責任の所在がはっきりわかるので、このデザインパターンは重宝しています。
※1 空で書いたcodeなので動くかは不明です。申し訳ありません。
※2 デザインパターン名があったはずですが、ど忘れしました。思い出したら追記します。
回答になれば幸いです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/16 15:10