DR：在这篇文章中，我们将介绍RxJS的基础知识，以及它如何与React应用程序集成来管理状态。我们将构建一个展示GitHub用户信息的演示应用程序。应用程序将使用TailwindCSS进行样式设置，并使用Auth0进行安全保护。我们可以在这里得到密码。反应式程序设计反应式编程可以在许多不同的平台上找到。今天我们将使用它的JavaScript实现。如果您访问ReactiveX站点，您将看到您可以在一长串的语言列表中使用反应式编程。ReactiveX是一个用不同语言实现这种范式的库。有RxPY for Python，RxPHP for PHP，或者RxScala，你猜对了，Scala。每一个都会迎合它的语言，但每个人背后都会有相同的想法。什么是RxJS？RxJS是一个用于反应式编程的库。很酷，那是什么意思？在大多数应用程序中，我们都有数据流。有了RxJS，我们可以通过在幕后实现观察者模式和迭代器模式等模式，使异步编程更容易理解，从而使数据流更有意义。它处理传入的数据，然后执行分配给它的任务。别担心，如果这一切听起来太多了，我们会仔细考虑的。在React中，我们一直在使用Redux或其他方法来处理数据流。让我们来谈谈如果让RxJS来处理我们的数据流会是什么样子。RxJS能帮你管理什么？数据流数据流州除此之外可以把RxJS库看作是一个始终使用观察者和观察者来监听数据的东西。（稍后再详细介绍！）如果没有反应式编程，你必须"唤醒"应用程序："嘿，有一些新数据，你能帮我处理吗？"。对于RxJS，它的意思是："你有什么新数据给我？我准备好了！"RxJS总是在倾听。"RxJS库总是使用观察者和观察者来监听数据。"在推特上留言如何开始使用RxJS在这篇文章中，我们将简要介绍RxJS的基础知识。想学习RXJS5的高级更新吗？阅读这篇伟大的文章，RXJS6：什么是新的和什么改变了？要深入了解RxJS，请访问rxjs.dev.软件或者学习资源.io.让我们看一个RxJS有用的例子。假设我们有一个应用程序，它有一个输入搜索框，用户在其中键入一个名称来搜索用户、帖子等。当用户单击"搜索"时，他们将返回结果。RxJS可以用来处理这个流。RxJS将等待该提示发送回用户的搜索结果，从而创建一个异步事件。RxJS的关键概念-可观察的，观察者，操作符在RxJS中，我们将使用几个关键概念。我们有：可观察的观察员操作员RxJS使用observates来观察传入的数据流或数组，观察者耐心地等待来自Observable的关于如何提供数据功能的信息。可观察的如果我们转到RxJS文档，我们会看到这样的定义：在任意时间内任何一组值的表示。这是RxJS最基本的构建块。来源：RxJS让我们把它分解。正在讨论的值可以是来自数组或任何数据流的数据。在任何情况下，观察值都是用来处理所有类型的数据流的。从某种意义上说，这是中间人。数据通过被观察者传送到观察者的路上。观察员观察者从观测值中获取值，然后使用以下三种方法处理数据：next（）—成功运行时调用什么error（）-如果未成功运行，则进行错误处理complete（）-过程完成为了让观察者从可观测对象接收数据，我们"订阅"了可观测对象。subscribe方法允许从可观察对象中提取数据并传递给观察者。观察者只是一组回调，每种类型的通知都有一个。操作员运算符是我们用来将数据塑造成我们需要的东西。通过将运营商链接在一起，我们能够从进入我们应用程序的数据中准确地操作我们需要的东西。如果我们访问RxJS的官方文档，我们可以看到我们可以使用的大量操作员列表。有些看起来很熟悉或直接，如"地图"或"过滤器"，其他人可能需要更多的解释或理解，如"排气图"。如果我们深入研究这些问题，文档会解释每种方法的作用和使用方法。我们要建造什么今天，我们将构建一个使用GitHub API的认证React应用程序。通过"获取"API的数据，我们将使用该数据流并使用反应式编程来处理这些数据。用户可以输入GitHub用户名，avator和用户名将返回并显示在页面上。设置Auth0凭据在开始构建我们的应用程序之前，让我们先去Auth0.com在我们的仪表板上设置我们的应用程序。在这里，我们将获得我们的客户端ID和其他东西，我们将需要我们的应用程序的身份验证。我们将登录Auth0仪表板。如果您没有帐户，您可以在这里注册一个免费的Auth0帐户或登录到您已经存在的帐户。进入仪表板后，我们将要执行以下步骤：单击+创建应用程序我们将命名我们的应用程序rxjs react app（或任何其他相关名称），选择单页Web应用程序，然后单击创建。一旦创建，点击设置，我们将看到所需的项目列表，域，客户端ID等。我们将返回此页面，因此请保持Auth0仪表板可用。设置应用程序无论我们在哪个操作系统上，我们都要找到我们的命令行。通过导航到我们希望我们的应用程序所在的位置，我们将运行以下命令：npx create react应用程序rxjs react构建完成后，我们将通过运行以下命令导航到该项目：cd rxjs反应在这个命令中，我们可以运行命令：npm启动我们现在可以在网站：3000。必需的库我们需要安装以下库：auth0 js-使用auth0产品react router dom-用于我们应用程序中的路由目的要安装这两个程序，请运行以下命令：npm install—保存auth0 js react router dom我们将看到这些库添加到包.json.在src文件中/索引.js，我们需要使用react router dom，然后将包装在周围。该文件现在应该如下所示：//src公司/索引.js从"React"导入React；从"react-dom"导入ReactDOM；导入'/索引.css';从"./App"导入应用程序；从'./serviceWorker'导入*作为serviceWorker；从"react router dom"导入{BrowserRouter}；ReactDOM.render(, 文档.getElementById（‘根’）；//如果你想让你的应用离线工作并更快地加载，你可以改变//注销（）以在下面注册（）。注意这会带来一些陷阱。//了解有关服务人员的更多信息：https://bit.ly/CRA-PWAserviceWorker.unregister();身份验证文件配置文件文件还记得我们在Auth0应用程序中等待我们的凭据吗？我们去拿那些，这样我们就可以开始使用它们了。在src文件夹中，我们将创建一个新文件夹Auth。在新的src/Auth文件夹中，我们将创建一个名为，配置文件. 在该文件中，src/Auth/配置文件我们需要以下代码：//src/认证/配置文件导出配置={clientID:'您的客户编号'，domain:'您的\u AUTH0_域.auth0.com'，重定向URI:：3000/回拨'};通过导航回我们的Auth0仪表板应用程序"rxjs react app"（或使用过的任何名称），转到"设置"选项卡，我们将看到"Client ID"、"Domain"等配置文件文件。如果我们向下滚动，我们还会看到"允许回调URL"的位置。在那个部分，我们把网址，：3000/回拨。在标题为"允许注销URL"的部分中，我们希望将URL，：3000。一定要通过点击底部的"保存更改"按钮来保存这些更改。在我们的.gitignore文件中，我们将配置文件在列表中。我们不希望这些信息被推送到GitHub。授权js文件通过使用我们刚刚为Auth0应用程序创建的信息，让我们创建一个将使用这些凭据的文件。在src/Auth文件夹中，我们将创建一个文件，授权js.继续获取代码并将其放入该文件中：//src/认证/授权js从0的AuthJS导入；从'./config'导入{config}；类身份验证{auth0=新建auth0.WebAuth({域：配置域,客户端ID:配置客户端ID,重定向URI:配置重定向URI,responseType:'id_令牌'，scope:'openid配置文件'});isAuthenticated（）{return new Date（）.getTime（）{此.auth0.parseHash（（err，authResult）=>{if（err）返回拒绝（err）；如果（！authResult | |！authResult.idToken) {退货拒绝（err）；}本节课（authResult）；解析（）；});})}设置会话（authResult）{此.idToken= authResult.idToken;此.profile= authResult.idTokenPayload;//设置id令牌的过期时间这个过期了= authResult.idTokenPayload.exp*1000个；}注销（）{此.auth0.注销({返回到：'http://localhost：3000英尺，客户端ID:配置客户端ID,});}西伦塔斯（）{返回新承诺（（解决，拒绝）=>{