Dva笔记---kalrry

已于 2022-02-09 06:52:21 修改
阅读量508 收藏
点赞数 1
分类专栏： React 文章标签： javascript 前端 react.js
于 2022-01-15 05:19:27 首次发布
kalrry
本文链接：https://blog.csdn.net/weixin_45406712/article/details/122505603
版权

Dva笔记---kalrry

前言

Win配置记录
Mac配置记录

一、dva简介

dva简化了我们组件之间的数据通信（简化了我们之前在组件传值的时候使用的redux）

通过dva 就可以让我们更好的执行项目中数据传递的一个便捷性

dva=react-router(虽然dva中带有路由功能 可能工作中一般是吧dva和umi配合使用)+redux+redux-saga

简化完成一个redux的闭环 （dva和redux不是一个东西 他是redux的替代产品）

二、redux-saga

redux-saga是在redux中完成异步操纵的一个技术

三、创建

npm install -g dva-cli 全局下载

dva -v 查看版本

cd到指定文件夹下

dva new 项目名 创建项目

npm start 启动项目

四、dva路由

dva中也带路由功能 但是 在实际开发的时候 很多开发者喜欢把umi和dva整合在一起 umi管理路由 dva进行组件传值 各干各的事

1.创建路由组件页面

在src文件夹下的routes文件夹下创建即可

2.配置 在src下找到router.js进行配置

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';
// 1.引用
import Home from './routes/home';
import Phone from './routes/phone';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        {/* 2.配置规则 */}
        <Route path="/home" exact component={Home} />
        <Route path="/phone" exact component={Phone} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;

五、路由导航

声明式–Link

import {Link} from "dva/router"
export default ()=>{
    return (
        <>
            <Link to="/">默认页面</Link>&nbsp;&nbsp;&nbsp;
            <Link to="/home">home</Link>&nbsp;&nbsp;&nbsp;
            <Link to="/phone">phone</Link>&nbsp;&nbsp;&nbsp;
        </>
    )
}

编程式

编程式的方式和原生react的react-router-dom实现路由的方式是一样的

也要使用withRouter来设置不是被路由所管理的页面 具有路由的跳转对象

import {Link,withRouter} from "dva/router"
let Topbar= (props)=>{
    let fun=()=>{
        // 编程式导航
        props.history.push("/phone")
    }
    return (
        <>
            <Link to="/">默认页面</Link>&nbsp;&nbsp;&nbsp;
            <Link to="/home">home</Link>&nbsp;&nbsp;&nbsp;
            <Link to="/phone">phone</Link>&nbsp;&nbsp;&nbsp;
            <button onClick={fun}>点我进行页面的跳转phone</button>
        </>
    )
}
export default withRouter(Topbar)

六、dva-Model

model就是用来存放一个个的小模块 通过模块化的管理 可以弱化 组件数据与组件数据的耦合度

1.在src下的models文件夹下创建属于我们自己的数据模块

// 创建了一个phone组件的状态模块

export default {

    namespace: 'phonem',//命名空间  给当前这个模块起个名字必须写
  
    state: {//管理数据的

    },
  };

2.使用模块

把模块文件在index.js中进行配置引用

import dva from 'dva';
import './index.css';

// 1. Initialize
const app = dva();

// 2. Plugins
// app.use({});

// 3. Model
// app.model(require('./models/example').default);
app.model(require('./models/phonem.js').default);

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');

3.组件内使用配置的模块

在组件内使用connect（）高阶组件 来进行连接

import React, { Component } from 'react'
import Tb from "../components/topbar"
// 1.引用connect   connect是一个高阶组件
import {connect} from "dva"
 class phone extends Component {
    render() {
        return (
            <div>
                <Tb/>
               phone
               {/* 读取模块中的数据 */}
               {/* {this.props.state.命名空间.数据} */}
               {this.props.state.phonem.name}
            </div>
        )
    }
}
// connect是一个方法   只有这个方法被调用的时候才是一个高阶组件
export default connect(state=>({state}))(phone)

七、dva-state

state就是dva中的数据源 把所有的数据都存放在state中

// 创建了一个phone组件的状态模块

export default {

    namespace: 'phonem',//命名空间  给当前这个模块起个名字必须写
  
    state: {//管理数据的
        name:"xixi",
        age:18,
        arr:[1111,2222,3333,4444,5555]
    },
  };

八、dva–reducers

在dva的model中 我们使用reducers可以进行数据的修改操作

reducers中包含的就是一个个的函数 每一个函数就是一个修改的动作

