React 16 学习笔记(二)Umijs + dva todolist
为使用Ant Design Pro框架做准备 ,通过一个小demo提高下对 umijs和dva的一个理解。
新建项目
创建umidvatodolist目录:
mkdir umidvatodolist
创建项目
cd .\umidvatodolist\
create-umi
? Select the boilerplate type app
? Do you want to use typescript? No
? What functionality do you want to enable? dva
安装依赖
tyarn
在src/pages/下新建list.js
在todolist中构建基本页面结构
import React,{Component,Fragment} from 'react';
class List extends Component{
render()
return (
<Fragment>
<input />
<button>提交</button>
<ul>
<li></li>
</ul>
</Fragment>
)
}
}
};
export default List;
运行看下
yarn start
没有任何问题
新建src/pages/models/data.js
models有点像redux,通过dva可以很方便的对数据进行维护,导出一个{}
export default {
namespace:'todolist',
state:{
inputValue:'',
list:[]
}
}
通过connect连接TODOList组件
dva其实就是对redux进行了一个封装,同样的还是具有mapStateToProps,mapDispatchToProps,
const mapStateToProps = (state) => {
return {
inputValue: state['todolist'].inputValue,
list:state['todolist'].list
}
};
const mapDispatchToProps = (dispatch)=>{
return {
}
};
@connect(mapStateToProps,mapDispatchToProps)
mapStateToProps 在获取state中的数据时,注意格式state[‘namespace’].值,namespace与你定义models中TodoData.js中namespace相同
业务逻辑
业务逻辑主要有三块,第一个是添加数据,第二个是展示数据,第三个是删除数据。
添加数据
1.修改input中值
<input
value={this.props.inputValue}
onChange={(e)=>{this.props.handleChangeInputValue(e)}}
/>
2.mapDispatchToProps中添加action
handleChangeInputValue:e=>{
dispatch({
type:'todo/handleChangeInputValue',
payload:e.target.value
})
},
3.data中添加reducers,这return返回的是state,如果不添加list,将移除state中list
reducers:{
handleChangeInputValue(state,{payload:getValue}){
return {
inputValue: getValue,
list: [...state.list]
}
},
4.通过点击提交到list中
<button onClick={this.props.handleBtnClick}>提交</button>
handleBtnClick:()=>{
dispatch({
type:'todo/add',
})
},
reducer
add(state){
return {
list:[...state.list,state.inputValue],//为list追加数据
inputValue:''//清空input框
}
},
展示数据
通过map方法遍历list,需要指定key值,否则会有错误提示
<ul>
{
list.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
删除数据
使用点击的方式删除数据,添加点击事件
{
list.map((item,index)=>{
return return <li key={index} onClick={this.props.handleDeleteItem.bind(this,index)}>{item}</li>
})
}
handleDeleteItem:(index)=>{
dispatch({
type:'todo/delete',
payload: index
})
}
reducer
del(state,{payload:id}){
state.list.splice(id,1);
return {
...state,
list:[...state.list],
}
}