React Redux - データを小道具や接続経由でコンポーネントに渡します

Question

私はReact Reduxアプリケーションを開発していますが、私はいくつかのベストプラクティスについてかなり根本的な疑問があります。

私はcomponentDidMount上のデータをフェッチしていMainComponent（コンテナのようなもの）を持っている：

class MainComponent extends React.Component { 
    componentDidMount(){ 
    this.fetchData() 
    } 
    fetchData() { 
    this.props.fetchDataAction() 
    } 
    render() { 
    return (
     <div> 
     <ChildComponent1 /> 
     <ChildComponent2 /> 
     </div> 
    ) 
    } 
} 
export default connect(mapStateToProps,{fetchDataAction})(MainComponent) 

ChildComponentsに取得したデータを渡すためにどのように？ベストプラクティスは何ですか？ 2つの解決策です（私見 - 多分もっと？）

まず解決策：

class MainComponent extends React.Component { 
... 
render() { 
    return (
    <div> 
     <ChildComponent1 dataOne={this.props.data.one} /> 
     <ChildComponent2 dataTwo={this.props.data.two} /> 
    </div> 
) 
} 
... 

第二の溶液 - MainComponent中）fetchDataAction（によって更新される格納するChildComponentsを接続します

今

class ChildComponent1 extends React.Component { 
    render() { 
    return (
     <div> 
     {this.props.one} 
     </div> 
    ) 
    } 
} 
function mapStateToProps(state){ 
    return (
    one: state.one 
) 
} 
export default connect(mapStateToProps,null)(ChildComponent1) 

私は、ChildComponentsがストアと第2のソリューションを更新するアクションを起動しないときは、最初のソリューションを使用します。しかし、それが適切なアプローチであるかどうかはわかりません。

Answer 1

子コンポーネントが複数あり、取得したデータの一部を異なる子コンポーネントに渡す必要がある場合は、親コンポーネントを単一のソースとして保持することをお勧めします。

あなたが何か試すことができます： -

class MainComponent extends React.Component { 

    constructor(){ 
    super() 
    this.state = { 
     data : {} 
    } 
    } 

    componentDidMount(){ 
    this.fetchData() 
    } 
    fetchData() { 
    this.props.fetchDataAction() 
    } 

    componentWillReceiveProps(nextProps){ 
    //once your data is fetched your nextProps would be updated 
    if(nextProps.data != this.props.data && nextProps.data.length>0){ 
     //sets your state with you data--> render is called again 
     this.setState({data:nextProps.data}) 
    } 
    render() { 
    //return null if not data 
    if(this.state.data.length === 0){ 
     return null 
    } 
    return (
     // it should have keys as one and two in api response 
     <div> 
     <ChildComponent1 data={data.one}/> 
     <ChildComponent2 data={data.two}/> 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state){ 
    return (
    data: state 
) 
} 
export default connect(mapStateToProps,{fetchDataAction})(MainComponent) 

を私はすべてのロジックが一箇所このようにとどまる感じ。将来、いくつかの子コンポーネントを追加するために追加する予定がある場合は、上記のコード行とAPIの変更を追加するだけです。しかし、各コンポーネントを読み込んだ場合、そのコンポーネントを再度接続して接続すると、より複雑になります。

したがって、他のロジックを子コンポーネントに持たない場合は、dataを取得することから、このロジックを親コンポーネントに保持します。