DR：在本文中，大数据与数据挖掘，我们将快速复习NgRx的基础知识，并了解NgRx生态系统的更多特性。然后，我们将介绍如何向NgRx应用程序添加Auth0身份验证。您可以在ngrx auth GitHub存储库上访问本教程的完成代码。NgRx：从卑微的开端到一个新的生态系统我记得Rob Wormald，一个有棱角的核心团队成员，在2015年底第一次写ngrx/store。这是一个在Angular中实现Redux的小库(商店.ts是一个包含66行代码的文件！）。再过几年，NgRx就不仅仅是一个简单的库了，它是一个拥有120多个贡献者的完整生态系统！一开始，学习用Redux模式思考，同时还要跟上NgRx的各种结构和片段，大数据分析软件有哪些，这可能是一个挑战。别担心，物联网平台，我们会支持你的。在本文中，我们将快速复习NgRx的概念，并了解其生态系统在去年发生了什么变化。然后，我们将了解身份验证在NgRx中是如何工作的，以及如何将Auth0添加到NgRx应用程序中。我们开始吧！"我正在学习如何向NgRx应用程序添加身份验证。"在推特上留言NgRx基础知识-回顾虽然我们有一个关于使用ngrx/store管理状态和实现Auth0的很好的教程，但是从那时起ngrx发生了很多变化。让我们快速回顾一下没有改变的内容—NgRx和Redux模式的基本概念。State是一个不可变的数据结构，用于描述应用程序部分的当前状态。这可以是在UI或业务逻辑中。状态可以表示一系列不同的事情，从是否显示导航菜单到用户是否登录。您可以通过存储访问该状态。您可以将商店视为应用程序的主大脑。它是一切需要改变的中心。因为我们使用Angular，所以存储是使用RxJS主题实现的，这基本上意味着它既是一个可观察对象又是一个观察者。存储是一个可观察的状态，你可以订阅它，但是它在观察什么呢？商店是行动的观察者。动作是描述状态变化的信息有效载荷。向存储区发送（或分派）操作，这是存储区接收有关如何更新应用程序状态的数据或指令的唯一方式。一个操作有一个类型（比如"addbook"）和一个可选的有效负载（比如一个对象，其中包含了King图书返回的标题和描述）。动作是NgRx应用程序的基础，因此遵循最佳实践很重要。以下是Mike Ryan的ng conf talk Good Action Health的一些专业建议：先写下你的行动。这使您能够在编写过多代码之前计划好应用程序的不同用例。不要重用动作或使用动作子类型。相反，关注清晰而不是简洁。明确你的行动，并使用描述性的行动类型。使用[Login Page]加载用户配置文件和[Feature Page]加载用户配置文件等操作。然后，可以使用reducer中的switch语句以相同的方式修改多个操作的状态。记住：好的行动是一年后你可以阅读的行动，并告诉他们在哪里被派遣。一旦存储接收到更改状态的操作，名为reducer的纯函数将使用这些操作和以前的状态一起计算新状态。如果您对Redux模式的基础知识感到迷茫，我最喜欢的介绍性资源之一是danabramov关于Redux入门的书呆子课程。NgRx更进一步在介绍了基础知识之后，让我们看看本教程需要的NgRx中的一些附加概念。选择器选择器是用于获取简单和复杂状态片段的纯函数。它们可以作为对你商店的查询，让你的生活更轻松。您不必在存储中保留不同的过滤数据版本，而只需使用选择器。例如，要获取当前用户，您需要首先导出以下函数来设置选择器：export const selectAuthUser=（状态：AuthState）=>状态.用户;通常将这些纯函数与特性的reducer函数放在同一个文件中，然后在索引.ts在NgRx注册减速器的文件。例如：// 状态索引.ts//先注册功能选择器。export const selectAuthState=createFeatureSelector（'auth'）；//然后您可以使用该功能选择器来选择一段状态。export const selectAuthUser=创建选择器(选择AuthState，从Auth.selectUser，//从身份验证状态返回用户的纯函数);然后可以在组件或路由保护中轻松使用该选择器：这个用户= 这个。商店。管道（选择(从Auth.selectAuthUser));要了解更多信息，请查看来自ngconf2018关于选择者的演讲，信息大数据，作者是davideast和Todd座右铭。影响Effects（与@ngrx/Effects库一起使用）是将动作连接到副作用或外部请求的地方。Effects可以监听动作，然后执行副作用。然后，该效果可以（可选地）向存储分配一个新操作。例如，如果需要从API加载数据，则可以调度一个load_data操作。该操作可能会触发一个调用API的效果，然后分派一个LOAD_DATA_SUCCESS或LOAD_DATA_FAILURE操作来处理结果。这看起来是这样的：@效果（）装载数据$=这就是行动$.ofType（加载数据）.pipe（switchMap（（）=>{返回this.apiService.getData（）.管道(map（data=>new LOAD_data_SUCCESS（data）），catchError（error=>of（new LOAD_DATA_FAILURE（error））（新加载数据失败（错误）））);});您可以看到，该效果正在监听LOAD_DATA操作，然后调用ApiService获取数据并返回一个新操作。使用effects可以确保您的reducer不包含太多实现细节，并且您的状态不会充满临时混乱。要了解更多信息，请查看托德格言关于使用效果的教程。NgRx示意图关于NgRx最常见的抱怨之一是它需要大量的重复代码来建立一个应用程序和添加新的特性（永远不要说NgRx核心团队成员brandonroberts的"样板"）。这部分是由于NgRx的理念，即专注于清晰而非简洁，并预先加载应用程序架构的工作，以便将来的功能添加变得简单明了。同时，在您编写的代码中可能会有很多重复——为每个新特性添加一个新的reducer、一组操作、效果和选择器。幸运的是，Angular CLI示意图可以帮助您。Angular CLI的原理图是快速生成新代码的蓝图，可以节省大量时间。NgRx有它自己的一套原理图，你可以在编写应用程序时利用它们。这些示意图遵循了最佳实践，减少了许多重复性任务。它们还会自动注册你的特性状态，连接你的效果，并集成到NgModules中。令人惊叹的！NgRx示意图包括：行动集装箱影响实体特性（生成一个动作、减速器和一个效果，并自动连接到一个模块！）减速器商场要开始使用原理图，请首先将其安装到项目中：npm install@ngrx/schematics--保存开发然后，将NgRx示意图设置为CLI配置中的默认值：ng配置cli.defaultCollection@ngrx/示意图完成后，您可以简单地运行CLI命令来生成新的NgRx项。例如，要为应用程序生成初始状态，可以运行：ng generate store--name State--root-m应用程序这将在应用程序的根目录下为您生成一个存储，并将其注册到您的AppModule中。很酷！有关NgRx示意图的更多信息，请查看存储库自述和Vitalii Bobrov的这篇出色的ng conf演讲。向NgRx项目添加身份验证我们了解了NgRx的最新和最棒的技术，所以让我们学习如何在NgRx中实现身份验证。共享身份验证是一个完美的应用程序状态示例。身份验证影响一切，从访问客户端路由、从私有API端点获取数据，甚至是用户可能看到的UI。在所有这些地方跟踪身份验证状态会令人难以置信地令人沮丧。幸运的是，这正是NgRx解决的问题。让我们穿过台阶。（我们将遵循Brandon Roberts在其NgRx的ng conf 2018 talk Authentication中描述的最佳实践。）"我正在学习如何使用示意图、选择器和效果向NgRx应用程序添加身份验证。"在推特上留言我们的示例应用程序我们将使用官方ngrx/platform book collection应用程序的高度简化版本来学习ngrx中认证的基础知识。为了节省时间，大部分应用程序已经完成，但是我们将添加Auth0以通过Auth0登录页面来保护我们的图书收藏。您可以在Auth0博客存储库中访问本教程的代码。要开始使用该应用程序，您需要克隆应用程序，云服务器网站，安装依赖项，并检查"起始点"提交，以便进行后续操作。也可以使用Angular CLI运行应用程序。您可以使用以下命令完成所有这些操作：git克隆https://github.com/auth0-blog/ngrx-auth.gitcd ngrx认证git结帐23c1b25npm安装ng服务您现在可以访问：4200以查看正在运行的应用程序。我们还将利用NgRx示意图来帮助我们在这个应用程序中设置身份验证，所以我已经将它们添加到项目中并将它们设置为默认值。我们的应用程序目前有图书库（在图书文件夹中找到），以及一些基本的NgRx设置已经完成。我们还有AuthModule的最开始。用户家庭公司