DVA：React框架下的简化Redux与状态管理指南-优快云博客

本文链接：https://blog.youkuaiyun.com/YPX_YGWW/article/details/121843927

dva

dva 就是一个react的第三方框架 dva就是对redux进行简化

dva实质上是集成了 react-router+redux+redux-saga 使用简便的语法来进行数据的统一状态管理

创建

全局下载 npm install -g dva-cli
查看版本 dva -v
cd到指定文件夹下
创建项目 dva new 名字
启动 npm start

路由

1.在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';

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

export default RouterConfig;

import React, { Component } from 'react'
// 1.引用
import {Link} from "dva/router"

export default class topbar extends Component {
    render() {
        return (
            <div>
                {/* 2.使用导航 */}
                <Link to="/">点我去首页</Link>
            </div>
        )
    }
}

编程式

this.props.history.push()

import React, { Component} from 'react'
// 1.引用
import {Link,withRouter} from "dva/router"

class topbar extends Component {
    fun=()=>{
        // 编程式导航
        this.props.history.push("/")
    }
    render() {
        return (
            <div>
                {/* 2.使用导航 */}
                <Link to="/">点我去首页</Link>
                <button onClick={this.fun}>点我去首页</button>
            </div>
        )
    }
}
export default withRouter(topbar)

数据/状态管理

api1 model

model就是用来保存组件的数据与逻辑操作的我们可以把数据独立到model中后器方便管理

1.models文件夹中创建对应的模块文件

// 创建模块
export default {

    namespace: 'example',
  
    state: {

    },
  
    subscriptions: {
     
    },
  
    effects: {
     
    },
  
    reducers: {
     
    },
  
  };

2.在index.js中注册这个模块、

api2 state

1.在model中定义数据

// 创建模块
export default {

    namespace: 'example',
  
    state: {// 定义数据
        name:"xixi",
        age:18
    },
  
    subscriptions: {
     
    },
  
    effects: {
     
    },
  
    reducers: {
     
    },
  
  };

2.在哪里用在哪里引用connect是一个函数当这个函数被调用的时候返回高阶组件

import React, { Component } from 'react'
// 1 引用connect
import {connect} from "dva"
import Tb from "../components/topbar.jsx"
class home extends Component {
    render() {
        return (
            <div>
                {/* 3.使用数据 */}
                home { this.props.state.homem.name}
                <Tb/>
            </div>
        )
    }
}
// 2.使用connect连接数据
export default connect(state=>({state}))(home)

api3 reducers

修改state的数据 reducers中是一个个的函数每个函数都是一个修改的动作i

// 创建模块
export default {

    namespace: 'homem',//命名空间
  
    state: {// 定义数据
        name:"xixi",
        age:18
    },
  
    subscriptions: {
     
    },
  
    effects: {
     
    },
  
    reducers: {//修改

        setname(state,payload){
            return {...state,name:payload.data}
        }
    },
  
  };

在页面中使用dispatch()触发reducers的修改

 fun=()=>{
        // this.props.dispatch({type:"命名空间/reducers的名字"})
        this.props.dispatch({type:"homem/setname",data:"我变了"})
    }

api4 effects

dva中请求数据

1.写在src文件夹下的services文件夹之下

2.在services新建一个文件写入我们自己的请求

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

export function query() {
  return request('http://www.weather.com.cn/data/cityinfo/101320101.html');
}

3.在自己的组件中测试请求引用使用

import React, { Component } from 'react'
// 1.引用
import {query} from "../services/homeapi.js"
export default class shop extends Component {
    componentDidMount() {
        // 2.使用
        query().then((ok)=>{
            console.log(ok);
        })
    }
    
    render() {
        return (
            <div>
                <h1>数据请求</h1>
            </div>
        )
    }
}

上面的请求地址是有跨域问题的

解决跨域

去找到.webpackrc 文件中写入如下内容

{

    "proxy":{
        "/api":{
             "target":"http://www.weather.com.cn",
             "changeOrigin":true,
             "pathRewrite":{
               "^/api":"/"
             }
        }
    }

}

千万不要忘了修改请求地址为 /api 与重启

dva怎么请求异步数据

1.在effect中进行数据的请求发送

import {query} from "../services/homeapi.js"
// 创建模块
export default {

    namespace: 'homem',//命名空间
  
    state: {// 定义数据
        name:"xixi",
        age:18
    },
  
    subscriptions: {
     
    },
  
    effects: {
    //  1.新建一个effect函数用来容纳请求
        // call 就是用来包装请求的  并且返回成功的值
        *demolink({payload},{put,call}){
            // 2.引用请求
            // 3.使用请求
            let data=yield call(query)
            console.log(data)
        }
    },
  
    reducers: {//修改

        setname(state,payload){
            return {...state,name:payload.data}
        }
    },
  
  };

如何触发effects进行异步操作

this.props.dispatch({type:"命名空间的名字/effects的名字"})

import React, { Component } from 'react'
// 1.引用
// import {query} from "../services/homeapi.js"

import {connect} from "dva"
 class shop extends Component {
    // componentDidMount() {
    //     // 2.使用
    //     query().then((ok)=>{
    //         console.log(ok);
    //     })
    // }
    
    fun=()=>{
        // 触发effects
        this.props.dispatch({type:"homem/demolink"})
    }
    render() {
        return (
            <div>
                <h1>数据请求</h1>
                <button onClick={this.fun}>点我请求</button>
            </div>
        )
    }
}
export default connect(state=>({state}))(shop)

3.把请求来的数据通过put（）传递给reducers进行修改

effects: {
    //  1.新建一个effect函数用来容纳请求
        // call 就是用来包装请求的  并且返回成功的值
        // put是用来触发reducers修改的
        *demolink({payload},{put,call}){
            // 2.引用请求
            // 3.使用请求
            let data=yield call(query)
            console.log(data.data.weatherinfo.city)

            // 4我们需要把请求来的数据交给reducers修改state
            // yield put({type:"reducers的名字",data:你传递的数据})
            yield put({type:"setname",data:data.data.weatherinfo.city})
        }
    },

4.新建对应的reducers来进行修改

reducers: {//修改

        setname(state,payload){
            return {...state,name:payload.data}
        }
    },

api5 subscriptions

subscriptions 相当与是一个监听器他可以监听任何程序中的变化比如鼠标键盘服务器等变化只要被监听那么事件触发他就会被执行

 subscriptions: {
        demo(){
            window.onresize=()=>{
                console.log("变了")
            }
        }
     
    },