React是一个用于构建用户界面JavaScript库，它已席卷Web开发领域。 但是，在一个喜欢选择和灵活性的社区中，很难知道从哪里开始！

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

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

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

我将参考本课程前面部分中已经创建的代码，但是您应该能够继续学习并了解我在做什么。 您可以在GitHub上找到该课程的完整源代码。

如何使用react-redux软件包

为什么使用react-redux ？

在本课程的早期，我们使用React和Redux构建了一个示例应用程序。 但是，几乎我们所有的组件都需要通过读取特定状态或将操作分派回商店来与商店协同工作。 记住， Redux存储拥有整个应用程序的所有状态。 这意味着我们大多数（如果不是全部）组件都需要能够以某种方式访问​​商店。

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

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

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

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

事实是，有办法。 我们可以使用一个名为react-redux的包。 如果您转至Redux文档，则可以阅读有关此软件包背后想法的更多信息。

react-redux如何工作

该程序包背后的主要思想之一是表示性组件和容器组件的思想。 基本上，我们可以将应用程序分为两部分。

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

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

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

现在，让我们深入研究一下它如何工作。 我们将使用侧边栏作为一个组件示例，可以将其分为表示性和容器性组件。

现在，您可能在这里有点困惑，我们将如何将侧边栏拆分为两个单独的组件。 但事实是，容器组件始终将包装表示组件。 实际上，通常您可能只具有一个演示组件，而该组件只能完成一项工作，并且要由一个特定的容器组件包装。 这正是我们要使用侧边栏的内容。

安装react-redux

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

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

现在，provider组件实际上是react-redux的一部分，它将带入我们的商店并将其传递给这些不同的组件。 实际上，发生的事情是在后台，提供程序正在使用React的上下文功能。 因此，如果您有一些更高级的React经验，并且之前已经使用过上下文，那么您可能会深入了解提供商的工作方式。

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

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

使用connect()函数

现在，我们打开侧边栏文件，并从react-redux导入connect()函数。 connect()函数使我们能够准确定义容器组件要具有的属性和函数，然后我们可以采用该定义，将其应用于表示性组件，并获得完整的React组件。

现在我知道这听起来有点令人困惑。 因此，让我们看看这是如何完成的。

表现成分

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

首先，我们的侧边栏仅真正关注事物的外观。 当然，它为我们提供了标记样式，并且根本不了解Redux。 我们确实有这些方法称为showAddDeck ， addDeck和hideAddDeck ，但是这些方法对Redux hideAddDeck了解。 边栏本身对Redux一无所知。 实际上，如果我们希望将Redux从该项目中删除并使用其他替代方法，则只需更改这些函数的定义，并且此侧边栏组件根本不需要更改。 它只是调用这些函数。

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

因此，我们已经有了所需的两部分之一：此侧边栏是一个演示组件。 我们要做的下一件事就是采用这些要提供给边栏的属性定义，而不是在这里定义它们，我们将它们定义为容器组件的一部分。

因此，我将复制以下几行：

我将它们粘贴在此处的顶部：

创建映射功能

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

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

因此，让我们继续，从mapStateToProps开始。 此功能将从商店接收最新状态。

我们只需要返回一个对象，该对象将具有两个属性，就像我们已经看到的那样，它们是decks和addingDeck属性。 因此，实际上我可以将它们复制并粘贴到此处，因为实际上这是相同的数据-我们只需要将语法转换为对象文字语法而不是JSX语法即可。

这就是我们的mapStateToProps函数。 基本上，它只是从存储中获取当前状态，并返回所需的任何数据或表示组件。 因此，它需要decks和addingDeck属性，因此我们将它们返回到对象中。

清理代码

我们可以做一些事情来清理一下。 首先，实际上我们可以摆脱这些花括号，而这些花括号是该函数的功能块，因为我们只有一个要返回的语句。 但是，由于只有一行，因此可以摆脱return语句。

但是，现在我们在对象文字周围有花括号，并且JavaScript将认为这是一个功能块，因此我们将其括在括号中。

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

当然，在这个函数中，我们当然不说state.decks ，而只是说decks 。 而且我们不说state.addingDeck ，而只是说addingDeck 。 现在，我认为您可以看到我们要进行的操作—因为键和属性具有相同的名称，所以我们可以摆脱其中之一，而只需说出decks和addingDeck 。

这是ES6的简化功能。

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

再一次，我们只返回一个对象文字，所以不要忘记那些括号，在内部，我们需要顶部具有的三个属性： addDeck ， showAddDeck和hideAddDeck 。 因此，现在我们有了一个将调度功能映射到侧边栏所需的三个回调的函数。

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

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

因此，在底部，而不是导出边栏，让我们导出对connect()的调用。 我们将向它传递两个参数mapStateToProps和mapDispatchToProps函数，而connect()将返回一个新函数。

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

现在，从该文件实际导出的不是演示性的边栏，而是我们的新容器组件，在此功能之外，我们仍可以将其称为<Sidebar> 。

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

观看完整课程

在整个课程中，“ 使用React和Redux的现代Web应用程序” ，我将向您展示如何开始使用React和Redux构建现代的Web应用程序。

从零开始，您将使用这两个库来构建完整的Web应用程序。 您将从最简单的架构开始，然后逐个功能逐步构建应用程序。 您将学习基本概念，例如工具，缩减器和路由。 您还将学习一些更高级的技术，例如智能和哑组件，纯组件和异步动作。 到最后，您将创建一个完整的抽认卡应用程序，用于通过间隔重复学习。

在此过程中，您将有机会提高您的ES6（ECMAScript 2015）技能，并学习与React和Redux最佳配合的模式和模块！

您还可以通过以下课程来增强对React的了解：

• React Deep Dive：使用Webpack构建React应用
• 使用Flux和React构建微博应用
• 使用React和Firebase构建Wiki
• 单元测试React组件
• 在React中思考：功能组件

翻译自: https://code.tutsplus.com/tutorials/how-to-use-the-react-redux-package--cms-27150