介绍
在使用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