在前端开发中，数据的状态管理一直是一个比较麻烦的问题。尤其是 React 和 Angular 这样的前端框架，需要更加专业的状态管理工具来帮助开发者更好地管理应用状态。虽然 Redux 和 NgRx 是目前比较流行的状态管理工具，但其学习曲线较为陡峭，难以上手。因此，本文将介绍一个轻量级的状态管理工具 —— ngrx-store-simplr。
什么是 ngrx-store-simplr
ngrx-store-simplr 是一个简化版的 NgRx 状态管理库，其目的是为了让开发者更加容易地管理数据的状态。ngrx-store-simplr 提供了一个简单的 API，并且没有过多的附加功能，使得开发者在使用的时候不会感到过于复杂。
ngrx-store-simplr 的使用
在开始使用 ngrx-store-simplr 之前，需要先安装并引入它，这可以通过 npm 来完成：
npm install ngrx-store-simplr
而后，我们需要在 Angular 应用中引入它：
import { StoreSimplrModule } from 'ngrx-store-simplr';
@NgModule({
imports: [
StoreSimplrModule
]
})接下来，就可以开始在组件中使用 ngrx-store-simplr 了。
例如，我们现在有一个名为 TodoList 的组件，需要管理该应用的 items 状态：
-- -------------------- ---- -------
------------
--------- ----------------
--------- -
-------- ---------
----
--- ----------- ---- -- --------------------
-----
------ --------------------------
------- ----------------------- -------------
-
--
------ ----- ----------------- -
------ -------- - ---
----------- - ---
--------- -
----------------------------------
---------------- - ---
-
-现在，我们需要使用 ngrx-store-simplr 来管理该数据。首先，我们需要在组件中创建一个 store 实例：
-- -------------------- ---- -------
------ - ----------- - ---- --------------------
------------
---
--
------ ----- ----------------- -
----- - --- -------------
----- -------
--------- -
------ ---
--
---
---
-在上述代码中，我们定义了该 store 的名称为 todo，并默认情况下，该 store 的 items 状态为一个空数组。
接下来，我们需要在组件初始化的时候，从 store 中获取当前的 items 数据：
-- -------------------- ---- -------
------ - ------ - ---- ----------------
------------
---
--
------ ----- ----------------- ---------- ------ -
----- - --- -------------
----- -------
--------- -
------ ---
--
---
---------- -
------------------------------------------ -- ----------- - --------
-
---
-在上述代码中，我们通过 ngOnInit() 生命周期钩子函数来订阅 store 中 items 状态的变化。其中，select() 方法用于选择需要订阅的状态，而回调函数则用于在状态变化时更新组件内的 items 数据。
最后，在添加数据的时候，我们需要使用 dispatch() 方法来通知 store，告诉它需要改变 items 状态的值：
-- -------------------- ---- -------
------ - ------ - ---- ----------------
------------
---
--
------ ----- ----------------- ---------- ------ -
---
--------- -
---------------------------------- - ----- ---------------- ---
---------------- - ---
-
-在上述代码中，我们通过 dispatch() 方法向 store 发送 addTodoItem 操作，并将当前要添加的 item 作为 payload 传递给 store。而 store 会在接收到该操作时，相应地更新 items 状态，并让订阅 items 状态的组件中的回调函数得到执行，从而更新组件内的数据。
总结
在本文中，我们介绍了 ngrx-store-simplr 状态管理库的使用。使用 ngrx-store-simplr 可以让开发者更加轻松地管理数据状态，并减少学习的难度。虽然 ngrx-store-simplr 并不支持 NgRx 一样的复杂流程，但在一些小型的应用程序中，我们可以使用它来处理状态管理的需求。
希望通过本文的介绍，读者们能够对 ngrx-store-simplr 的使用有一个更加详细的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596381e8991b448d6dd5