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之外也是如此。

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

但这是最好的方法吗？如果我很想创建有状态反应，为什么不直接在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

请参阅：Should mapDispatchToProps dispatch initialization actions?

Eidt：类似问题How to dispatch Redux action from stateless component when route is loaded?

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

2 个答案: