dva与react hooks的第一个demo

刚开始使用dva最陌生的就是像@connect…等这样的装饰器语法，
后来查询到是我未知的es6的语法，@connect实质上就是react-redux中的connect
因为对function component的形式不熟悉，
即使换成了export default(mapStateToProps)(Demo)后还是报了props not definite的错误，结果发现我的props没有传到函数中。。。

import React, { useState } 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]
	return {
	  cardList 
	}
}

//只是语法糖而已  实质上就是react-redux中的connect
//@connect(mapStateToProps) 修饰器只能用于类和类的方法，不能用于函数，因为存在函数提升
function Demo(props){
	return(
		<div>
			{
				props.cardList.map(card =>{
						return(
							<Card key={card.id}>
								<div>Q: {card.setup}</div>
								<div>
									<strong>A: {card.punchline}</strong>
								</div>
							</Card>
						)
					})
				}
			{/* <div>
				<Button onClick={ addNewCard }> 添加卡片 </Button>
			</div> */}
		</div>
	)
}

export default connect(mapStateToProps,null)(Demo)

models 层的 puzzlecards.js

export default {
  namespace: 'puzzlecards',
  state: [
    { id: 1,
      setup: 'Did you hear about the two silk worms in a race?',
      punchline: 'It ended in a tie',
    },
    {
      id: 2,
      setup: 'What happens to a frog\'s car when it breaks down?',
      punchline: 'It gets toad away',
    },
  ],
};

例子来源https://www.yuque.com/ant-design/course/dsl8ee-----
搭建基于 model 的卡片列表页面