MAPSTATETOPROPS和MAPDISPATCHTOPROPS：React-Redux的坏男孩

最新推荐文章于 2024-01-22 10:10:00 发布

翻译最新推荐文章于 2024-01-22 10:10:00 发布 · 449 阅读

标签

#javascript #ViewUI

本文详细解析了React Redux中MapStateToProp和MapDispatchToProps的概念，阐述了它们如何帮助组件访问和修改Redux Store状态，以及如何利用Connect函数进行连接。

介绍

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

前提概述

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

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

一般思想

在反应中，组件具有状态。但是它们的状态只限于自身和内部组件。此外，重新加载后它们的状态也会刷新。当您需要存储整个应用程序的状态时，这将是一个问题。所有组件均可访问并可由其编辑的状态。 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