dva 使用笔记

1. model 与组件

1) . 新建页面

=>src/routrs/demo/demo.js

import React from 'react';
import { connect } from 'dva';
import Demolist from 'components/demolist/demolist';

const demo = ({dispatch,listdata})=>{
  function deleteItem(id){
    dispatch({
      type:'listdata/delete',
      paramId:id,
    });
  }
  function addItem(){
    dispatch({
      type:'listdata/add',
    });
  }
  return (
    <Demolist onDelete={deleteItem} onADD={addItem} listdata={listdata} />
  )
};

export default connect(({listdata})=>({
  listdata,
}))(demo)

2) . 配置路由

=> common/router.js

'/demo': {
      component: dynamicWrapper(app, [], () => import('../routes/demo/demo')),
    },

=>src/router.js

  const demod = routerData['/demo'].component;
  ...
  <Route path="/demo" exact component={demod} />

3) . 新建组件

=>components/demolist/demolist.js

import React from 'react';
import { Table,Button,Popconfirm } from 'antd';
import PropsType from 'prop-types';

const demolist = ({onDelete,onADD,listdata})=>{
  const columns = [{
    title: 'Id',
    dataIndex: 'id',
  },{
    title: 'Name',
    dataIndex: 'name',
  }, {
    title: 'Actions',
    render: (text, record) => {
      return (
        <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
          <Button>Delete</Button>
        </Popconfirm>
      );
    },
  }];
  return (
    <div style={{padding:24}}>
      <Button onClick={()=>onADD()} type="primary">新增数据</Button>
      <Table style={{margin:'24px 0px'}} columns={columns} dataSource={listdata} />
    </div>
  )
};


demolist.PropsType = {
  onDelete:PropsType.func.isRequired,
  onADD:PropsType.func.isRequired,
  listdata:PropsType.array.isRequired,
};

export default demolist;

4) . 定义model

=>models/listdata.js

export default {
  namespace :'listdata',
  state:[],
  reducers:{
    'delete':function(state,{paramId:id}){
      return state.filter(item=>item.id!==id);
    },
    'add':function(state){
      console.log(state)
      state.push({name:'新增数据ddd',id:state.length+1});
      return state.filter(item=>item.id!==0);
    },
  },
}

1. 组件与页面之间的通信

1）. 新建组件

=>components/son/son.js

import React from 'react';
// import {Input} from 'antd';

export default class son extends React.Component {
  render() {
    return <input onChange={this.props.onInputChange}/>;
  }
}

2) . 新建页面

=>routes/demo/parent.js

import React from 'react';
import Son from 'components/son/son';

export default class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      son: "",
    }
  }

  changeHandler(e) {
    this.setState({
      son: e.target.value,
    });
  }

  render() {
    return (
      <div>
        <Son onInputChange={this.changeHandler.bind(this)} />
        <p>这里显示 Son 组件的内容：{this.state.son}</p>
      </div>
    );
  }
}

1. 3.