Umi与Dva结合传递仓库数据

最新推荐文章于 2022-09-18 22:43:49 发布
最新推荐文章于 2022-09-18 22:43:49 发布
阅读量472 收藏
点赞数
分类专栏： 前端开发 umi 文章标签： umi dva 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42224055/article/details/108800149
版权
Dva如何与Umi结合的？

插件

@umijs/plugin-dva

复制model用例：model.ts
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5FetuxT8-1601023883750)(evernotecid://71D33275-2838-4D18-AAF9-EF34ADECB091/appyinxiangcom/30651020/ENResource/p190)]
把interface都删掉
在这里插入图片描述
改名UserModel
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第一步：剪切index.tsx中的data数据到moedel.ts的reducers下
在这里插入图片描述

删掉下面的代码，直接返回data

在这里插入图片描述

第二步：实现connect index.tsx
在这里插入图片描述

在这里插入图片描述

标准的Redux连接方式
在这里插入图片描述
在这里插入图片描述
model.ts少了一个触发的过程

将订阅里面的根目录换成users
在这里插入图片描述
在这里插入图片描述

query异步换成同步
在这里插入图片描述
在这里插入图片描述

出现报错
在这里插入图片描述

值传到了index.tsx，但是mapStateToProps是一个独立函数，函数组件index也是一个独立函数

在这里插入图片描述
在这里插入图片描述

所以要把users传过来
在这里插入图片描述

刷新页面，数据显示成功
在这里插入图片描述

data数据从仓库传过来的

椰卤工程师
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Umi和Dva结合传递仓库数据
x1037490413的博客
11-05 330
首先是网页的url地址users，model里的subscription监听到了url地址，所以dispatch一个type:sava，sava直接找到了reducer里的save方法里，save方法里执行的就是返回data数据，返回的namespace叫users，主页面Index通过connect绑定仓库，且把仓库的namespace:users写到mapStateToProp里，并通过参数传递的方式给到index函数，组件里并赋值给dateSource ...
umi中@umijs/plugin-dva的使用，及实现一套增删改
最新发布
zhaojiaxing123的博客
03-03 949
umi中@umijs/plugin-dva的使用，及实现一套增删改
react-umi-dva的使用
u013611033的博客
01-13 827
用这个玩意,最起码了解react-redux 和 redux相关的东西,不然有点懵逼 开启 @umijs/plugin-dva 引入相关配置信息报错,需要新件models / index 并且暴露出去export default {namespace:'MINGCHENG'} //通过验证后,才会开启, 创建模块 import { Effect, Reducer, Subscription } from 'umi'; import { getHome } from '../server/.
Umi3快速上手（四）
deletGlobal的博客
05-19 4984
写在前面 本人也是近期开始接触的umi3的，看了很多文档，自己也做了些总结，本文也主要借鉴了官方文档，还有一篇语雀上的教程 dva umi3整合 dva 数据流，在 umi@3 中要使用 dva 的功能很简单，只要使用安装 @umijs/plugin-dva 并在 配置文件中开启 dva 配置。 $ yarn add @umijs/plugin-dva # npm install @umijs/plugin-dva --save 如果你是通过脚手架创建的项目，则不用执行上面的步骤！ 在config/con
umi3+dva编程学习资源，自用
06-21
在 umi3 中使用 dva，可以将 dva 的 Model、Reducer、Effect 和 Subscription 与 umi3 的 pages 结合使用，实现更加简洁和高效的开发。 结论 dva 是一个基于 Redux 和 Redux-saga 的数据流方案，它可以简化异步...
umi-dva-antd-mobile：基于umi + dva + antd-mobile快速构建H5 APP应用
02-06
umi-dva-antd-mobile 该项目主要以 + 为一体框架，以为UI组件库，包含完整的前端工程化实践。 部分代码及功能参考于 :clapping_hands:已经支持微信开发，相见分支。 目录结构 |-- config # umi 配置，包含路由，...
umi-dva-demo:umi dva演示
03-28
`umi-dva-demo`项目是一个很好的实例，展示了如何利用`Umi`和`Dva`这两个强大的工具，结合TypeScript，构建一个功能丰富的Web应用。下面我们将深入探讨这个项目的核心知识点。 **Umi** `Umi`是由阿里Alibaba团队...
umi-dva-antd-starter:Umi3.js和Ant Design入门
05-12
umi-dva-antd-starter 开始使用Umi.js和Ant Design。入门安装依赖项。yarn 启动开发服务器。yarn start 精简生产。yarn build 精打细算为发展而建设。yarn dev执照麻省理工学院
umi：umi + dva
02-18
该项目需要使用。工作流程该项目已使用初始化。 遵循是如何使用的快速指南。环境准备安装node_modules ： npm install 或者yarn提供的脚本Ant Design Pro提供了一些有用的脚本，可帮助您快速启动和构建Web项目，代码...
dva和UmiJs结合使用教程：effects，reducer，dispatch
flzt1212的博客
09-18 1736
dva和UmiJs结合使用教程：effects，reducer，dispatch
前端项目中react-umi框架的简单用法
lzfengquan的博客
01-26 6288
做完最近项目目发现umi是个好东西，但是没有用过，（目前写的react项目时原生的写法）现在尝试用umi做个简单的项目页面，如果大家有更好的信息技术可以咱们交流一下共同提高。 umi官网地址 ：https://umijs.org/zh-CN/docs/getting-started dva地址： https://dvajs.com/ 先简单了解一下什么是umi： Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能
umi.js-使用dva(学习笔记)
瓜皮伦的博客
07-13 1640
使用dva 官方插件集 umi-plugin-react 文档：https://umijs.org/zh/plugin/umi-plugin-react.html dva插件和umi整合后，将模型分为两种： 全局模型：所有页面通用，工程一开始启动后，模型就会挂载到仓库 局部模型：只能被某些页面使用，访问具体的页面时才会挂载到仓库 定义全局模型 在src/models目录下定义的js文件都会被看作是全局模型，默认情况下，模型的命名空间和文件名一致。 定义局部模型 局部模型定义在pages文件夹或其子文
前端dvajs与umijs
点点的博客
06-24 4397
一、dvajs 开源地址：https://dvajs.com/ 1.dva dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。 2.特性 易学易用，仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 API el...
使用dva+umi+antd构建页面（一）
可爱的我的博客
04-26 5719
使用dva+umi+antd构建页面 参考地址：https://ant.design/docs/react/practical-projects-cn 首先确保安装npm或者yarn 创建新应用 首先创建应用目录 mkdir myapp && cd myapp 推荐使用 yarn 创建应用，执行以下命令， 如果你坚持用 npm，可执行 npm install -g create...
umi antd跨组件数据共享 快速上手理解与应用
OnTheway
06-01 1390
搜索关键词umi connect 看到了
dva页面传值的方法
Cloud_Lion的博客
04-17 4404
dva页面间传递数据的方法有（假定从页面A传数据给页面B）： 1.model数据共享（共享state数据） 在B的model中的effects中获取A的state，其中a为A的namespace，response 为A的state，如 effects: { *fetchResult({ callback }, { call, put, select }) { ...
umi+dva+antd后台管理系统(4)---展示数据
王阿星的博客
01-09 1136
废话不多说，今天事多，希望标题功能一上午能写完 ，开干！ ok，先修改了一下界面，展示一下我要实现的功能。 如图： 1. antd找了一个table表格 2. 发网络请求填数据 定义一个发请求的方法 //获取商品列表 export const list =()=>{ return instance.GET('/api/detail') } 在componentDi...
使用dva+umi+antd构建页面（二）
可爱的我的博客
04-27 1136
使用dva+umi+antd构建页面（二） 上次基于官网教程可以成功访问页面，并且做出列表页面，本次基于一个新的项目构建页面布局 布局 参考网址：https://ant.design/components/layout-cn/ 在官网选择一种布局选项，覆盖自己src/layouts/index.js中的内容即可 layouts/index.js import React from 'react' ...
umi+dva+antd后台管理系统(1)---开篇搭环境
王阿星的博客
01-06 2295
前段时间刚接触umi和dva，也不敢用脚手架，一步一步创建每一个页面去逐渐解开这对cp的面纱，差不多要写完了，朋友接口的数据出了问题，决定换之前自己写的接口重写，借着重写，记录下每一步，每一个功能如何去实现，之前写的也有记录，但是时间久了全部重新捋一遍不如重新写一遍，再练一遍~ 搭建环境 工具 ：脚手架 create-umi 环境：node v12.9.0 umi 2.12.7 yarn ...
"umi3 dva编程学习资源：深入理解异步函数与Redux数据流
本文为编程学习资源总结，主要涵盖了umi3、dva、JSON转换、异步相关Promise、yield、异步函数、React组件、React生命周期、Redux、Redux-saga、dva基于redux和redux-saga的数据流方案、react-Router和fetch、公共...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

椰卤工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值