dva使用

最新推荐文章于 2023-07-16 11:27:55 发布
最新推荐文章于 2023-07-16 11:27:55 发布
阅读量668 收藏
点赞数 1
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucky_yaya_chen/article/details/116431466
版权

 

1、Dva 概念(详细请看：https://dvajs.com/guide/concepts.html)

数据流向

数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State，所以在 dva 中，数据流向非常清晰简明，并且思路基本跟开源社区保持一致（也是来自于开源社区）。

2、配置路由

path 页面路径

models 状态管理，数组形式，可传入多个model文件，非必须配置项。

component 箭头函数形式，指向组件

示例：

3、全局状态管理配置在App.js中

所有的子组件通过children继承App组件的props

import { connect } from 'dva' // 引入connect

connect 关联model与组件，让model中的state与组件关联起来，在组件的props中通过namespace获取、更新state

最低0.47元/天 解锁文章
_耳东晨_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
dva的用法_【React】请问dva中 connect()()的用法。
weixin_42178688的博客
01-13 1812
这段代码是dva的基础代码import React from 'react';import { connect } from 'dva';function IndexPage() {return ( this is a div );}export default connect()(IndexPage);【请问】最后一行这个 connect()(IndexPage) 怎么理解？还要请教：这两个括号...
Umi中的Connect用法
weixin_44785590的博客
07-02 4116
Umi中的connect用法
dva-model-extend:扩展dva模型的实用方法
05-05
dva-model-extend 扩展dva模型的实用方法。 安装 npm install --save dva-model-extend 用法 import modelExtend from 'dva-model-extend' ; const human = { state : { stomach : null , } , reducers : { eat ( state , { payload : food } ) { return { ... state , stomach : food } ; } , } , } ; const benjy = modelExtend ( human , { namespace : 'human.benjy' , state : { name : 'Benjy' , } ,
dvajs的基础介绍及使用
仙途路漫漫其修远兮
06-24 1229
同步操作修改仓库值 异步修改仓库值 正常这样基本上可以使用dva进行项目描写了，后续介绍再更
dva学习--connect数据（model和router）
热门推荐
Visonws的博客
08-25 2万+
Connect 传递model中的数据给组件router     前面的model的demo中定义的example.js中定义了state数据，那么在route的路由组件中怎么获取到这个数据呢？ 通过connect可以传递过来，然后通过this.props就可以访问了，同样也会把dispatch（可以发送请求到model去），history方法传递过来，这样就可以通过组件获取到model保存的...
Dva.js 快速上手指南
fx67ll的博客
10-20 2749
Dva首先是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，Dva还额外内置了和fetch，所以也可以理解为一个轻量级的应用框架。在我目前的项目中，更多是使用数据状态管理的功能，他在我司的fish框架中做了内嵌，在主流的React开发框架UMI中也做了内嵌适配，使用起来非常方便快速。Dva设计的目的就是简化元素，降低难度，让你不用管他怎么实现的，我们按照默认的这个规则去写就可以state: {id: '',},// 所有effect前必须要加 *}
dva的入门
silence_1210的博客
07-03 481
node -v => v11.1.0 1.执行：安装cli npm i dva-cli -g 报错 2.报错：Unexpected end of JSON input while parsing near ‘…perties",“version”:"7’ 3.执行：npm cache clean -force 4.命令：npm i dva-cli -g 成功 5.创建新项目 dva ...
dva
03-05
在本文中，我们将深入探讨DVA的核心概念、工作原理以及如何使用DVA进行开发。 ### 1. DVA简介 DVA源自于"Dynamic Virtual Application"的缩写，它将React的状态管理工具Redux和路由库React-Router进行了高度集成，...
AWS DVA-C02样题
06-21
【AWS DVA-C02样题】是针对亚马逊AWS Certified Developer - Associate认证考试的一个学习资源。这个认证旨在验证开发者在使用Amazon Web Services (AWS) 构建和部署应用程序的能力。DVA-C02考试主要涵盖了以下几个...
dva框架入门
06-13
reactjs框架dva之入门，简单描述了dva的构成，语法结构
dva-demo.zip
04-07
【标题】"dva-demo.zip" 是一个包含使用React框架集成DVA库的示例项目的压缩包。这个项目提供了一个实际操作的环境，让你能够学习和理解如何在React应用中运用DVA进行状态管理和数据流控制。DVA是基于Redux和Redux-...
dva用法
userNing的博客
01-13 174
dav用法
dva怎么连接，connect怎么连接
m0_57261384的博客
08-18 937
新建 model} , };namespace表示在全局 state 上的 keystate是初始值reducers等同于 redux 里的 reducer，接收 action，同步更新 state。
DVA学习
过客如期的博客
08-30 2170
一，什么是Dva? 1.由于react专注于ui渲染，功能较为单一。在实际开发过程中往往需要许多库的支持，例如用于控制数据状态的redux和redux-saga，和用于路由控制的react-router。 2.dva 是 React 应用框架，将React-Router + Redux + Redux-saga三个 React 工具库包装在一起，简化了 API，让开发 React 应用更加方便和快捷。 3.Dva = react-router + rudex + redux-saga 二，Dva项目创建 1
dva中连接全局model
weixin_45343326的博客
03-11 2061
这是一个页面组件； import react from 'react' import { connect } from 'dva' // @connect(state => { // const listName = state.ComponentsStore.listName; // }) class Message extends react.Component { ...
dva 用法快速上手
前端精髓
07-16 781
Dva 是一个基于 redux 和 redux-saga 的轻量级前端框架，它简化了 redux 和 redux-saga 的使用，并且内置了 react-router 和 fetch，所以也可以理解为一个集成了 redux、redux-saga、react-router 和 fetch 的框架。总的来说，dva-core 和 dva 的主要区别在于 dva-core 不包含 react-router 和 fetch，所以它更轻量级，更适合于不需要路由和请求功能的场景。创建一个 dva-core 应用。
udp分片报文pcap文件
最新发布
07-18
udp分片报文pcap文件：64kudp大包分成每片658字节总计100片
react中的dva使用
04-05
Dva是一个基于Redux、React、Redux-saga等技术的轻量级框架，用于简化React应用的开发。Dva提供了一些约定和API，可以帮助我们更快速地开发React应用。以下是在React中使用dva的简单步骤： 1. 创建一个基于dva的React应用 使用dva-cli工具创建一个新的dva项目： ``` $ npm install dva-cli -g $ dva new myApp ``` 2. 引入dva和相关依赖 在src/index.js文件中引入dva和相关依赖： ```javascript import dva from 'dva'; import './index.css'; // 1. Initialize const app = dva(); // 2. Plugins // app.use({}); // 3. Model // app.model(require('./models/example').default); // 4. Router // app.router(require('./router').default); // 5. Start app.start('#root'); ``` 3. 编写dva model 在src/models/目录下创建一个新的model文件，例如user.js： ```javascript export default { namespace: 'user', state: { list: [], }, reducers: { save(state, { payload: { list } }) { return { ...state, list }; }, }, effects: { *fetch({ payload }, { call, put }) { const { data } = yield call(queryUsers); yield put({ type: 'save', payload: { list: data, }, }); }, }, }; ``` 这个model定义了一个namespace为'user'的model，包括了state、reducers和effects三个部分。其中reducers用于处理同步操作，effects用于处理异步操作。 4. 注册dva model 在src/index.js文件中注册刚才编写的model： ```javascript import dva from 'dva'; import './index.css'; import user from './models/user'; // 1. Initialize const app = dva(); // 2. Plugins // app.use({}); // 3. Model app.model(user); // 4. Router // app.router(require('./router').default); // 5. Start app.start('#root'); ``` 5. 使用dva connect连接组件和model 在需要使用model的组件中，使用dva提供的connect方法连接组件和model： ```javascript import { connect } from 'dva'; function Users({ dispatch, users }) { function handleClick() { dispatch({ type: 'user/fetch', }); } return ( <div> <h1>List of users</h1> <button onClick={handleClick}>Fetch users</button> <ul> {users.list.map((user, index) => ( <li key={index}>{user.name}</li> ))} </ul> </div> ); } export default connect(({ user }) => ({ users: user }))(Users); ``` 这个组件使用了connect方法连接了'user'命名空间下的state和dispatch到组件的props中。 6. 运行应用 使用npm start命令启动应用： ``` $ cd myApp $ npm start ``` 以上是在React中使用dva的简单步骤，具体使用可以参照dva官方文档和示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值