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("變了")
}
}
},