在连接的 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 组件策略。创建一个容器，您可以在其中使用 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} />;
      }
    }
  }
}

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

Correct place to load data in connected redux component

reactjs

redux

react-redux