Redux:我应该在哪里调用mapDispatchProps?

Question

我有一个父组件(ProfileScreen)。这个组件由较小的子组件组成，如ProfilePhoto、ProfileInfo等。从子组件ProfilePhoto和ProfileInfo我可以编辑有关用户的信息 - 他们的个人资料照片、用户名等。在我编辑了一些用户的数据后，我想调用fetchUser- 这是来自 redux 的方法，它从数据库中获取当前用户。也就是说，在我编辑用户后，我再次从数据库中获取它，所以我的组件刷新，我可以在ProfileScreen上看到更新的更改。目前，我的结构如下：我称之为内部ProfileScreen

const mapDispatchProps = (dispatch) =>
bindActionCreators({ fetchUser }, dispatch)

我fetchUser作为财产传递给ProfileScreen和ProfileInfo.这样当用户完成配置文件编辑时，我可以调用fechUser并重新加载组件。

我的问题是 - 这是正确的方法吗？打电话不是更好吗

const mapDispatchProps = (dispatch) =>
bindActionCreators({ fetchUser }, dispatch)

直接从子组件(ProfilePhoto和ProfileInfo)而不是将其作为属性传递？

Answer 1

这个问题是看具体情况。没有正确的答案。但对于您的情况，我推荐前者。

使ProfileScreen组件成为容器组件。它是有状态的和不纯的。这意味着我们使用mapDispatchProps将调度和动作创建者注入道具中。处理容器组件中的副作用，例如 DOM 操作、网络 I/O、清理工作。

使ProfilePhoto和ProfileInfo组件成为表示组件。他们是纯洁的，没有国籍的。这意味着它们不应该包含任何副作用代码。只需接受父级的道具并渲染即可。

ProfileScreen(container)
/           
ProfilePhoto  ProfileInfo

如果将来ProfilePhoto组件变得更加复杂，请考虑将其用作容器组件。然后，将其子组件用作表示组件。

但请记住，更多的有状态和不纯组件的组合会导致代码复杂性增加。

延伸阅读：表示和容器组件