前言
在前端开发中，有许多常用的工具，其中 npm 无疑是其中非常重要的一个。随着前端技术的不断发展，越来越多的 npm 包被开发出来，其中就包括了一个重要的 npm 包——nginrx。
Nginrx 是一个 Angular 状态管理器。它提供了更加方便简单的 Redux API，使得管理和维护应用状态变得更加容易和简单。
本篇文章就是想带大家深度了解 npm 包 nginrx 的使用方法。
安装 nginrx
在使用 nginrx 之前，首先需要安装它。打开终端，使用如下命令即可安装 nginrx：
npm install --save @ngrx/store
创建 Store
在 nginrx 中，我们需要创建一个 store 来存储我们应用的状态。我们可以通过如下代码来创建一个 Store：
import { StoreModule } from '@ngrx/store';
@NgModule({
imports: [
StoreModule.forRoot({}) // empty object
],
})
export class AppModule { }在上述代码中，我们导入了 StoreModule，并在 AppModule 中进行了注册。同时，我们传入了一个空的对象来创建了一个空的 store。
创建 Reducer
与 Redux 一样，nginrx 的 store 是通过 reducer 来进行管理的。我们可以通过编写 reducer 来更新 store 中的状态。
在 nginrx 中，我们可以使用 createReducer 方法来快速生成一个 reducer。
-- -------------------- ---- -------
------ - -------------- -- - ---- --------------
------ --------- -------- -
------ -------
-
------ ----- ------------- -------- - -
------ --
--
------ ----- -------------- - --------------
-------------
------------- ------- -- -
------ -
---------
------ ----------- - --
--
---
------------- ------- -- -
------ -
---------
------ ----------- - --
--
--
--在上述代码中，我们先定义了应用的状态接口——AppState。接着，我们定义了应用的初始状态——initialState。最后，我们使用 createReducer 方法来创建 reducer，并在其中使用 on 方法来定义 action。在 on 方法中，我们可以通过传入一个函数来对 store 中的状态进行更新。
注册 Reducer
在创建 Reducer 之后，我们需要将其注册到 store 中。
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ - -------------- - ---- -----------------------------
-----------
-------- -
--------------------- -------- -------------- --
--
--
------ ----- --------- - -在上述代码中，我们将 counterReducer 注册到了 store 中，并给其指定了一个名字——counter。
使用 Selector
在 nginrx 中，我们可以使用 Selector 来选择 store 中的状态。
import { createSelector } from '@ngrx/store';
export const selectCount = createSelector(
(state) => state.counter,
(state) => state.count
);在上述代码中，我们使用 createSelector 来创建一个 Selector，并在其中传入两个参数——第一个参数是 store 中需要选择的状态，第二个参数是需要返回的值。
使用 Action
在 nginrx 中，我们使用 Action 来触发状态的改变。
import { createAction } from '@ngrx/store';
export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');在上述代码中，我们使用 createAction 来创建了两个 Action——increment 和 decrement。
在组件中使用 Store
在 nginrx 中，我们可以在组件中使用 Store 来管理状态。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ ------ - ---- --------------
------ - ---------- --------- - ---- -----------------------------
------ - ----------- - ---- ---------------------------------
------------
--------- --------------
------------ ---------------------------
---------- -----------------------------
--
------ ----- ---------------- -
------ - -------------------------------------
------------------- ------ ------ --
----------- -
---------------------------------
-
----------- -
---------------------------------
-
-在上述代码中，我们通过 import 导入了 Store，并在组件中使用了这个 Store。同时，我们还使用了 selectCount 来选择 store 中的状态。最后，我们在组件的方法中使用 dispatch 方法来触发状态的改变。
总结
通过以上的介绍和示例代码，我们可以看到，使用 nginrx 来管理状态变得更加简单和容易。我们可以使用一些简单的方法来创建 store、reducer、selector 和 action，再通过组件中的 Store 将它们联系起来。希望本篇文章对大家有所帮助，相信通过学习 nginrx ，大家可以让自己的前端技能更上一层楼。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005569281e8991b448d35b1