export default {

    namespace: 'homem',
  
    state: {
        name:"xixi",
        age:18
    },
    // 数据修改
    reducers:{
        // 每一个函数就是一个数据的修改动作
        demoa(){

        },
        demob(){

        },
    }
  
  };

1.创建修改

export default {

    namespace: 'homem',
  
    state: {
        name:"xixi",
        age:18
    },
    // 数据修改
    reducers:{
        // 每一个函数就是一个数据的修改动作
        // state 数据源
        // payload 就是外部传递进来的数据
        demoa(state,payload){
            // 在函数中返回一个修改之后的结果
            return {...state,age:666}
        },
        demob(){

        },
    }
  
  };

2.组件中触发这个修改的动作

this.props.dispatch({type:“命名空间的名字/你要调用的reducers的名字”})

import React, { Component } from 'react'
import {connect} from "dva"

class home extends Component {
    fun=()=>{
        // 调用dva中的reducers进行数据的修改
        this.props.dispatch({type:"homem/demoa"})
    }
    render() {
        return (
            <div>
                我是dva---{this.props.state.homem.name}
                {this.props.state.homem.age}
                <button onClick={this.fun}>点我修改age</button>
            </div>
        )
    }
}
export default connect(state=>({state}))(home)

payload的使用

payload就是用来接受调用的时候传递进来的数据

1.传递数据的时候 在dispatch的方法中传递第二个参数

import React, { Component } from 'react'
import {connect} from "dva"

class home extends Component {
    fun=()=>{
        // 调用dva中的reducers进行数据的修改
        this.props.dispatch({type:"homem/demoa"})
    }
    funb=()=>{
        // 我给reducers的payload传递数据
        this.props.dispatch({type:"homem/demob",data:{text:"我是传递的数据"}})
    }
    render() {
        return (
            <div>
                我是dva---{this.props.state.homem.name}
                {this.props.state.homem.age}
                <button onClick={this.fun}>点我修改age</button>
                <button onClick={this.funb}>点我传递payload</button>
            </div>
        )
    }
}
export default connect(state=>({state}))(home)

2.在模块中可以使用payload来进行数据的接收

export default {

    namespace: 'homem',
  
    state: {
        name:"xixi",
        age:18
    },
    // 数据修改
    reducers:{
        // 每一个函数就是一个数据的修改动作
        // state 数据源
        // payload 就是外部传递进来的数据
        demoa(state,payload){
            // 在函数中返回一个修改之后的结果
            return {...state,age:666}
        },
        demob(state,payload){
            // console.log(payload.data)
            return {...state,age:payload.data.text}
        },
    }
  
   
  
  };

九、dva–基本的数据请求

1.在services下 设置我们的请求封装

import request from '../utils/request';

export function query() {
  return request('/api/users');
}
//我们自己的请求
export function apilink() {
  return request('http://localhost:3000/user/list');
}

2.在想使用请求的组件中 引用 使用

import React, { Component } from 'react'
import {connect} from "dva"

// 引用请求封装
import {apilink} from "../services/example.js"
class home extends Component {
    fun=()=>{
        // 调用dva中的reducers进行数据的修改
        this.props.dispatch({type:"homem/demoa"})
    }
    funb=()=>{
        // 我给reducers的payload传递数据
        this.props.dispatch({type:"homem/demob",data:{text:"我是传递的数据"}})
    }
    func=()=>{
        // 请求数据
        apilink().then((ok)=>{
            console.log(ok)
        })
    }
    render() {
        return (
            <div>
                我是dva---{this.props.state.homem.name}
                {this.props.state.homem.age}
                <button onClick={this.fun}>点我修改age</button>
                <button onClick={this.funb}>点我传递payload</button>
                <hr />
                <button onClick={this.func}>点我发送请求</button>
            </div>
        )
    }
}
export default connect(state=>({state}))(home)

当我们运行的时候发现请求会跨域

跨域

在dva中设置跨域 我们在webpackrc的文件中进行设置

写的内容同vue于react的跨域内容 使用proxy来进行跨域解决

{
     "proxy":{ //设置devServe解决跨域问题
            "/api":{
                // 我们需要告诉devserver帮我们解决那个地址的跨域
                "target":"http://localhost:3000/",
                "changeOrigin":true,
                "ws":true,
                // 替换地址
                "pathRewrite":{
                    "^/api":""
                }
            }
        }
}

千万不要忘了 把请求地址换成 /api 重启项目

十、dva — 异步操作方式effects

