react hooks、dva在model中请求服务器数据

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 重写掉
    },
  }