什么是 dva-subscribe
dva-subscribe 是一个用于 dva 的插件，它可以让我们方便地监听 dva 中的 action，并在 action 触发时执行相应的副作用操作。
dva-subscribe 提供了一个简单的 API，可以让我们注册和取消对 action 的监听，以及在监听到 action 后执行相应的回调函数。
安装
在使用 dva-subscribe 之前，我们需要先安装它：
npm install dva-subscribe --save
或
yarn add dva-subscribe
如何使用
使用 dva-subscribe 很简单，我们只需要在 dva 的配置对象中，增加一个 subscriptions 属性，它是一个对象，用于注册监听器：
-- -------------------- ---- -------
------ --- ---- ------
------ ------------- ---- --------------
------ - ------- - ---- -------
------ ------ ---- ---------------
------ - ------- - ---- -------
------ ------------- ---- -------------------------------
------ - -------------- ---------------- - ---- ---------------------
------ -------------------- ---- -------------
------ - ------------ - ---- ----------------
------ ------ ---- -----------
------ -----------------
------ ---------------
-- -- ------- --
----- ------- - ----------------
-- -- ---------- ---
----- -------------- - -----------------------
-- -- --- --
----- --- - -----
-- -- ------- --
--------
-- -- -------
-- ---- ------------------ --- -------------
-- --- --- ----------
--------- -
------- --------------
--
-- -- ----- ---
-- ----- ------------ - ----------
-- ----- ------------------ ------
----------- -
-------
----
--------------------------
---------------
--
-- ----
-- ----- -----------
-------- -
--------------- -------- ---- ---
--
-- -- -----
-------
-- -- ------------- --
-------------- --------------
---
- -------- ------
--
---- -
---------- -- ------ -- -- -
-- ------------------
-- ------------ --- ----------- -- ----------- --- ------------- -
---------- ----- --------------------- -------- - -------- ---- - ---
-
-
-
--
---
-- -- ----
---------------------- -- -
---------------------------------
---
-- ----
-------------------在上面的例子中，我们在 dva 的配置对象中，添加了一个 subscriptions 属性，它的值是一个对象，用于注册监听器。
在这里，我们注册了一个钩子函数到 /user/* 的命名空间中，表示对所有以 /user/ 开头的 action 进行监听。当监听到相关 action 时，我们会重新加载用户信息。
API
dva-subscribe 的 API 相当简单。它只有一个方法，就是 dvaSubscribe，它接收一个参数，一个包含要注册的监听器的对象。具体以对下面的示例为例：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
------ - ------- - ---- -------
-- -- --- ----------------------
----- ------------ - --------------
---- -
-- ---- ------ ---
----------------------- -
--------------- ------------------- ------
-------------------------
--
------------------------ -
--------------- ------------------- ------
------------------------------
-
-
---
-- -- --- ---------
---------------------------注册监听器
你可以在 dva 的配置对象中的 subscriptions 属性中注册监听器：
-- -------------------- ---- -------
----- --- - -----
-------------- --------------
-- ----------
----- -
-- ---- ------ ---
---- -- -- ---
-- ---- ------ ---
-------- ---
-- ---- ------ ---
----- ---------- ---
-- ------------ ------ ---
----- ------- ------ ------- --------- ---
-- ------- --- ------
-- -- ---- ------ ------ - ---------- ------------ ------ - ------- --- -------- --
-------- ----------- ----------- ------- --- -- -
-- ------------ -------- ---- - ------- ----
-- ----- ------------ ------------------------
-- ------------ --- ------------- -- ------------------------ -
----------------------
-
--
--
-- --------
---- -- -- ---
--
--取消监听器
当你不再需要订阅一个 action 后，可以通过调用订阅的 unsubscribe 方法来取消对该 action 的监听：
const subscription = dvaSubscribe({
app: {
'/add'() {}
}
});
// 取消订阅 /add action
subscription.unsubscribe('/add');你也可以同时取消进入到一个命名空间下的多个 action 的监听：
-- -------------------- ---- -------
----- ------------ - --------------
---- -
-------- ---
----------- --
-
---
-- -- --- ------ ---- - ------- ------ ---
------------------------------ ----------如果你要取消针对整个命名空间的多个 action 的监听，可以传递命名空间名来一次性取消其下所有订阅函数：
-- -------------------- ---- -------
----- ------------ - --------------
---- -
-------- ---
----------- ---
----------- ---
--
----- -
-------- ---
----------- ---
----------- ---
-
---
-- -- --- ------------
--------------------------------字符串模板和 arg
在注册监听器时，我们可以使用字符串模板的方式来监听多个命名空间下的多个 action 的触发。同时，我们可以使用 arg 参数来进一步过滤触发条件。
具体来说，我们可以在 action 的命名空间名前使用字符串模板 ${arg} 来匹配多个命名空间；在一个命名空间下，我们也可以使用 @@${arg} 来匹配多个 action。
当这些匹配到的命名空间或 action 被触发时，我们可以通过访问钩子函数中的 arg 参数来进一步过滤触发条件。
例如：
-- -------------------- ---- -------
----- ------------ - --------------
---- -
-- -- ---- ------ ------ - ---------- ------------ ------ - ------- --- -------- --
-------- ----------- ----------- ------- --- -- -
-- ------------ --- ------------- -- ------------------------ -
----------------------
-
-
-
---在上面的代码中，我们使用了字符串模板 ${userInfo} 匹配动态的 arg 参数，在 action 的命名空间中我们使用了 @@user/*，表示匹配 user 命名空间下的所有 action。当 action 触发时，我们会检查 action 的类型是否为 UPDATE，并且 payload 是否包含了 userInfo 属性。如果满足条件，我们将会输出一条日志。
总结
dva-subscribe 可以帮助我们方便地监听 dva 中指定的 action，执行副作用操作。它非常灵活，支持动态参数的绑定，可以帮助我们根据条件来进一步过滤触发事件。如果你正在使用 dva 来构建应用，那么不妨尝试一下 dva-subscribe，它将会成为你的好帮手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d8a81e8991b448db4a3