effect中是一个个的函数 每个函数就是一个异步操作

扩展—es6 Generator函数

Generator 有的人叫做迭代器函数 / 星号函数

通过generator函数 可以让我们在函数执行的时候 控制其内容的内容 走走停停 让函数交出执行权 可以让函数在调用的时候按照我们的需要执行或者暂停

传统的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function fun(){
            console.log(1)
            console.log(2)
            console.log(3)
        }
        fun()
        // 在传统的函数中   只要函数被调用  那么函数中的所有代码
        // 都会从上到下 一次执行一遍
    </script>
</body>
</html>

我现在不想让函数一调用全部都执行 我想让他按照我的命令来执行怎么办？

generator基本概念

可以让我们在函数执行的时候 控制其内容的内容 走走停停 让函数交出执行权 可以让函数在调用的时候按照我们的需要执行或者暂停

要求

1.在生命函数点的时候 在 函数名前面加一个*号 用于区分和普通函数的区别

2.yield 分割线 通过分割线就可以指明我们需要函数在执行中的暂停位置

3.使用next()来执行函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function *fun(){
            console.log(1)
            yield
            console.log(2)
            yield
            console.log(3)
        }
        // console.log(fun())
        // 我们需要使用next()让他走走停停
        let g=fun()
        g.next()//执行
        g.next()//执行
        g.next()//执行
        
       
    </script>
</body>
</html>

dva异步请求数据

是吧数据请求在effect中进行数据请求 然后把请求来的数据交给 reducers进行修改 最终赋值给state

​

1.需要在页面有个事件触发 effects进行异步操作

this.props.dispatch({type:“命名空间的名字/你触发effects的名字”})

import React, { Component } from 'react'
import {connect} from "dva"
class phone extends Component {
    componentDidMount() {
        // 触发effects进行数据请求
        this.props.dispatch({type:"homem/demolink"})
    }
    
    render() {
        return (
            <div>
                <h1>dva数据请求闭环操作</h1>
            </div>
        )
    }
}
export default connect(state=>({state}))(phone)

2.就在模块中创建对应的effects

export default {

    namespace: 'homem',
  
    state: {
        name:"xixi",
        age:18
    },
    // 数据修改
    reducers:{
        // 每一个函数就是一个数据的修改动作
        // state 数据源
        // payload 就是外部传递进来的数据
        demoa(state,payload){
            // 在函数中返回一个修改之后的结果
            return {...state,age:666}
        },
        demob(state,payload){
            // console.log(payload.data)
            return {...state,age:payload.data.text}
        },
    },
    // 进行异步数据的操作
    effects:{
        // 对应的都是一个个的方法（Generator函数）  每个方法都是一个异步数据的操作
        *demolink({payload},{put,call}){

        }
    }
   
  
  };

3.在刚才创建的effect中进行异步操作

// 引用请求封装
import {apilink} from "../services/example.js"
export default {

    namespace: 'homem',
  
    state: {
        name:"xixi",
        age:18
    },
    // 数据修改
    reducers:{
        // 每一个函数就是一个数据的修改动作
        // state 数据源
        // payload 就是外部传递进来的数据
        demoa(state,payload){
            // 在函数中返回一个修改之后的结果
            return {...state,age:666}
        },
        demob(state,payload){
            // console.log(payload.data)
            return {...state,age:payload.data.text}
        },
    },
    // 进行异步数据的操作
    effects:{
        // 对应的都是一个个的方法（Generator函数）  每个方法都是一个异步数据的操作
        *demolink({payload},{put,call}){
            // 先把请求引用进来
            // 使用请求call 用来包裹数据请求 会返回出成功的结果
          let data=yield call(apilink)
          console.log(data)
          
        }
    }
   
  
  };

4.把请求来的数据交给reducers进行state的修改

// 引用请求封装
import {apilink} from "../services/example.js"
export default {

    namespace: 'homem',
  
    state: {
        name:"xixi",
        age:18
    },
    // 数据修改
    reducers:{
        // 每一个函数就是一个数据的修改动作
        // state 数据源
        // payload 就是外部传递进来的数据
        demoa(state,payload){
            // 在函数中返回一个修改之后的结果
            return {...state,age:666}
        },
        demob(state,payload){
            // console.log(payload.data)
            return {...state,age:payload.data.text}
        },
    },
    // 进行异步数据的操作
    effects:{
        // 对应的都是一个个的方法（Generator函数）  每个方法都是一个异步数据的操作
        *demolink({payload},{put,call}){
            // 先把请求引用进来
            // 使用请求call 用来包裹数据请求 会返回出成功的结果
          let data=yield call(apilink)
          console.log(data.data.data)
        //   把请求来的数据交给reducers来修改 我们在effect中调用reducer使用put来触发
          yield put({
              type:"update",//put是调用reducer的  type就是调用的reducer名字
              data:{
                  arr:data.data.data
              }
            })

        }
    }
   
  
  };

