Question

阅读许多我理解（简化）的文章和博客文章

mapDispatchToProps()(
    clickHandler: ()=>dispatch(Action)
);

<Component onClick={this.props.clickHandler} />

与

相同

<Component onClick={store.dispatch(action)} />

与使用mapDispatchtoProps的所有麻烦相比，这看上去更简单

我是redux的新手，通常会做出反应，无法解决这个问题。是否实际需要使用它，或者仅仅是良好的编码习惯？

Answer 1

使用mapDisplayToProps并不是绝对必要，但是如果您的应用程序可以扩展，它将非常方便。

在第二个示例中，您直接访问商店对象。这不是一种好的编码风格，因为您将组件耦合到全局对象，这使得更难于单独测试组件或在其他上下文中使用它。

将每个组件视为一个独立的软件，传递给该组件的道具是与应用程序其余部分的唯一接口。对于小型的示例应用程序来说，这无关紧要，但在实际条件下会有所收获。

Answer 2

将connect与mapDispatchToProps和mapStateToProps结合使用的主要思想是使UI组件简单易用。想象一下，如果您有3个应用程序，它们具有完全不同的架构（redux，flux，纯React ContextAPI），但是应该重用相同的UI组件。如果将业务逻辑直接封装到您的组件（例如2.），则可能很难重用甚至无法重用，因为它已附加到某些store上（在您使用{{1 }}。

作为一个旁注和一个很好的例子，<Component ... />如何使您的应用程序更干净是业务逻辑和UI组件之间的明确区分。

示例：

您有一个mapDispatchToProps组件，该组件在整个应用程序中都使用。然后，您需要在应用程序的不同位置具有注销按钮。一种方法是创建一个新的常规React组件，该组件将在内部使用Button组件，并具有一定的逻辑。

带有Button的

connect可以帮助您，并允许轻松地创建带有附加逻辑的新mapDispatchToProps组件（这也允许您更新redux状态），然后在需要时要拥有退出按钮，您只需使用LogoutButton，就不需要任何额外的逻辑，因为它们都在LogoutButton内定义，并且已经附加到mapDispatchToProps组件中。

Answer 3

mapDispatchToProps()是一个实用程序，可以帮助您的组件触发操作事件（调度操作可能会导致应用程序状态更改）

react-redux应用程序中对mapDispatchToProps有什么需求？

3 个答案: