在正在连接的redux组件中加载数据的正确位置

Question

哪里是在redux组件中加载数据的正确位置？

目前我有这种方式。

说我有这个容器组件：

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

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

    return { 
    isFetching, 
    results 
    }; 
}; 

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

然后我做在包装的组件的componentWillMount生命周期事件的电话：

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

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

应该在哪里这个调用发生的呢？

Answer 1

你可以在你的容器组件中做到这一点。如果您使用redux，则可能使用smart \ dumb组件策略。创建在您使用compose功能从Redux的包装容器，你可以撰写这样的：

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} />; 
     } 
    } 
    } 
}