5.编写对应的reducer 来进行state的修改

// 引用请求封装
import {apilink} from "../services/example.js"
export default {

    namespace: 'homem',
  
    state: {
        name:"xixi",
        age:18,
        arr:[]
    },
    // 数据修改
    reducers:{
        // 每一个函数就是一个数据的修改动作
        // state 数据源
        // payload 就是外部传递进来的数据
        demoa(state,payload){
            // 在函数中返回一个修改之后的结果
            return {...state,age:666}
        },
        demob(state,payload){
            // console.log(payload.data)
            return {...state,age:payload.data.text}
        },

        // 进行state的数据修改
        update(state,payload){
            return {...state,arr:payload.data.arr}
        }
    },
    // 进行异步数据的操作
    effects:{
        // 对应的都是一个个的方法（Generator函数）  每个方法都是一个异步数据的操作
        *demolink({payload},{put,call}){
            // 先把请求引用进来
            // 使用请求call 用来包裹数据请求 会返回出成功的结果
          let data=yield call(apilink)
          console.log(data.data.data)
        //   把请求来的数据交给reducers来修改 我们在effect中调用reducer使用put来触发
          yield put({
              type:"update",//put是调用reducer的  type就是调用的reducer名字
              data:{
                  arr:data.data.data
              }
            })

        }
    }
   
  
  };

6页面获取数据

import React, { Component } from 'react'
import {connect} from "dva"
class phone extends Component {
    componentDidMount() {
        // 触发effects进行数据请求
        this.props.dispatch({type:"homem/demolink"})
    }
    
