导言
现代的前端应用越来越复杂，各种状态管理比较困难，针对这种情况，Redux 应运而生。Redux 是一个可预测的状态容器，它能使应用程序的状态变得可预测和可维护。Redux 配合 React 开发其已经被广泛应用，并且利用便捷的插件 Redux DevTools，Redux 已经可以轻松开发调试。但是，对于 Angular 开发者，Redux 是不是也可以被应用到 Angular6 的开发中呢？本文将介绍如何将 Redux 和 Redux DevTools 集成到 Angular6 应用程序中。
什么是 Redux
Redux 是 JavaScript 应用程序的可预测状态容器。 容器中存储了应用程序的所有状态，并通过简单的规则进行更新。Redux 的核心概念是：
- 状态是单向数据流的。
- 应用程序的状态只能通过分发操作进行修改。
- 状态是不可变的。
这三个概念简化了状态管理的处理，同时带来了高度的可维护性、可预测性和可重用性。 使用 Redux 的潜在好处有：
- 易于管理大型应用程序的状态。
- 易于测试。
- 由于状态集中在一个地方，可以在应用程序中更轻松地实现持久化。
Redux 的基本元素包括 store、reducer 和 action。store 存储了应用程序的状态，reducer 定义了如何修改状态，action 触发 reducer 来修改状态。可将他们描述成如下图：
如何使用 Redux
现在，我们将学习如何在 Angular6 中使用 Redux 插件。 首先，我们需要使用 npm 安装两个主要的依赖项：
npm install --save @ngrx/store npm install --save @ngrx/store-devtools
接下来，我们将 config datastore。创建一个 store 文件夹，然后在这个文件夹里面创建四个文件：app.actions.ts、app.reducers.ts、app.states.ts 和 index.ts。
在 actions.ts 文件中，可以创建各种 action：
-- -------------------- ---- -------
------ - ------ - ---- --------------
------ ---- -------------- -
------- - ------ --- ------
------- - ------ --- -----
-
------ ----- ------- ---------- ------ -
-------- ---- - -----------------------
------------------ -------- ---- --
-
------ ----- ------- ---------- ------ -
-------- ---- - -----------------------
-
------ ---- ---------- - ------- - --------在 app.states.ts 文件中，将创建一个接口以定义状态：
export interface AppState {
data: any;
}在 app.reducers.ts 文件中，使用接口和相应的 reducer 函数定义状态：
-- -------------------- ---- -------
------ - ------ - ---- --------------
------ - -------- - ---- ---------------
------ - --------------- ---------- - ---- ----------------
------ ----- ------------- -------- - -
----- --
--
------ -------- ------------- - ------------- ------- ------------ -------- -
------ ------------- -
---- -----------------------
------ -
---------
----- --------------
--
---- -----------------------
------ ------
--------
------ ------
-
-在应用程序中使用该确定的 store 怎么样？ 打开 app.module.ts，导入存储模块并将其添加到您的 import 数组中：StoreModule.forRoot，例如：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ - ------- - ---- -----------------------
-----------
-------- -
-
---------------------
---- -------
--
-
--
-
--添加了存储模块之后，我们就需要配置 Redux DevTools。
在 app.component.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----- - ---- --------------
------ - ---------- - ---- -------
------ - -------- - ---- ---------------------
------ - ------- - ---- ----------------------
------- --- ------- ----
--------- -------- ------- ------ -
----------------------------- ----
-
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
----- - ------
------ ----------------
------------------- ------ ---------------- -
----- ---------- -------- - -------
-- ---------------------------------------- -
---------------------------------------------------------- -- -
-- ------------- --- ---------- -- -------------------- --- ----------------- -
----------------------- ------------------------------------
-
---
-
---------- - ----------------------- -- ----------------
-
-这里的代码中，因为我们是在 TypeScript 里开发的，所以首先要声明一个 REDUX_DEVTOOLS_EXTENSION 变量。 在构造函数中，我们初始化一个键为‘data’的空状态，同时订阅了 Redux DevTools 状态更新，以便在状态更改时更新我们的主数据。最终，我们从 store 中选择数据并使用 AsyncPipe 获取这些数据。
我们准备好了，开始使用Redux吧！如果您还有疑问，请查看 Girish Patni 的“Angular 6 + ngrx/store + ngrx/store-devtools条形图完全解析”一文。
总结
Redux 是一个完美的状态管理工具，能使前端应用程序状态变得可预测和可维护。 随着 Redux 和 Redux DevTools 插件的引入到Angular6中，它的灵活性和可维护性变得更强。 使用 Redux，您可以更轻松地管理大型应用程序的状态，并更轻松地测试应用程序。 在本文中，我们已经学习了如何使用 Redux 和 Redux DevTools，以便在 Angular6 中构建更好的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65944866eb4cecbf2d8c41e9