dva中是使用redux-saga管理redux应用异步操作,saga是是通过generator函数来创建的
例子来源:https://www.yuque.com/ant-design/course/kmmq56—语雀在model中请求服务器数据
Demo.js
import React, { useState , useEffect } from 'react'
import { Card, /*Button */ } from 'antd'
import { connect } from 'dva'
import puzzlecards from '../../models/puzzlecards'
const namespace = 'puzzlecards'
const mapStateToProps = (state) => {
const cardList = state[namespace].data
return {
cardList
}
}
const mapDispatchToProps = (dispatch) => {
return {
onDidMount : () =>{
dispatch({
type: `${namespace}/queryInitCards`
})
}
}
}
//只是语法糖而已 实质上就是react-redux中的connect
//@connect(mapStateToProps) 修饰器只能用于类和类的方法,不能用于函数,因为存在函数提升
function Demo(props){
const [ flag , setFlag ] = useState(1)
useEffect (() =>{
props.onDidMount()
if(flag < 5) setFlag(flag + 1);
console.log(flag)
},[flag])
return(
<div>
{
props.cardList.map(card =>{
return(
<Card key={card.id}>
<div>Q: {card.title}</div>
<div>
<strong>A: {card.body}</strong>
</div>
</Card>
)
})
}
</div>
)
}
export default connect(mapStateToProps,mapDispatchToProps)(Demo)
puzzlecards.js 相当与reducer
import request from '../utils/request' // request 是 demo 项目脚手架中提供的一个做 http 请求的方法,是对于 fetch 的封装,返回 Promise
const delay = ( millisecond ) => {
return new Promise((resolve)=>{
setTimeout( resolve , millisecond)
})
}
export default {
namespace: 'puzzlecards',
state: {
data: [],
counter: 0
},
effects: {
*queryInitCards(_,sagaEffects){
const { call , put } = sagaEffects
const endPointURI = '/dev/posts/1'
const puzzle = yield call(request, endPointURI)
yield put({
type : 'addNewCard',
payload : puzzle
})
// yield call(delay , 3000)
// const puzzle2 = yield call(request,endPointURI)
// yield put({
// type : 'addNewCard',
// payload : puzzle2
// })
}
},
reducers: {
addNewCard(state, { payload : newCard }){
const newCounter = state.counter + 1
const newCardWithId = { ...newCard , id: newCounter }
const newState = JSON.parse(JSON.stringify(state))
const newData = newState.data.concat(newCardWithId)
return{
data : newData,
counter : newCounter
}
}
}
}
config.js加入代理,解决跨域
proxy: {
'/dev': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
pathRewrite: { '^/dev': '' },// 把 dev 重写掉
},
}