    render() {
        return (
            <div>
                {/* 读取数据 */}
                <h1>dva数据请求闭环操作---{this.props.state.homem.arr}</h1>
            </div>
        )
    }
}
export default connect(state=>({state}))(phone)
kalrry
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
dva笔记
Jason_LS的博客
09-10 321
1. dva框架设计初衷 由于React主要是一个视图层框架，在解决参数和数据传递上面有很大的缺陷，只有父子组件之间才能直接传递数据。后来就出现了Redux ...
dva的笔记
weixin_41675013的博客
07-04 236
js文档 ：MDN 框架文档：印记中文 webpack文档 Taro express koa nodejs require和import区别 纯函数 ：输入一定，输出一定 副作用：输入一定，输出不一定 （setTimeout promise ） dva的优点 1.可以将action reducer action-type state写到一个文件中，可以理解为功能a.js 2.reducer不需要state初始化了，dva内部自动帮我们进行了初始化 3.自动监听router的变化
Dva学习笔记
热门推荐
哈工大许政的博客
02-13 2万+
Dva学习笔记 本文是基于Windows 10系统环境，学习和使用Dva： Windows 10 一、dva状态管理state (1) 定义一个model文件 zufang.js // zufang.js export default { // 命名空间，全局唯一 namespace: 'zufang', // 状态管理，存储数据 state: { ...
dva 使用笔记
Wu_shuxuan的博客
07-31 774
1. model 与组件 1) . 新建页面 =&amp;amp;gt;src/routrs/demo/demo.js import React from 'react'; const demo = ()=&amp;amp;gt;{ return &amp;amp;lt;h1&amp;amp;gt;demo is good false&amp;amp;lt;/h1&amp;amp;gt; }; export default demo; 2)
DVA框架之DVA概念学习笔记
yuwuTaTa的博客
09-05 377
此篇学习笔记完全是DVA官网上指南的复刻，旨在提高自己对DVA的熟悉程度 数据流向 数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由器跳转等）触发的，当此类行为会改变数据的时候可以通过dispatch发起一个action时： 如果是同步行为或直接通过Reducers改变State 若是异步行为（副作用）会触发Effects然后流向Reducers，最终改变State 所以，在dva...
AWS DVA-C02样题
06-21
【AWS DVA-C02样题】是针对亚马逊AWS Certified Developer - Associate认证考试的一个学习资源。这个认证旨在验证开发者在使用Amazon Web Services (AWS) 构建和部署应用程序的能力。DVA-C02考试主要涵盖了以下几个...
dva-model-persist:类似redux-persist和dva-redux-persist和工具
05-09
dva-model-persist 软件架构 适用于 dva 项目 Why 之前基于redux-persist@5.*开发的dva-resist-persist，在异步加载model时并不会存贮model的state,所以使用redux的enhancer特性开发这个支持异步model加载的工具 ...
dva-admin-demo.7z
05-15
【标题】"dva-admin-demo.7z" 是一个基于DVA框架构建的后台管理系统示例项目，压缩包内包含了整个项目的源代码。DVA是一个轻量级的JavaScript状态管理库，它基于React和Redux，并集成了Redux-Saga用于处理异步逻辑。...
dva-plugin-cerprocessor:dva插件，用于通用请求效果和reducer
05-02
dva-plugin-cerprocessor dva-plugin-cerprocessor 能做什么 dva-plugin-cerprocessor是dva的一个插件，用来处理统一的请求effect和reducer。当前插件只能用于使用REST API的请求接口使用； 如何使用 在dva的入口...
dva-learn:学习dva框架
05-06
dva-learn 学习dva框架 目录 项目结构说明 ./mock 用来存放mock资源的文件夹 ./public 用来存放资源的文件夹(不会被打包编译，只会被拷贝到dist目录下) ./src/assets 用来存放资源文件的文件夹（会被打包编译） ./...
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' , } ,
006.集成Dva-core到react-native中
黄孝果的博客
04-22 481
安装 yarn add dva-core-ts react-redux yarn add @types/react-redux -D yarn add dva-loading-ts 在models模块下配置 页面所需要的dva数据操作类（例如：home.ts） import { Model, Effect } from 'dva-core-ts' import { Reducer } from 'redux' type HomeState = { num: number } int.
dva用法
userNing的博客
01-13 174
dav用法
21 - Dva 框架使用 3 - 异步操作与模拟网络请求
cyoubo的专栏
12-10 594
文章目录基本要求实现准备涉及概念与基础主要操作步骤实现结果无代码部分说明准备模拟请求数据定义ProdcutModelProductPage组件ProductTool组件ProductContext组件应用总结Dva中的模拟数据容器异步Action的执行业务逻辑的进一步解耦 基本要求 可以从首页跳转至page页面，且在page页面中包含tool和context两个组件 tool实现以下三个功能 向内容列表中添加一个元素 访问静态的测试数据，并更新整个内容列表 访问动态的mock数据，并更新整个内容列表
dva深入浅出
qq_37735199的博客
07-01 1404
dva 一款基于 redux 和 redux-saga 的数据流方案.
dva（ 轻量级的应用框架 ）
weixin_60968779的博客
03-02 2450
dva
Dva 学习笔记
zhengshugan of ideas
06-13 406
React 本身只是一个 的抽象层，使用组件构建 。如果需要开发大应用，还需要解决React 组件有以下几个通信对象React 中向子组件传递信息可以直接通过 传递，例如： 1.2 数据流问题 主流的数据流解决方案有： 2.2 数据流 State 是存储数据的地方，收到 Action 之后会更新数据。View 就是 React 组件构成的 UI 层，从 State 获取到数据之后，渲染成 HTML 页面。只要 State 有变化，View 就会自动更新。Action 是用来描述 UI 层的一个事件 2.
umi3+react+dva 配置request的全局配置(请求拦截与响应拦截)和调用请求
最新发布
weixin_43845137的博客
10-04 1560
【代码】umi3+react+dva 配置request的全局配置(请求拦截与响应拦截)和调用请求。
使用dva脚手架创建antd-design开发环境 并处理跨越 （附 github 源码）
Wu_shuxuan的博客
12-26 5419
dva 是一个基于 React 和 Redux 的轻量应用框架，概念来自 elm，支持 side effects、热替换、动态加载、react-native、SSR 等 安装 dva-cli $ npm install dva-cli -g $ dva -v 0.8.2 创建新应用 $ dva new corsDemo 这会创建 corsDemo 目录，包含项目初始化目录和文件，并提
AWS DVA-C01 开发者助理考试攻略与复习重点
"AWS云开发【DVA-C01 AWS开发者助理级】资格考试资料" AWS Certified Developer - Associate认证是针对AWS云开发者的入门级别认证，旨在验证考生对AWS云服务的理解和应用能力。这个资料包包含的是DVA-C01考试的复习...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

kalrry

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

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

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

打赏作者

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

抵扣说明：

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

余额充值