介绍

在使用React的过程中，我发现一个很难理解的概念，而且我看到新的React开发人员正在为之奋斗。 我在说什么概念？ 我说的是mapstatetoprops和mapdispatchtoprops概念。 首先，当我遇到它时，我问自己我们要映射什么？ 为什么我们需要该代码？ 里面有什么？ 好吧，我们将在这里分解。

前提概述

在我们深入之前，您需要熟悉一些想法。

• 了解反应 。
• 熟悉redux商店。
• 了解反应行动 。
• 了解反应减速器。

熟悉这些概念将使本文更有意义。

一般思想

在反应中，组件具有状态。 但是它们的状态只限于自身和内部组件。 此外，重新加载后它们的状态也会刷新。 当您需要存储整个应用程序的状态时，这将是一个问题。 所有组件均可访问并可由其编辑的状态。 Redux在这里为您服务。 Redux借助其存储来保持整个应用程序的状态。 组件可以请求Redux存储状态并对其执行操作。 重要说明是，redux存储仅在分派操作时才更改其状态。 也就是说，您只能通过将操作发送到商店调度功能来更改redux状态。 这有助于统一更改商店的方式。

MAPSTATETOPROPS

Mapstatetoprops是一个接受参数并返回对象的函数，该参数为redux存储状态。 它将状态注入到引擎盖下的功能中。 它返回一个对象，该对象将在组件属性中包含您需要的所有状态。 该对象将是值的对象。 让我们举个例子：

假设这是我们的redux存储状态。

{username : 'uchenna' ,age : 17 ,sex : 'male' ,isAdmin : false ,
}

并且我们需要我们的组件以' username '和' isAdmin '作为道具。 然后，我们需要将状态映射到组件props，其名称为建议（MAP-STATE-TO-PROPS）。

我们有 ：

const mapStateToProps = ( state ) => ({name : state.username,isAdmin : state.isAdmin,
});

因此，在创建组件时，它还有两个道具。 分别是名称和名称，分别代表redux状态username和isAdmin ，代表redux状态为isAdmin属性。

MAPDISPATCHTOPROPS

要更改Redux状态，我们将动作发送到Redux Store调度功能。 但是我们如何获得redux调度功能呢？ mapdispatchtoprops可以帮助您。 mapdispatchtoprops是一个功能，该功能将redux存储分派功能作为参数。 并返回一个函数对象。 这些返回的对象包含您需要注入到组件prop中的所有功能。

让我们举个例子，我们有一个动作：

const setName = ( name ) => ({type : 'SET_NAME' ,name,
})

和减速器：

const name = ( state = '' , action ) => {switch (action.type) {case 'SET_NAME' :return action.name;default :return state;}}

并且您需要在组件中设置用户名。 为此，您需要将' setName '操作发送到redux dispatch函数。 mapdispatchtoprops帮助创建一个在其主体中分派动作并将其添加到组件props的函数。

const mapDispatchToProps = ( dispatch ) => ({setName : ( name ) => dispatch(setName(name)),
})

使用上面的代码，现在您已经将' setName '函数添加到了组件props中。

连接

我们一直在谈论mapstatetoprops和mapdispatchtoprops ，但是这些函数如何获得redux存储状态和调度函数？ 这是连接功能。 connect函数是提供redux状态和调度功能的链接。 也就是说，如果我们的组件中没有connect函数，则mapstatetoprops和mapdispatchtoprops将不起作用。 连接功能示例。

connect(mapStateToProps, mapDispatchToProps)([component Name])

结论

当使用react和redux时， Mapstatetoprops和Mapdispatchtoprops非常有用。 它们是它们之间的链接。 充分了解映射概念后，您就可以成为Redux Lord。

From: https://hackernoon.com/mapstatetoprops-and-mapdispatchtoprops-the-bad-boys-of-react-redux-46ig37i3