在 Angular 应用中，使用 ngrx 可以实现 store 机制，这是一种基于 Redux 的状态管理模式，可以更好地管理应用的状态，提高应用的可维护性和可测试性。
ngrx 是什么？
ngrx 是一个基于 Redux 的状态管理库，它提供了一种将应用状态存储在一个单一的 store 中的方式。ngrx 中的 store 是一个可观察的对象，它可以订阅状态的变化，从而实现组件之间的通信和数据共享。
ngrx 中的核心概念包括：
- Action：描述状态变化的对象，它包含一个 type 属性和一个可选的 payload 属性。
- Reducer：描述状态变化如何被应用到 store 中的函数。
- Store：应用的状态存储，它可以被订阅以监听状态变化。
- Effect：响应 action 并执行副作用的函数。
在 Angular 中使用 ngrx
在 Angular 中使用 ngrx，需要安装 @ngrx/store 和 @ngrx/effects 两个 npm 包。
npm install @ngrx/store @ngrx/effects --save
安装完成后，可以开始创建应用的 store。
创建 Action
创建一个 action 需要定义一个 type 和一个可选的 payload。
import { createAction, props } from '@ngrx/store';
export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');
export const reset = createAction('[Counter] Reset');
export const setCount = createAction('[Counter] Set Count', props<{ count: number }>());创建 Reducer
创建 reducer 需要定义一个初始状态和一组处理 action 的函数。
-- -------------------- ---- ------- ------ - -------------- -- - ---- -------------- ------ - ---------- ---------- ------ -------- - ---- -------------------- ------ ----- ------------ - - ------ - -- ------ ----- -------------- - -------------- ------------- ------------- ----- -- -- ------ ----------- - - ---- ------------- ----- -- -- ------ ----------- - - ---- --------- ----- -- -- ------ - ---- ------------ ------- - ----- -- -- -- ----- --- --
创建 Store
创建 store 需要将 reducer 注册到 store 中，并可以添加一些中间件，例如 logger 和 devtools。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------- - ---- --------------
------ - ------------- - ---- ----------------
------ - -------------- - ---- --------------------
------ - -------------- - ---- --------------------
-----------
-------- -
--------------------- -------- -------------- ---
---------------------------------------
-
--
------ ----- --------- --创建 Effect
创建 effect 需要定义一个处理 action 的函数，并可以执行一些副作用，例如发起 HTTP 请求。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- ------------- ------ - ---- ----------------
------ - --- - ---- -----------------
------ - ---------- - ---- ----------------
------ - -------- - ---- --------------------
-------------
------ ----- -------------- -
---------- - --------------- --
-------------------
----------------- ---- --------
------ -- ----------------------------
--------- -- ---------- ----- ---
-
--
------------------- --------- -------- ------- ----------- ----------- --
-在组件中使用 Store
在组件中使用 store，需要先将 store 注入到组件中，然后可以使用 select 方法获取状态，使用 dispatch 方法发送 action。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----- - ---- --------------
------ - ---------- ---------- ------ -------- - ---- --------------------
------ - -------- - ---- ----------------------
------------
--------- --------------
--------- -
----------- -- ------ - ----- --------
------- ----------------------------------------
------- ----------------------------------------
------- --------------------------------
------- -------------------------- --------------
-
--
------ ----- ---------------- -
------ - ----------------------------
------------------- ------ ------ --
----------- -
---------------------------------
-
----------- -
---------------------------------
-
------- -
-----------------------------
-
----------- -
--------------------- ----- ---------- ---- ------ ---
-
-总结
使用 ngrx 可以实现 store 机制，将应用的状态存储在一个单一的 store 中，提高应用的可维护性和可测试性。在 Angular 中使用 ngrx，需要创建 action、reducer、store 和 effect，并在组件中使用 select 和 dispatch 方法来获取状态和发送 action。使用 ngrx 可以让我们更好地管理应用状态，提高开发效率，减少 bug 的出现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d7fdd81886fbafa45b1fe4