>在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模式的解决方案。 工作流程为：
-
组件调度操作：
组件发出描述状态变化的动作。-
>动作更新商店：
动作被派发到ngrx/store。- >
还原器生成新状态：
还原器功能处理操作和当前状态以产生新状态。-
> 订户对状态变化做出反应：
组件订阅商店并对状态更新做出反应。
>
这种方法分开关注：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中文网其他相关文章！
