什么是 NgRx？
NgRx 是一个用于 Angular 应用程序的状态管理库，它基于 Redux 架构设计。NgRx 可以帮助我们管理应用程序的复杂状态，并使得状态变更的过程可追踪和可预测。
为什么使用 NgRx？
在 Angular 应用程序中，随着应用程序复杂度的增加，状态管理变得越来越困难。在没有状态管理库的情况下，我们需要手动管理各种状态变量，这会导致代码变得难以维护和扩展。而使用 NgRx，我们可以将状态逻辑分离出来，使得代码更加清晰和可维护。
NgRx 的核心概念
Action
Action 表示状态变更的事件，它是一个纯 JavaScript 对象，包含一个 type 属性和一个可选的 payload 属性。Action 用于描述应用程序中发生的事件，比如用户点击某个按钮、从服务器获取数据等。
interface Action {
type: string;
payload?: any;
}Reducer
Reducer 是一个纯函数，它接收当前状态和一个 Action，返回一个新的状态。Reducer 的作用是根据 Action 来更新状态，不会对原有状态进行修改，而是返回一个新的状态。
-- -------------------- ---- -------
-------- -------------- ------ ------- -------- ----- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-Store
Store 是一个管理应用程序状态的容器，它包含一个状态对象和一些方法，比如 dispatch 和 subscribe。Store 用于将 Reducer 和 Action 关联起来，并提供一种统一的方式来管理应用程序状态。
const store = createStore(reducer, initialState);
store.dispatch({ type: 'INCREMENT' });
store.subscribe(() => console.log(store.getState()));Selector
Selector 是一个函数，用于从应用程序状态中获取指定的数据。Selector 可以帮助我们避免直接访问应用程序状态，从而提高代码的可维护性和可测试性。
const getCount = (state: State) => state.count; const count = store.select(getCount);
NgRx 的应用
安装 NgRx
首先，我们需要安装 NgRx 库和相关依赖：
npm install @ngrx/store @ngrx/effects @ngrx/entity
创建 Action
我们先创建一个简单的 Action，用于增加计数器的值：
import { createAction } from '@ngrx/store';
export const increment = createAction('[Counter] Increment');创建 Reducer
接着，我们创建一个简单的 Reducer，用于处理上面定义的 Action：
-- -------------------- ---- ------- ------ - -------------- -- - ---- -------------- ------ - --------- - ---- -------------------- ------ --------- ------------ - ------ ------- - ------ ----- ------------- ------------ - - ------ -- -- ------ ----- -------------- - -------------- ------------- ------------- ------- -- -- ------ ----------- - - --- --
创建 Store
我们使用 StoreModule 来注册我们的 Reducer，并将其注入到应用程序的根模块中：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- --------------
------ - -------------- - ---- --------------------
------ - ------------ - ---- ------------------
-----------
------------- ---------------
-------- -
--------------
--------------------- -------- -------------- ---
--
---------- ---
---------- ---------------
--
------ ----- --------- --使用 Selector
最后，我们可以使用 createSelector 函数来创建一个 Selector，用于从应用程序状态中获取计数器的值：
import { createSelector } from '@ngrx/store';
import { CounterState } from './counter.reducer';
export const selectCount = createSelector(
(state: { counter: CounterState }) => state.counter,
(counter) => counter.count
);使用 Effects
除了上面的 Action、Reducer 和 Selector，NgRx 还提供了 Effects，用于处理副作用（比如从服务器获取数据）。
我们可以使用 createEffect 函数来创建一个 Effect，并将其注入到应用程序的根模块中：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- ------------- ------ - ---- ----------------
------ - --- - ---- -----------------
------ - ---------- - ---- ----------------
------ - ---------- ---------------- - ---- -----------------
-------------
------ ----- ----------- -
---------- - --------------- --
-------------------
------------------
------------ --
--------------------------------
----------- -- ------------------ ----- ---
-
-
-
--
------------------- --------- -------- ------- ----------- ----------- --
-总结
本文介绍了 NgRx 的核心概念和使用方法，包括 Action、Reducer、Store、Selector 和 Effects。使用 NgRx 可以帮助我们管理应用程序的复杂状态，并使得状态变更的过程可追踪和可预测。如果您正在开发一个复杂的 Angular 应用程序，那么 NgRx 是一个非常有用的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657fdaafd2f5e1655dabd3d0