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

Question

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

我想尽可能多地使用无状态组件，但我无法弄清楚我将如何处理初始数据有效负载。 使用Stateful React组件，My容器和组件将显示：

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

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

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

Answer 1

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

你可以在这里查看一个简单的例子 。 如您所见，组件和数据加载过程在其中完全相互分离。

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

事实上，我没有任何理由去做你在片段中提供的内容。 更重要的是，从React.Component继承你的组件绝对是React世界的气味。

Answer 2

你可以在mapDispatchToProps中调度一个动作，但它是一种肮脏的方式，根本不推荐。

const mapDispatchToProps = (dispatch) {
    dispatch(fetchDataAction());
    return {
    }
}

但是现在mapDispatchToProps不会是纯粹的副作用。 正确的解决方案是拥有一个容器组件，它将是有状态的React组件，并在Mount上调度该操作。

另一种解决方案是，如果您正在使用react-redux-router那么：

• 调度行动onEnter - https://github.com/reactjs/react-router-redux/issues/319
• 每次路线更改时发送动作 - https://github.com/reactjs/redux/issues/227

请参阅： mapDispatchToProps应该调度初始化操作吗？

Eidt：类似的问题如何在加载路由时从无状态组件调度Redux操作？