React 16 学习笔记（二）Umijs + dva todolist

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],
      }
    }