React Dva 操作models中的subscriptions讲述监听

这篇具有很好参考价值的文章主要介绍了React Dva 操作models中的subscriptions讲述监听。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

接下来 我们来看一个models的属性
之前没有讲到的subscriptions

我们可以在自己有引入的任意一个models文件中这样写

subscriptions: {
    setup({ dispatch, history }) {
        console.log(dispatch);
    },
},

React Dva 操作models中的subscriptions讲述监听,react.js,javascript,前端
这样 一进来 这个位置就会触发
React Dva 操作models中的subscriptions讲述监听,react.js,javascript,前端
这里 我们可以写多个

subscriptions: {
    setup({ dispatch, history }) {
        console.log(dispatch);
    },
    mingt({ dispatch, history }) {
        console.log("你好");
    }
},

然后 我们运行后会发现 他们都是可以触发的
React Dva 操作models中的subscriptions讲述监听,react.js,javascript,前端
这里 我们可以用它来监听一些东西 然后触发我们models中的函数
例如

setup({ dispatch, history }) {
  window.onresize = () => {
        dispatch({
            type: "AsynchSchedul/getAsynchSchedulList",
            payload: {
                id: 123
            }
        }).then(res => {
            console.log(res);
        })
    }
},

React Dva 操作models中的subscriptions讲述监听,react.js,javascript,前端
这里 我们监听屏幕变化 window中的onresize事件
然后 我们拖动F12 改变界面宽度 这样 这个事件就会一直触发去请求
React Dva 操作models中的subscriptions讲述监听,react.js,javascript,前端
但是 其实我不建议大家这样去写 因为多次请求性能不好 很容易程序崩溃
但操作一下基本数据 或者特殊需求 就需要你调 接口 那也可以这样去写

我们也可以改成这样

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

运行结果如下
React Dva 操作models中的subscriptions讲述监听,react.js,javascript,前端
老实说 个人感觉这个东西作用并不大 有点鸡肋 知道有这么个东西就好了文章来源地址https://www.toymoban.com/news/detail-633281.html

到了这里,关于React Dva 操作models中的subscriptions讲述监听的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • dva中的model.ts

     module.ts文件 index.ts文件 在后来,我创建了Ant Design Pro 的项目,发现项目里没有umi这个库,所以这个项目里使用models按照上边的写法就失效了。然后去官方文档找解决办法,发现在这里是另一种写法。 这个方法没有connect()的连接。 使用的是 useModel() 首先,说明一下我的目录

    2024年02月16日
    浏览(29)
  • react中使用redux,但是通过useEffect监听不到redux中的数据变化?

    在React中使用Redux并通过useEffect监听Redux中的数据变化时,需要使用 react-redux 库中的 useSelector 钩子来选择需要监听的Redux状态。 useSelector 函数允许您从Redux存储中选择和获取特定的状态。 以下是一种在React组件中使用Redux,并通过useEffect监听Redux中的数据变化的常见方法: 首先

    2024年02月16日
    浏览(49)
  • React Dva项目中.roadhogrc.mock.js直接自动导入mock目录下所有文件方式

    上文 React Dva项目中模仿网络请求数据方法 中,我们书写了Dva项目模拟后端数据的方式 但是 我们.roadhogrc.mock.js中的这个处理其实并不好用 我们还需要一个一个的引入 我们可以直接靠一段代码 这就是一个读流的方式 获取mock目录下的所以文件 然后找出后缀为 .js的文件 全部弄

    2024年02月15日
    浏览(34)
  • 【前端知识】React 基础巩固(三十六)——RTK中的异步操作

    引入RTK中的createAsyncThunk,在extraReducers中监听执行状态 在界面中引入所需的异步操作Action 查看运行结果 extraReducer还可以传入一个函数,函数接受一个builder参数: 查看运行结果,与之前的写法结果一致

    2024年02月15日
    浏览(50)
  • React 中的 ref 如何操作 dom节点,使输入框获取焦点

    .focus() 获取焦点 当用户点击按钮时, handleClick 函数会被调用,从而将焦点聚焦到文本输入框上。 定义一个名为 handleClick 的函数。当按钮被点击时,这个函数会被调用。在函数内部,我们通过 inputRef.current 获取到 inputRef 引用所指向的 DOM 元素,并调用其 focus 方法,将焦点聚

    2024年02月09日
    浏览(46)
  • 【前端知识】React 基础巩固(三十四)——组件中的异步操作及优化

    通过组件的生命周期来完成网络请求,网络请求的异步代码直接放在组件中 通过redux来管理异步网络请求 在store中引入中间件 redux-thunk 构建 fetchHomeMultidataAction ,将原本在组件中的异步请求代码放入到actionCreators.js中 改写原来的category.jsx,派发异步请求的dispatch 查看运行结果

    2024年02月15日
    浏览(69)
  • react 实现监听逻辑

    需求: 在一个页面下有多个子tab 在某些tab 下,或者父节点的数据更新的时候,其他子tab 或者父节点也要同步更新 进程: 正常情况下会把所有用到的数据都移动到父节点,修改行为也都放在父节点 但如果这样的话父节点的数据会非常的多,而且有可能只是某两个子节点的数

    2024年02月09日
    浏览(27)
  • react中使用定义数据并监听其值

    原因:定义了数据,搜索之后可以打印出来数据,但是会延迟得到搜索后的数据。 解决:对定义的数据进行 useEffect 监听,或者还有一个办法是加入定时器 setTimeOut 进行延迟

    2024年02月16日
    浏览(30)
  • React学习时,outlet配置(token判定,页面path监听)

    尽管写过 outlet 路由的配置。 考虑到 token 判定和 路由页 变更,我不了解v6是不是有更详解的做法。 决定调一下配置,期望 在任何页面异步更新时,token 都可以在跳转前 被检测到,防止无 token 跳转发生。 补上404页面( 地址栏 页面不存在时,展示404页面 ) 为 src 文件配置 v6版

    2024年02月11日
    浏览(30)
  • react hooks 中使用 addEventListener 监听事件无法访问到最新的 state 的问题

    如上述代码所示,props.asyncData 变化之后 hasAsyncData 设置为 true,然后滚动页面,handleMove 中的 hasAsyncData 仍然为初始值 false。 所以这时要在 hasAsyncData 变化后 ,重新绑定 addEventListener 事件 useEffect(() = {   }, [hasAsyncData]) 在useEffect中将他监听起来,从新绑定

    2024年01月21日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包