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组件中加载数据的正确位置

1 个答案: