연결된 redux 구성 요소에서 데이터를로드 할 올바른 위치

Question

redux 구성 요소에서 데이터를로드 할 올바른 위치는 어디입니까?

현재이 방법이 있습니다.

export default class WinRatio extends Component { 
    componentWillMount() { 
    this.props.loadResultsPage(); 
    } 

    render() { 
    return (
     <div> 
     <h1>Win Ratio</h1> 
     </div> 
    ); 
    } 
}; 

이 호출이 발생한다 : 다음 랩 구성 요소의 componentWillMount 라이프 사이클 이벤트에 전화를 걸

import { loadResultsPage } from '../actions/winratio-actions'; 

function mapStateToProps(state) { 
    const { 
    isFetching, 
    results 
    } = state; 

    return { 
    isFetching, 
    results 
    }; 
}; 

export default connect(mapStateToProps, { 
    loadResultsPage 
})(WinRatio); 

:

내가이 컨테이너의 구성 요소가 말?

Answer 1

컨테이너 구성 요소에서 할 수 있습니다. redux를 사용한다면 아마도 smart \ dumb 컴포넌트 전략을 사용할 것입니다. 당신이 REDUX 패키지에서 compose 기능을 사용하여 컨테이너를 작성하고이처럼 구성 할 수 있습니다

export default compose(
    connect(null, { loadData }), //this is your async action 
    doOnComponentMount(({props}) => props.loadData()), 
)(MyDumbComponent) 

및 doOnComponentMount은 다음과 같습니다

function doOnComponentMount(cb) { 
    return (Component) => { 
    return class extends React.Component { 
     componentDidMount() { 
     cb(this); 
     } 

     render() { 
     return <Component {...this.props} />; 
     } 
    } 
    } 
}