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

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，你可能会使用智能\哑组件策略。创建一个容器，在其中使用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} />;
      }
    }
  }
}