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

【问题标题】：How to fetch initial data with react-redux connect如何使用 react-redux connect 获取初始数据
【发布时间】：2018-01-10 13:50:02
【问题描述】：

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

我想尽可能多地使用无状态组件，但我不知道如何处理初始数据负载。使用 Stateful 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。

【问题讨论】：

为什么不对容器组件的componentDidMount调用fetchData？

标签： javascript reactjs redux react-redux

【解决方案1】：

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

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

但这是最好的方法吗？如果我为创建 Stateful React 而烦恼，为什么不直接在 MyComponent 上创建呢？

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

【讨论】：

【解决方案2】：

您可以在 mapDispatchToProps 中调度操作，但这是一种肮脏的方式，完全不推荐。

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

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

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

Enter 上的调度操作 - https://github.com/reactjs/react-router-redux/issues/319
每次路线更改时调度操作 - https://github.com/reactjs/redux/issues/227

请参考：Should mapDispatchToProps dispatch initialization actions?

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

【讨论】：