React Redux - 소품이나 연결을 통해 데이터를 구성 요소로 전달

Question

React Redux 앱을 개발하고 있으며 모범 사례에 대한 근본적인 질문이 있습니다.

나는 MainComponent componentDidMount에 (컨테이너의 종류) 내가 가져 오는거야 데이터를 한 :

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에 가져온 데이터를 전달하는 방법? 가장 좋은 방법은 무엇입니까? 두 가지 가능한 솔루션 (이럴 - 어쩌면 더?)이다

최초의 솔루션 :

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가 저장소와 두 번째 솔루션을 업데이트 할 때 작업을 수행하지 않을 때 첫 번째 솔루션을 사용합니다. 그러나 적절한 접근 방법인지 확실하지 않습니다.

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을 가져 오면됩니다.