はそれが再来

Question

に多くの小さな再利用可能なreactjsコンポーネントにconnect（）を使用することをお勧めされていると。

import {connect} from 'react-redux' 
import {likeAction} from './LikeAction' 


class LikePanel extends React.Component{ 

    render() { 
     return <ButtonGroup className={this.props.className}> 
      <Button onClick={()=>this.onClickLiking()}> 
       <Glyphicon glyph="thumbs-up"/>{this.props.like}</Button> 
      </ButtonGroup> 

    } 

    onClickLiking(type){ 
     this.props.dispatch(likeAction()); 
    } 
} 

const mapStateToProps = state => { 
    let obj = {}; 
    obj[LIKE] = state[LIKE]; 
    return obj; 
} 

export default connect(mapStateToProps)(LikePanel) 

例はLikePanelの例を使用します。

class BlogEntry extends React.Component{ 

    render(){ 

     return this.props.data.entry.map((item)=>{ 

      return <div> 
         {item.article} 
         <LikePanel like={item.like}/> 
        </div> 
     } 
    } 
} 


class ProductEntry extends React.Component{ 

    render(){ 

     return this.props.data.entry.map((item)=>{ 

      return <div> 
         <ProductPanel data={item}/> 
         <LikePanel like={item.like}/> 
        </div> 
     } 
    } 
} 

ので、Webページは、20個のブログエントリを持っている場合は20が存在することになるページに<LikePanel>を接続し、余分な部品がすることを将来的に可能性がありますreduxに接続してください。 <LikePanel>のような小さなコンポーネントを使ってconnect()を使用するのがよい方法ですか？

Answer 1

これはまったく問題ありません。コンポーネント階層で意味がある場合は、connectを使用してください。 1つの共通パターンは、リストコンポーネントを接続し、リスト内のデータ項目のIDを取得するのにmapStateを使用し、各項目に対して<ListItem id={itemId} />子コンポーネントをレンダリングし、各子コンポーネントも接続して、 ID。 Redux FAQの質問http://redux.js.org/docs/faq/ReactRedux.html#react-multiple-componentsも参照してください。