使用NGRX/Store管理Angular 2应用程序中的状态

>在Angular 2中管理应用程序状态，并使用NGRX/Store：综合指南

>

>本文使用NGRX/Store库（REDUX实现）利用RXJS探讨了Angular 2应用程序中的有效状态管理。 我们将解决共享可变状态的挑战，并证明NGRX/Store如何建立单向数据流架构。 示例应用程序将涉及YouTube视频搜索。

NGRX/Store的关键好处

集中式状态管理：
• 为应用程序状态提供了一个真实的来源，确保了跨组件的一致性。 使用RXJS的REDUX模式
：
• 使用RXJS可观察力实现REDUX架构，启用可预测的状态过渡和反应性编程。 不变状态：通过使用动作和还原器来保持状态不变性，以防止意外副作用。
• >组件解耦：
从状态管理逻辑中分离组件，改善了组件可重复使用性和可检验性。>
• 简化的测试：促进了具有产生可预测输出的纯还原功能的测试。
• >>增强调试：利用Ngrx Store DevTools进行改进的调试和状态变更跟踪。
• >共享可变状态的危险：> 在具有多个相互作用组件的应用中，共享的可变状态会导致不一致和不可预测的行为。 想象一下，多个组件在不协调的情况下修改相同的数据 - 类似于多个用户独立更改共享计算机的操作系统的用户。 在搜索应用程序中共享的可变状态
>

考虑一个带有组件的搜索页面，用于姓名和基于位置的搜索。 如果这些组件直接修改共享搜索对象，则保持一致性变得复杂。 规则可能包括：

空名称字段：清除搜索结果。

>仅名称：按名称搜索。>

>名称和位置：按名称和位置进行搜索。

位置搜索需要坐标（纬度/经度）和半径。

>
• 解决挑战：
• 存在几种方法，但它们通常会导致详细的代码，复杂的测试以及违反单一责任原则的行为。 在组件和服务之间直接传递搜索对象会产生紧密的耦合，并使测试变得困难。 将搜索对象封装在服务中会导致处理多个职责的服务。
• NGRX/Store提供基于Redux模式的解决方案。 工作流程为：
1. 组件调度操作：
组件发出描述状态变化的动作。
2. >动作更新商店：
动作被派发到ngrx/store。
3. > 还原器生成新状态：
还原器功能处理操作和当前状态以产生新状态。
4. > 订户对状态变化做出反应：
组件订阅商店并对状态更新做出反应。
>
这种方法分开关注：NGRX/Store管理状态一致性，而RXJS处理消息传递。



> YouTube搜索示例：

>以下各节将指导您使用NGRX/Store构建YouTube视频搜索应用程序。 完整的代码可在github上找到。

（注意：组件，还原器和与YouTube API集成的详细实现将在此处包含在全长文章中。由于空间约束，我将提供高级概述。 ）

该应用程序将包含：

>

在

• ：定义搜索结果的结构（id，title，缩略图URL）。search-query.model.ts
• ：>带有文本输入的组件，当输入更改时会派遣操作。search-result.model.ts
• ：一个具有基于位置的搜索和半径输入的复选框的组件。search-box.component.ts
• ：>一个简化函数，该功能基于调度操作来更新应用程序状态。proximity-selector.component.ts>
• ： search.reducer.ts
：
• 显示搜索组件和搜索结果的主要应用程序组件。 app.module.ts
集成ngrx/store：
• app.component.ts文件将配置为提供>并包含必要的还原器。 组件将注入
和调度措施。
将订阅商店以更新UI。

结论： NGRX/Store提供了一种可靠，可扩展的解决方案，用于在Angular 2应用中管理应用程序状态。 通过分开关注并促进不可超数，它简化了开发，测试和调试。 这种方法可导致更清洁，更可维护的代码并增强整体应用架构。>

（原始输入的FAQS部分将在此处包含在全长文章中。）

以上是使用NGRX/Store管理Angular 2应用程序中的状态的详细内容。更多信息请关注PHP中文网其他相关文章！