什么是 NgRx？
NgRx 是一个基于 Redux 架构的状态管理库，它可以帮助我们在 Angular 应用中更好地管理状态。它提供了一种可预测的状态管理方式，可以使我们的应用更加可维护和可扩展。
如何在项目中使用 NgRx？
安装 NgRx
在使用 NgRx 之前，我们需要先安装它。可以使用以下命令来安装 NgRx：
npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools --save
创建 State
在 NgRx 中，我们需要先创建一个 State，来定义我们需要管理的状态。在这个例子中，我们创建一个名为 counter 的 State，用于管理一个计数器的值。
export interface CounterState {
value: number;
}创建 Action
在 NgRx 中，我们使用 Action 来描述状态的变化，每个 Action 都有一个唯一的类型和一个可选的负载。
我们创建两个 Action，一个用于增加计数器的值，一个用于减少计数器的值。
import { createAction, props } from '@ngrx/store';
export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');创建 Reducer
Reducer 是一个纯函数，它接收一个 State 和一个 Action，然后返回一个新的 State。在 NgRx 中，我们使用 Reducer 来处理 Action，更新 State。
我们创建一个 Reducer，用于处理 increment 和 decrement Action。
-- -------------------- ---- ------- ------ - -------------- -- - ---- -------------- ------ - ---------- --------- - ---- -------------------- ------ - ------------ - ---- ------------------ ------ ----- -------------- - ---------------------------- - ------ - -- ------------- ------- -- -- ------ ----------- - - ---- ------------- ------- -- -- ------ ----------- - - --- --
创建 Effects
Effect 是一个用于处理异步操作和副作用的类。在 NgRx 中，我们使用 Effect 来处理异步操作，例如从服务器获取数据。
我们创建一个 Effect，用于处理 increment Action，每当 increment Action 被触发时，我们会向服务器发送一个请求，然后在服务器响应之后更新 State。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- ------------- ------ - ---- ----------------
------ - -------- - ---- -----------------
------ - ---------- - ---- ----------------
------ - --------- - ---- --------------------
-------------
------ ----- -------------- -
---------- - --------------- --
-------------------
------------------
----------- -- -----------------------------------
-
--
------------------- --------- -------- ------- ----------- ----------- --
-注册 Store
在 NgRx 中，我们使用 Store 来管理 State。我们需要在应用的根模块中注册 Store，以便整个应用都可以使用它。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- --------------
------ - ------------- - ---- ----------------
------ - -------------- - ---- --------------------
------ - -------------- - ---- --------------------
------ - ------------ - ---- ------------------
-----------
------------- ---------------
-------- -
--------------
--------------------- -------- -------------- ---
----------------------------------------
--
---------- ---
---------- ---------------
--
------ ----- --------- --使用 Store
现在我们已经完成了 NgRx 的设置，可以在组件中使用 Store 来管理 State。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----- - ---- --------------
------ - ---------- --------- - ---- --------------------
------------
--------- -----------
--------- -
------------ -- ------ - ----- -------
------- --------------------------------
------- --------------------------------
--
--
------ ----- ------------ -
------ - ------------------------- -- ---------------------
------------------- ------ ------ --
----------- -
---------------------------------
-
----------- -
---------------------------------
-
-结论
在本文中，我们学习了如何在 Angular11 项目中使用 NgRx。我们了解了 NgRx 的基本概念，包括 State、Action、Reducer 和 Effect。我们还学习了如何使用 Store 来管理 State，并在组件中使用 Store。希望这篇文章能够帮助你更好地理解 NgRx，并在你的项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6759007762956301acd440a5