什么是 @ngrx/store
在讲解 @ngrx/store 如何使用之前，我们先来了解一下它是什么。
@ngrx/store 是一个适用于 Angular 应用的状态管理库，它采用 Redux 模式来管理应用的状态变化。它提供了一个简单的 API 来获取、更新以及订阅状态的变化。使用 @ngrx/store，您可以轻松跟踪任何应用的状态变化，尤其对于大型复杂的应用程序开发非常有用。
如何使用 @ngrx/store
安装
首先，您需要安装 @ngrx/store 库，您可以通过 npm 命令将其安装到您的应用程序中。
npm install @ngrx/store
安装完成之后，您需要在应用程序的根模块中导入 StoreModule 并配置状态的初始值，例如：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
-----------
-------- -
--------------
-- --------
--------------------- ------ - ---
--
------------- ---------------
---------- ---------------
--
------ ----- --------- --这里默认状态的初始值为 0。
定义状态
接下来，您需要定义应用程序的状态和如何更新状态。为此，您需要定义一个 reducer 函数，该函数接收当前状态和一个操作，然后返回新的状态。例如，假设您的应用程序包含一个计数器，您可以使用以下代码来定义 reducer：
-- -------------------- ---- -------
------ -------- -------------------- - -- ------- ------- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
-这里的 reducer 函数会接收当前状态和一个操作，然后根据操作类型对状态进行更新，最后返回新的状态。
创建 Store 实例
现在，您已经定义了 reducer 函数，接下来您需要创建 Store 实例以实现状态的管理。您可以使用 Store 类来创建 Store 实例，例如：
-- -------------------- ---- -------
------ - ----- - ---- --------------
------ ----- ------------ -
------- -------------------
------------------- ------ ------- ------ ------ --- -
----------- - ----------------------
-
----------- -
--------------------- ----- ----------- ---
-
----------- -
--------------------- ----- ----------- ---
-
-在这里，您创建了一个 Store 实例并关联到了“count”状态。您可以使用 store.select 方法来选择状态中的一部分，并返回一个 Observable 对象，该对象用于订阅状态的变化。您还可以使用 store.dispatch 方法来派发一个操作以更新状态。
订阅状态变化
最后，您需要订阅状态的变化以实现对状态的跟踪和响应。您可以使用 subscribe 方法来订阅状态的变化，例如：
this.count$.subscribe(count => {
console.log('count:', count);
});在这里，每当状态变化时，您会接收到一个新的值，并在控制台中输出该值。这样，您就可以根据状态的变化在应用程序中做出相应的响应。
总结
通过以上的介绍，您应该已经了解了如何使用 @ngrx/store 以及如何定义状态、创建 Store 实例和订阅状态变化。使用 @ngrx/store 可以轻松跟踪应用程序状态的变化，从而更加方便地进行复杂的应用程序开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/ngrx-store