『Dva』订阅

一、前言

🐤本篇文章是『从零玩转 TypeScript + React 项目实战』系列文章的第 6 篇，主要介绍『Dva』中的订阅

经过上一篇『Dva』异步处理，文章的介绍，了解了下 Model 当中的 Effect，以及知道了我们可以在 Model 中的 Reducer 中做一些同步操作。

还可以再 Model 中的 Effect 当中做一些异步操作，那么了解了这些内容之后，本篇要介绍一下 Model 当中剩余的部分，也就是订阅。

二、Model 中的订阅

在 Model 当中是不是还剩下一个 Subscription：

2.1 什么是 Subscription

Subscription 是什么东西呢？它呢是专门用来做订阅的，做订阅它能做什么订阅呢，这个时候去官方文档中看一下。

文档地址：https://dvajs.xiniushu.com/api/#subscriptions

找到 Dva 文档的 Subscription 了解一下。经过我对文档阅读，发现：

• 它可以监听一个数据源的变化。

• Subscription 会在 app.start() 时，被执行（自动执行！！！）。

自动执行之后我们可以监听什么呢？官方文档中有介绍到可以监听到服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。

都可以在 Subscription 中监听到。

这里我就带着大家来监听一下路由的变化就可以了。

2.2 监听路由变化

对于监听路由的变化呢，其实它已经给我写好了案例，我呢，就找到这个案例，找到官方文档的 Model 模块：

发现右侧有对应的代码，有对应的代码呢，怎么办我就直接将该代码拷贝一下，ctrl + c，ctrl + v 放到我自己的项目中就可以了。

在原有的 homeModel 的 effects 下面加上一个 subscription：

subscriptions: {
    setup({history, dispatch}) {
        // 监听 history 变化，当进入 `/` 时触发 `load` action
        return history.listen(({pathname}) => {
            if (pathname === '/') {
                dispatch({type: 'load'});
            }
        });
    },
},

subscriptions 会在 app.start 的时候自动来执行 subscriptions 中所有的函数：

我的代码当中 subscriptions 里面我是不是只定义了一个函数，dva 会给每一个函数传参，传递一个对象，我们呢，就可以从这个对象中解构一些内容供我们自己使用。

这里呢就是解构了一个 history 与 dispatch，解构出了 history 之后怎么办，接下来就可以监听一个 history 的一个变化，监听变化呢，就可以拿到变化之后的路径地址也就是 pathname。

拿到地址之后就可以在回调中做一些事情了，在官方的示例中呢，是派发了一个任务：

我这里不进行派发，我就做一个简单的 document.title 的更新，等于变化之后的路径地址就可以了代码如下：

subscriptions: {
    setup({history, dispatch}) {
        return history.listen(({pathname}) => {
+           document.title = pathname
        });
    },
},

也就是说，只要我当前的路径发生变化，这个时候就会将当前网页的 title 设置为最新的路径。

三、测试

我这里默认是项目已经启动了，打开浏览器访问我们的 dva demo 项目内容，首先就简单的访问首页也就是 / ：

发现此时的浏览器 title 已经变成了一个 / 了，变成 / 之后，比如这个时候我在改一下访问地址，这个时候我在地址后面加上 /home 浏览器的 title 就变成了 /home：

如果将 home 改为 about 呢？是不是就会变为 about：

所以说，我们需要知道的，需要知道的是 subscriptions 中的方法什么时候执行？

是不是只要我调用了 app.start() 就会执行了，自动去执行 subscriptions 中所有的方法，比如说我在 subscriptions 中定义一个 change 的方法，分别在 setup 与 change 中用 console.log 打印一些日志看看：

这个代码就不贴出来了太简单了，目的就是让大家看看这个 subscriptions 的代码是如何执行的。

打开浏览器按下 f12，查看 Console 控制台看看输出内容：

是不是分别输出了 setup被执行了 与 change被执行了，是不是就验证了我的说法，只要定义在 Subscription 中的方法，都会被调用，而且默认调用的时候还会给你传递一个对象，可以从该对象中解构出一些需要使用的内容，比如 history，dispatch。解构 history 你是不是就可以监听 history 的变化，解构出 dispatch，是不是可以在当前的方法做完一些业务逻辑之后再通过 dispatch 派发一些其它任务出去，对吧，好了这个呢就是 subscriptions，就给大家介绍完毕了。

四、总结

通过本文的学习，您可以掌握以下知识点：

• 1.什么是 Subscription：Subscription 是 Dva 中用于订阅数据源变化的功能模块，能够监听服务器 WebSocket 连接、键盘输入、地理位置变化以及路由变化等。它会在 app.start() 调用时自动执行。
• 2.如何使用 Subscription：通过监听路由变化的示例，学习了如何使用 history.listen 方法监听路由地址变化，并在变化时执行相应的业务逻辑（如更新页面标题或派发任务）。
• 3.订阅函数的执行时机：Subscription 中定义的方法会在 app.start() 时自动调用，每个方法会收到一个包含 history 和 dispatch 的参数对象，方便我们根据需要使用相关功能。
• 4.实战应用：在项目中，通过简单的示例实现了基于路由变化的标题更新功能，为更复杂的业务逻辑打下了基础。

🐤如果您觉得本文对您有所帮助，欢迎点赞、收藏或分享，您的支持是我创作的最大动力！

这篇文章的内容就介绍到这里，期待我们下次的相遇。感谢您花时间阅读，如果有任何问题或想法，欢迎在评论区留言。