react dva subscriptions 使用教程指南

dva中我们可以在 Model 中实现事件监听， model 中的 subscriptions 相当于一个监听器，可以监听路由变化，鼠标，键盘变化，服务器连接变化，状态变化等，这样在其中就可以根据不同的变化做出相应的处理，在这个 subsriptions 中的方法名是随意定的，每次变化都会一次去调用里面的所有方法，所以一边会加相应的判断。
通过 在model 中添加一个 subscriptions,并且在里面创建一个方法，即可简单快速地使用 subscriptions 方法。

// subscriptions 使用demo
{
    namespace: 'subscriptions-demo',
    state: {},
    subscriptions: {
        setup (action,error) {
            console.log(action);
            console.log(error);
        }
    },
    effects: {},
    reducers: {},
}

在 subscriptions 中可以创建若干方法，命名没有强制要求。在本文中以 setup 举例，实际上修改成 hello、deploy 等名称都无所谓。
这个 setup 函数可以接受接受两个参数，一个是action，另一个是 error ,在代码里面我们把action 打印出来可以看到
action 包含两个方法 dispatch 和 history，所以我们一般都是这样来进行监听

 subscriptions: {
        setup ({dispatch, history}) {
            history.listen(( pathname ) => {
                console.log(pathname)
            })
        }
    },

当然如果不做路由监听，直接这样使用也可以

 subscriptions: {
     onClick ({dispatch}) {
        document.addEventListener('click',() => {   //这里表示当鼠标点击时就会触发里面的dispatch命令，这里的save就是reducers中的方法名
          dispatch (type:"save")
        })
     }),
 },

以上

关注前端技术的小伙伴，欢迎点击扫描下面的二维码加入我建的 「前端开发交流群」，共同交流前沿前端技术。

---

我是空谷，独立产品经理、全栈设计师、全栈工程师。
技术栈为 React/Dva/Umi/Node/Egg/Electron
欢迎扫码加我微信交流，备注来源：优快云