コンテナコンポーネントパターンに関するプレゼンテーションコンポーネントからのアクションのディスパッチ

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の
内容：テキスト
の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 parentによって提供されています。

---

そして、彼らが大人になったとき、彼らは自分自身で動作するように開始することとその親の指導が必要になることがありません 。彼らは外の世界（reduxの店） （彼らは新しいコンテナのコンポーネントです）と話を始めます。 例

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

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

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

connect(mapStateToProps, mapDispatchToProps)(MyComponent); 

、自身の行動や内容を決定するか、しないことがあり、親を必要とするかもしれない（ownPropsを読む）

---

表現的要素、彼らはに頼ることができるか、自分自身のいずれかの行動を必要としないことがあり、 彼らの両親。しかし、外側の ワールド（店舗）に話す（発送する）には、十分に大きくする必要があります（コンテナコンポーネント）。

ここで覚えておくべき重要なことは、小さいものから始めて、プレゼンテーションコンポーネントであるかコンテナコンポーネントである必要があるかにかかわらず、コンポーネントとして決定することです。