什么是 NgRx？
NgRx 是一个基于 RxJS 的状态管理库，它是 Angular 的官方推荐方案之一。它的核心思想是将应用程序的状态存储在一个单一的、不可变的状态树中，并使用纯函数来处理状态的变化。这种方式可以让我们更容易地理解应用程序的状态变化，并且更容易进行调试和测试。
为什么要使用 NgRx？
NgRx 和 Redux 一样，都是用来管理应用程序状态的。但是，NgRx 在 Angular 中的使用会更加方便，因为它可以利用 Angular 的依赖注入机制来管理应用程序的状态。此外，NgRx 还提供了一些便利的工具和中间件，可以帮助我们更加轻松地管理应用程序的状态。
NgRx 的核心概念
Actions
Actions 是一个简单的对象，它描述了应用程序中发生的事件。它们通常包含一个类型和一些可选的数据。例如：
{
type: 'ADD_TODO',
payload: { text: 'Buy milk' }
}Reducers
Reducers 是纯函数，它们接收一个旧的状态和一个 action，并返回一个新的状态。例如：
function todoReducer(state: Todo[], action: Action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
default:
return state;
}
}Store
Store 是一个单一的、不可变的状态树，它包含了整个应用程序的状态。我们可以通过 dispatch 一个 action 来更新它的状态。例如：
const store = createStore(todoReducer);
store.dispatch({ type: 'ADD_TODO', payload: { text: 'Buy milk' } });Effects
Effects 是一种中间件，它可以用来处理异步操作，并将它们转换为 actions。例如：
-- -------------------- ---- -------
-------------
----- ----------- -
---------
---------- - -------------------
---------------------
------------ -- -----------------------------
--------- -- -- ----- ------------ -------- - ----- - ---
--
-在 Angular 中使用 NgRx
下面是一个简单的例子，展示了如何在 Angular 中使用 NgRx：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ ------ - ---- --------------
------ - ---------- - ---- -------
------ - ---- - ---- ---------
------ - ------- - ---- -----------------
------ - ----------- - ---- -------------------
------------
--------- -----------
--------- -
----
--- ----------- ---- -- ------ - --------- --------- -------
-----
------ --------------------- --
------- ----------------------- -------------
-
--
------ ----- ------------ -
------- -------------------
-------- -------
------------------- ------ ------- ------ ------ --- -
----------- - --------------------------------
-
--------- -
----------------------------- ----- ------------ ----
------------ - ---
-
-在上面的代码中，我们首先定义了一个 AppComponent，它包含了一个输入框和一个按钮，用户可以通过它们来添加新的 todo。我们通过 store.pipe(select(selectTodos)) 来获取 todo 列表，并在模板中使用 *ngFor 来展示它们。
当用户点击 "Add Todo" 按钮时，我们会调用 this.store.dispatch(addTodo({ text: this.newTodo })) 来将新的 todo 添加到 store 中。注意，我们使用了一个 action creator 函数来创建一个 ADD_TODO action。这个函数会返回一个包含 type 和 payload 的对象。
最后，我们在模板中使用 [(ngModel)] 来绑定输入框的值，并在添加 todo 后将它清空。
总结
NgRx 是一个非常好的状态管理库，它可以帮助我们更加轻松地管理应用程序的状态。如果你正在使用 Angular，那么我建议你使用 NgRx 来替代 Redux。在使用过程中，你会发现它更加容易上手，并且提供了更多的便利工具和中间件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d6b5821886fbafa4459f5d