javascript - 如何使用 react-redux connect 获取初始数据

Question

我在这里阅读文档 https://github.com/reactjs/react-redux/blob/master/docs/api.md

我想尽可能多地使用无状态组件，但我不知道如何处理初始数据负载。使用有状态的 React 组件，我的容器和组件将如下所示:

// Container
const mapDispatchToProps = (dispatch) {
    return {
        fetchData: () => dispatch(fetchDataAction());
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

// Component
class MyComponent extends React.Component {
    componentDidMount() {
        this.props.fetchData();
    }
}

如果我让我的组件无状态，componentDidMount 的逻辑去哪里了？

我看过示例，他们建议您使用有状态 React 在容器中扩展无状态组件，并在其中添加该逻辑:

// Container
class MyComponentContainer extends MyComponent {
    componentDidMount() {
        this.props.fetchData();
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(MyComponentContainer);

但这是最好的方法吗？如果我想创建一个有状态的 React，为什么不直接在 MyComponent 上创建呢？

编辑 为了清楚起见；我在问我是否可以基本上加载我的初始数据而无需在任何地方创建 React.Component 。

Answer 1

与您的主要问题相关:是的，完全有可能在您的 store 创建后立即加载数据。只需在代码中的任何位置使用 store.dispatch，甚至在 React.Components 之外。

您可以查看 simple example here .如您所见，组件和数据加载过程在其中完全相互分离。

But is that a best way to do it? If I am bothering to create a Stateful React, why not just do it directly on MyComponent?

事实上，我看不出有任何理由像您在代码段中提供的那样做任何事情。更重要的是，从 React.Component 以外的任何地方继承您的组件在 React 世界中绝对是一种气味。