リアックスReduxの構成

Question

React and Redux - Modal Windowとdata formを含む4 inputs/selects UI elementsを使用して、標準的なUIパターンを再作成します。 私はスマートコンテナコンポーネントとダムプレゼンテーションコンポーネントについてたくさん読んでいますが、この特定のケースでは最良のコンポジションパターンを理解するのに十分な練習がありません。
は、現在、私が作曲するには、次のコンポーネントを考え出し：

<ModalContainer /> 
<ModalWindow /> 
<Form /> 
<Input 1/> ... <Input 2/> 

、アドバイスしてください：

1. 魔女のコンポーネントはスマートとダム考慮すべき？
2. Reduxで適切なデータフローを実装する方法は？
3. この場合、コンポーネントの構成はどのように見えるのですか？
4. 標準的なコードサンプルやブログを読むことはできますか？

Answer 1

スマートとダムとみなされるコンポーネントはどれですか？

あなたのすべてのロジックは、あなたのスマートコンポーネントのコンテナにある必要があります。ここですべてのデータを取得し、コンポーネントをレンダリングするプレゼンテーションコンポーネントに渡します（何もないので、ダムと呼ばれます）。それは本当にうまく説明するこのhereに関する素晴らしい記事があります。

Reduxで適切なデータフローを実装する方法は？

私はこの質問が本当に広いと還元ですと言うでしょうdocs自体はこれを理解するための本当に良い方法です。

この場合、コンポーネントの構成はどのように見えるのですか？

ModalContainer.js

class ModalContainer extends React.Component{ 
    render(){ 
    return <Modal {...this.props} /> 
    } 
} 

function mapDispatchToProps(dispatch){ 
//map your dispatches here 
} 

export default connect()(ModalContainer) 

Modal.js

class Modal extends React.Component{ 
    render() { 
    // you can change your modal content here based on some props, make it more generic 
    <Form {...this.props}/> 
    } 
} 

export default Modal 

Form.js

class Form extends React.Component{ 

    onSubmit() { 
    const {dispatch} = this.props 
    //dispatch your action here to call API and update store 
    } 
    render() { 
    <Form onSubmit={this.onSubmit.bind(this)> 
     //form data 
    </Form> 
    } 
} 

export default Form 

PS：

1. あなたは小道具に基づいFormWrapperを作成することによって、それがより一般的なことができますが戻ってあなたのモーダル内の特定のフォームを（他の言葉であなたがモーダルの内容を変更し、どこでも同じモーダルを使用することができます）
あなたを与えます
2. 上記のコードは、コンポーネントの構成方法を示すデモコードですが、ほとんど変更する必要はありません。

どの標準的なコードサンプルまたはブログを読むべきですか？

Sound Redux - 私が最初にこのコードは本当にきれいで親切ました。

他にも必要があるかどうか質問してください。