什么是 ngrx-demo-core-toni？
ngrx-demo-core-toni 是一个基于 angular 和 ngrx 的状态管理库，它的设计目的是让前端开发者更方便地使用 redux 核心的概念和功能。
安装
使用 npm 安装 ngrx-demo-core-toni：
--- ------- ------------------- ------
开始使用
在你的组件中引入 ngrx-demo-core-toni：
------ - ----- - ---- ----------------------
------------
--------- ---------------
--------- -
----------- -- ----- --------
------- ------------------------------------------
------- ------------------------------------------
--
--
------ ----- ----------- -
------ -------
------------------- ------ ------- ------ ------ --- --
---------- -
-- -- ----- --
-------------------------- -- -
---------- - ------------
---
-
------------- -
-- ---- ------
--------------------- ----- ----------- ---
-
------------- -
-- ---- ------
--------------------- ----- ----------- ---
-
-这里我们订阅了 store 中 count 属性的变化，并在组件中使用了 count。同时我们还创建了两个按钮来 dispatch increment 和 decrement action。
在组件中使用这个库非常简单，通过这个示例你可以了解到这个库的核心使用方式。
进一步学习
除了上述的基本使用方法以外，ngrx-demo-core-toni 还提供了一些高级特性，比如 middleware 和异步 action。以下将进一步介绍这些特性。
Middleware
middleware 可以在每个 action 被 dispatch 时执行一些操作，比如记录日志、异步请求数据等。
使用 middleware 很简单，只需要将一个 middleware 函数添加到 store 中即可。这里我们创建一个简单的 logger middleware：
----- ------ - ------- ------ -- ------ --------- -- -------- ---- -- - --------------------------- --------------------------- -------- --- ------ - ------------- ----------------- ------- ------------------ ------------------- ------ ------- -- ----- ----- - --- ---------------------- -- ----------
这个 logger middleware 将会在每个 action 被 dispatch 时记录日志。
异步 Action
有时候我们需要发送一些异步的 action，比如调用 API 请求数据，然后再 dispatch action。我们可以使用 redux-thunk 中间件来实现。不过 ngrx-demo-core-toni 中也内置了一个 async middleware 来简化异步操作。
首先我们需要创建一个 async action：
------ -------- ----------- -
------ ---------- --------- -- -
---------- ----- -------------------- ---
----------------------------- -- -
------------------------- -- -
----------
----- ---------------------
-------- -----
---
---
---
--
-这个 async action 发送一个请求，等待结果，然后 dispatch LOAD_USERS_SUCCESS action 来触发 store 的更新。接下来我们需要使用 async middleware 来支持这个 async action：
----- --------------- - ------- ------ -- ------ --------- -- ----- -------- ---- -- -
-- ------- ------ --- ----------- -
------ ---------------------- ----------------
-
------ -------------
--
----- ----- - --- ------- ------ ----- ----------- - ------ -- -- -------------------
----------------------------这里我们创建了一个 asyncMiddleware，它会检查 action 是否是一个函数，如果是，则直接执行这个函数，并将 store 的 dispatch 和 getState 方法传递给它。
总结
ngrx-demo-core-toni 是一个非常好用的状态管理工具，它对于 redux 的核心概念进行了精简和优化，并提供了更方便的使用方式和更少的代码。如果你想要深入学习 redux，或者想要更方便地使用 redux，ngrx-demo-core-toni 是一个很好的选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055b7d81e8991b448d9064