react dva subscriptions 使用教程指南

逃离我推掉我的手 2023-06-06 07:48 58阅读 0赞

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(`解释：action 包含两个方法 dispatch 和 history`)，另一个是 error ,在代码里面我们把action 打印出来可以看到  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]  
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")
            })
         }),
     },

本文转载自;https://blog.csdn.net/simplehouse/article/details/89913524

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]: /images/20230601/9bb5a2e1f93d464bab58d5a4cafc5d53.png