는 REDUX에 많은 작은 재사용 reactjs 구성 요소에 connect()를 사용하는 것이 좋습니다 그 것이다

Question

가정하자 나는이 <BlogEntry> 또는 <ItemEntry> 또는 <ReplyEntry>처럼, 부모 구성 요소의 다른 유형의 여러 페이지에 걸쳐 사용됩니다 <LikePanel>라는 작은 재사용 가능한 구성 요소 . LikePanel의

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) 

사용 사례 : 웹 페이지가 20 개 블로그 항목이있는 경우

가

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> 
     } 
    } 
} 

그래서 20가있을 것입니다 페이지에 <LikePanel>를 연결하고, 미래의 가능성이있다 여분의 부품 것이다 redux에 연결되어 있어야합니다. <LikePanel>과 같은 작은 구성 요소로 connect()을 사용하는 것이 좋습니다.

Answer 1

정말 괜찮습니다. 구성 요소 계층 구조에서 의미가있는 곳이면 connect을 사용하십시오. 한 가지 공통적 인 패턴은 목록 구성 요소를 연결하고 목록에서 데이터 항목의 ID를 검색하고 각 항목에 대해 <ListItem id={itemId} /> 하위 구성 요소를 렌더링하고 각 하위 구성 요소도 연결하여 자신의 데이터를 조회하도록하기 위해 mapState을 사용하는 것입니다. 신분증. Redux FAQ 질문 (http://redux.js.org/docs/faq/ReactRedux.html#react-multiple-components)도 참조하십시오.