如何使用react-redux包

react 是一个用于构建用户界面的javascript库，它席卷了 Web 开发世界。但是，在一个偏爱选择和灵活性的社区中，可能很难知道从哪里开始！ 

不用担心——一些模式和模块已经成为最佳实践。其中之一是用于管理应用程序状态的 redux。

在我关于使用 React 和 Redux的现代 Web 应用程序课程的这段视频中 ，我将向您展示如何使用该react-redux包。

在 Redux 应用程序中，最好的做法是区分表现组件和容器组件。在本视频中，我将解释这些是什么以及我们如何使用它们。

我将参考我们在课程的前面部分已经创建的代码，但是您应该能够跟随并看到我在做什么。您可以在GitHub上找到该课程的完整源代码。 

如何使用react-redux包

为什么使用react-redux？

在本课程的前面部分，我们使用 React 和 Redux 构建了一个示例应用程序。然而，几乎我们所有的组件都需要与 store 一起工作，要么通过读取特定的状态，要么通过将 action 发送回 store。请记住，Redux 存储 包含整个应用程序的所有状态。这意味着我们的大部分（如果不是全部）组件都需要能够以某种方式访问商店。

到目前为止，我们有一个全局 store 对象，我们可以在我们将属性分配给侧边栏的部分中直接访问它。 

然而，由于很多原因，拥有这样一家全球商店并不是很好。最简单的原因之一是它实际上不是全局的——它只能从这个文件中访问。这意味着我们必须在这个文件中使用它，或者我们必须开始将它从这个文件传递到其他文件，这将变得非常混乱。 

另外，如果我们有很多嵌套组件，这意味着如果中间组件并不真正需要存储，但它的一个子组件确实需要，我们无论如何都必须将它传递给中间组件，因为它需要它，以便它可以将它传递给它的孩子。

现在，如果有某种方法可以让我们的所有组件访问存储，而无需全局变量，并且无需手动传递它，那就太好了。 

事实是，有办法。我们可以使用一个名为react-redux. 如果您前往Redux 文档，您可以阅读更多关于这个包背后的想法。

react-redux工作原理

这个包背后的主要思想之一是展示组件和容器组件的思想。基本上，我们可以将我们的应用程序分成两组组件。 

第一组是表示组件。这些与事物的外观有关。他们根本不需要了解 Redux。他们只是从他们的属性中读取数据，并且他们可以通过调用我们也分配为属性 的回调来更改数据。

另一方面，容器知道 Redux，它们专门订阅 Redux 状态并调度 Redux 操作。我们可以通过简单地用其中一些指令包装一个展示组件来创建一个容器组件。 

一个实际的例子：拆分侧边栏的组件

现在让我们深入了解它是如何工作的。我们将使用侧边栏作为组件的示例，我们可以将其拆分为展示组件和容器组件。

现在，您可能对我们如何将侧边栏拆分为两个单独的组件感到有些困惑。但事实是容器组件总是会包装表现组件。事实上，通常您可能有一个展示组件，它只有一项工作，即由一个特定的容器组件包装。这正是我们要对侧边栏做的事情。 

安装react-redux

当然，我们必须从安装 react-redux 库开始。所以让我们做吧npm install --save react-redux。 

安装完成后，我们可以继续使用import { Provider } from 'react-redux'; 主文件 app.js将其导入。在这个文件中，我们其实只需要 react-redux 给我们的 provider 组件。

现在，提供者组件实际上是 react-redux 的一部分，它将获取我们的存储并将其传递给这些不同的组件。实际上发生的是，在幕后，提供者正在使用 React 的上下文特性。因此，如果您有更高级的 React 经验并且您以前曾使用过上下文，那么您可能会深入了解提供程序的工作原理。

提供商实际上使在任何地方使用商店变得非常非常简单。我们所要做的就是将我们的顶级应用程序组件包装在提供程序组件中，如下所示：

现在我们的应用程序正在使用 react-redux 提供程序。 

使用connect()功能

现在让我们打开我们的侧边栏文件，让我们connect()从react-redux. 该connect()函数允许我们准确定义我们希望容器组件具有哪些属性和功能，然后我们可以采用该定义，将其应用于展示组件，并获得完整的 React 组件。

现在我明白这听起来有点令人困惑。那么让我们看看这是如何做到的。 

演示组件

