컨테이너 구성 요소 패턴과 관련하여 프레젠테이션 구성 요소에서 작업을 발송 하시겠습니까?

Question

방금 ​​컨테이너 구성 요소 패턴을 탐색하기 시작했습니다. 아직 내가 아직 파악하지 못한 것은 시각적 요소에만 관심이있는 표현 구성 요소의 개념입니다.

즉, 이러한 구성 요소가 redux 상태를 변경하는 동작을 전달할 수 없다는 의미입니까?

예컨대

<MainContainer> 
    <ListComponent /> 
    <GraphComponent /> 
</MainContainer> 

말 <GraphComponent>는 REDUX 상태의리스트에 기초하여 그래프를 도시한다. <ListComponent>은 버튼으로 redux 상태에서이 목록을 수정합니다. 이 컨테이너 구성 요소 패턴이 괜찮습니까?

Answer 1

구성 요소에 작업을 전달하지 않아도된다고 생각합니다. Container-Component 패턴에서 컨테이너 (MainContainer)의 콜백 함수를 ListComponent이라는 소품으로 전달해야합니다.이 버튼은 버튼을 클릭하면 실행되고 결과적으로 컨테이너에서 작업을 전달합니다.

Answer 2

Presentation (Dumb) components은 1 학년 학생과 비슷하지만 독특한 외모를 가지고 있지만 행동과 콘텐츠는 부모가 결정하거나 가르칩니다. 예 : <Button />

export const Button = props => { 
    <button type="button" onClick={props.onClick} />{props.text}</button> 
} 

독특한 외관 :이 버튼
행동입니다 : onclick을
내용 : 텍스트
온 클릭하고 텍스트 모두 부모에 의해 제공됩니다. 그들은 5 또는 7 학년까지 증가 할 때

---

, 그들은 state 자신이 자신에 대한 것들을 몇 가지를 결정하기 시작할 수 있습니다. 예 : <Input />

class Input extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
    value: '' 
    } 
} 

handleChange = (e) => { 
    this.setState({value: e.target.value}); 
} 

render() { 
    return (
    <input 
    type="text" 
    value={this.state.value} 
    onChange={this.handleChange} 
    onFocus={this.props.onFocus} 
    /> 
); 
} 
} 

독특한 외관 :이 입력
주 : 그것은에게 자신의 가치를 결정한다.
동작 : onFocus
부모가 제공하는 onFocus.

---

그리고 그들이 성인이 될 때 자신에 행동을 시작하고 부모의지도가 필요할 수 없습니다 . 그들은 바깥 세계 (redux 상점) 과 대화하기 시작합니다. 이제는 새로운 컨테이너 구성 요소입니다. 예

const mapStateToProps = (state, [ownProps]) => { 
... 
} 

const mapDispatchToProps = (state, [ownProps]) => { 
... 
} 

const MyComponent = (props) => { 
return (
    <ChildComponent {...props} /> 
); 
} 

connect(mapStateToProps, mapDispatchToProps)(MyComponent); 

가 나 (ownProps 읽기)

---

이 표상 구성 요소 나 자신의 행동을 필요로하지 않을 수도 있습니다 부모를 필요로하지 않을 수도 있습니다, 자신의 행동과 내용을 결정, 그들은 의지 그들의 부모님. 그러나 바깥 쪽 세계 (매장)와 이야기 (파견)하려면 충분히 커야합니다 (컨테이너 구성 요소).

여기에서 기억해야 할 중요한 점은 작은 것으로 시작하여 프리젠 테이션 또는 컨테이너 구성 요소 일 필요가 있는지 여부에 관계없이 구성 요소가 증가하는지 결정하는 것입니다.