dva
dva 就是一个react的第三方框架 dva就是对redux进行简化
dva实质上 是集成了 react-router+redux+redux-saga 使用简便的语法来进行数据的统一状态管理
创建
-
-
查看版本 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 {
在页面中使用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 {
如何触发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("变了")
}
}
},