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