我们已经编写的侧边栏的美妙之处在于它实际上已经是一个演示组件。

首先，我们的侧边栏只关心事物的外观。当然，它为我们提供了标记样式，而且它根本不知道 Redux。我们确实有这些方法，我们称之为showAddDeck、addDeck和hideAddDeck，但这些方法都知道 Redux。侧边栏本身对 Redux 一无所知。事实上，如果我们想从这个项目中取出 Redux 并使用一些替代方案，我们可以只更改这些函数的定义，而这个侧边栏组件根本不需要更改。它只是调用这些函数。 

它是如何读取数据的？好吧，它只是从我们给它的属性中读取数据。怎么改数据？好吧，它只是调用来自属性的回调。我们有三个方法，当它调用这些方法时，存储中的数据会发生变化。最后，当然，是的，它是手写的。稍后您将看到，容器组件将由 react-redux 生成。

所以我们已经有了我们需要的两个部分之一：这个侧边栏是一个展示组件。接下来我们要做的是将这些属性定义提供给侧边栏，而不是在此处定义它们，而是将它们定义为容器组件的一部分。

所以我只是要复制这些行：

我将把它们粘贴到这里的顶部：

创建映射函数

现在，这些属性实际上很好地分为两组：作为数据的属性，以及作为要调用的函数的属性，它们执行更改存储的操作。

所以我们现在需要做的是创建两个函数，将状态映射到这些属性。传统上，在 React 中，这些函数被称为mapStateToProps和mapDispatchToProps。 

所以让我们继续，从 mapStateToProps. 这是一个将从商店接收最新状态的函数。

我们只需要返回一个对象，它将有两个属性，正如我们已经看到的，它们是decks和addingDeck属性。所以我实际上可以在这里复制并粘贴它们，因为这实际上是相同的数据——我们只需要将语法转换为对象文字语法而不是jsx语法。

这就是我们的mapStateToProps功能。基本上，它只是从存储中获取当前状态，并返回所需的任何数据或表示组件。所以它需要decksandaddingDeck属性，所以我们在一个对象中返回它们。

清理代码

我们可以做一些事情来稍微清理一下。首先，我们实际上可以去掉这些作为该函数块的花括号，因为我们只有一个要返回的语句。但是，因为我们只有那一行，所以我们可以去掉 return 语句。

但是，现在我们在对象字面量周围加上了花括号，JavaScript 会认为这是一个函数块，所以我们将它们用括号括起来。 

我们可以再缩短一点，因为我们不需要整个状态对象，所以我们可以使用解构语法，说我们只想要这个对象的decks属性和addingDeck属性。

当然，那么，在这个函数里面，我们不说state.decks，我们就说decks。我们不说state.addingDeck，我们只是说addingDeck。现在我想你可以看到我们的目标了——因为键和属性有相同的名称，我们可以去掉其中的一个，我们可以说decksand addingDeck。

由于 ES6，这是我们函数的较短版本。 

那么现在呢mapDispatchToProps？嗯，这也是一个函数，它将dispatch作为它的唯一参数。现在 dispatch，当然是 store 的 dispatch 功能。 

再一次，我们只是要返回一个对象字面量，所以不要忘记那些括号，在里面我们需要顶部的三个属性：addDeck、 showAddDeck和hideAddDeck。所以现在我们有了一个函数，可以将调度函数映射到侧边栏所需的三个回调。

所以现在我们拥有了创建容器组件所需的一切。我们有两个函数将我们的调度函数中的状态对象映射到该函数需要的属性。我们有一个表示组件，它期望这些属性。 

现在， connect()我们可以使用该函数将这两个映射函数与表示组件连接起来。而这个connect函数将返回的是我们的容器组件。我们实际上并不打算在这里编写另一个组件——而是将这三个部分传递给connect()函数，它将返回我们的容器组件。

所以在底部，而不是导出侧边栏，让我们将调用导出到connect(). 我们将向它传递两个参数——and 函数——mapStateToProps并将返回一个新函数。mapDispatchToPropsconnect()

export default connect(mapStateToProps, mapDispatchToProps)(Sidebar);

现在从这个文件中实际导出的不是展示侧边栏，而是我们的新容器组件，在这个函数之外我们仍然可以将其称为<Sidebar>.

这就是react-redux行动包。您可以查看GitHub 上的课程源文件，以了解代码的完整工作方式。