Angular作为一种MVVM框架，能够使得前端开发与后端沟通的更加智能化，同时它是一种面向对象的编程技术，特别适应面向企业应用的快速开发等需求。随着应用的不断扩大，状态管理的需求变得越来越重要。这时，ngrx/store就提供了一种可预测，不变的方式来处理应用的状态。
本文会详细介绍ngrx/store，包括如何安装和配置，然后通过一个示例来演示ngrx/store的功能。
安装和配置
在使用ngrx/store之前，你需要安装和配置一些依赖，我们默认你已经创建了一个Angular 8应用程序。接下来就是安装依赖：
npm install @ngrx/store @ngrx/effects @ngrx/store-devtools --save
- @ngrx/store:ngRx中心库包含在ngrx/store中。 它为我们提供了命令式范式的状态管理，其中许多应用程序使用，特别是在小型到中型的应用程序中使用。 在这个代码中，我们将把许多有关actions，reducers，effects和selectors的知识添加到reducers文件夹中。 这将是redux的代码部分。
- @ngrx/effects:effects库包含许多设置code-destined 的实用工具。 根据我们想要做的事情，它可以与一些描述更高层次操作的其他文件一起使用。 在这个代码中，我们将创建处理副作用的所有逻辑的effects。这是redux的生命周期和thunks代码部分。
- ngrx/store-devtools:Store DevTools允许您跟踪和调试您的ngrx/store应用程序。 它也可以为你提供多种地前端效果。 我们可以调用在Angular 6 CLI应用程序的代码中添加器。
第二步是在app.module.ts文件顶部添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------- - ---- --------------
------ - ------------- - ---- ----------------
------ - ------------------- - ---- -----------------------
------ - --------- ------------ - ---- -------------
------ - ----------- - ---- ------------------------------
------ - ------------ - ---- ------------------
------ - ---------------- - ---- -----------------------
-----------
------------- - ------------ --
-------- -
--------------
-----------------
----------------------------- - ------------ ---
------------------------------------
----------------------- - -------------------------------- - --
--
---------- ---
---------- - ------------ -
--
------ ----- --------- - -下一步需要我们将这些配置和设置添加到我们的应用中，让我们开始使用基础知识：actions，reducers，effects和selectors。
首先，你可以在App目录中创建一个store目录：
mkdir src/app/store cd src/app/store
在其中，您可以创建协调小部件文件：
~/src/app/store$ touch index.ts ~/src/app/store$ touch actions.ts ~/src/app/store$ touch effects.ts ~/src/app/store$ touch reducers.ts
一个典型的ngrx/store项目看起来如下：
store/ index.ts actions.ts reducers.ts selectors.ts effects.ts
示例
接下来我们将创建一个示例，演示ngrx/store如何使用。假设我们正在开发一个购物车应用，我们将使用ngrx/store跟踪和管理购物车中的商品。
创建Action
为了与ngrx/store集成，您的应用程序需要告诉ngrx/store有关actions的信息。我们将在actions.ts文件中创建我们的第一个action：
-- -------------------- ---- ------- ------ - ------ - ---- -------------- ------ ---- ------------------ - --- - ---------- ----- ------ - ---------- ------- - ------ ----- ---------- ---------- ------ - -------- ---- - ----------------------- ------------------ -------- ------- -- - ------ ----- ------------- ---------- ------ - -------- ---- - -------------------------- ------------------ -------- ------- -- - ------ ---- --------------- - ---------- - --------------
在上述代码中，我们首先定义了一个名为“ProductActionTypes”的枚举对象用于在操作之间添加特殊前缀。首先，我定义了两个不同的操作类型，增加和删除。 在后续的操作中，我们可以使用action来区分要执行的操作。
创建Reducer
接下来，让我们创建一个reducer。 在我们的示例中，我们将使用在购物车中添加和删除商品的reducer。 下面是reducers.ts中的代码：
-- -------------------- ---- -------
------ - ------ - ---- --------------
------ - ------------------- --------------- - ---- -----------------------------
----- ------------ - ---
------ -------- -------------------- - ------------- ------- ---------------- -
------ ------------- -
---- -----------------------
------ ---------- ----------------
---- --------------------------
------ -------------------- -- ------- --- ----------------
--------
------ ------
-
-上述代码中，我们初始化了一个简单的Buy的 constant，然后将其用作默认状态。 我使用了switch语句来掌握每个操作。 在添加操作中，我们将商品增加到列表中； 在删除操作中，我们将商品从列表中彻底删除； 对于默认操作，我们导出默认状态。
创建Effects
ngrx/effects是ngrx/store的一个独立的软件包，用于处理副作用。 副作用指的是应用程序状态之外的任何事情，在我们的示例中，它是处理购物车中的数据：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- -------- ------ - ---- ----------------
------ - ---------- - ---- ------------------
------ - ---- --------- - ---- -----------------
------ - ----------- ------------------ - ---- -----------------------------
-------------
------ ----- --------------- -
---------
------------------ --------------- - -------------------
-------------------------------
------------ ----------- -- ----------------
----------------- -- -------------------------------------------------
--
------------------- --------- -------- ------- ---------------- ---------------- --
-在代码中，First，我实例化了Action流。 在之后的addBuyingProduct$ Observable之前，您会注意到它会buffer减缓过程中的所有可从store调度的ProductActionTypes。
这就是ngrx/effects的作用，必须发送效果以进行异步操作。
创建Selectors
最后，我们可以创建selectors。selectors提供了对store状态中价值的简单访问。 在我们的示例中，我们将使用一个基本的selector，它包含所有列表中的商品：
import { createSelector } from '@ngrx/store';
export const selectShoppingState = state => state.shopping;
export const selectShoppingProducts = createSelector(
selectShoppingState,
shopping => shopping
);在上面的示例中，我们定义了两个selector，一个是用于选择购物车状态的选择器，另一个是用于选择购物车产品的选择器。
在组件中使用
以上就是所有的步骤，我们已经将ngrx/store集成到了我们的应用程序中，并且我们可以在Component中使用它。 让我们在ShoppingCart子组件中使用它：
-- -------------------- ---- -------
------ - ------ ------ - ---- --------------
------ - ------- - ---- -------------------------------
------ - ---------------------- - ---- ---------------------------------------
------ - ----------- ------------- - ---- -----------------------------------
------------
--------- --------------------
------------ ---------------------------------
---------- ----------------------------------
--
------ ----- --------------------- -
-------------- ----------------------
------------------- ------ ------- --------- --------- --- -
------------------ - -------------------------------------------
-
------------------- -------- -
----------------------- ---------------------
-
---------------------- -------- -
----------------------- ---------------------------
-
-在上述代码中，我们使用select选择器从ngrx/store中检索购物车产品，并将其用作UI的Read Method。 在相应的Write方法中，我们使用store调度Update，重新启动购物车。
结论
在本文中，我们了解了ngrx/store的基础知识，以及如何在Angular 8中使用它来管理状态。通过代码示例演示了如何处理典型情况下的异步操作。为了充分利用ngrx/store，一个重要的方面是遵循所有最佳实践。 因此，我们建议您访问ngrx官方文档以了解更多关于ngrx/store的信息和使用方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6701ff1df59b73a932a4a8e2