dva初步使用笔记

无状态组件用公司的写法完全不会，幸好我旁边还有一位兄弟可以江湖救急啊，虽然师姐也很好就是有点怕她。。。。

搞懂了state的传值，跟react的不一样，还傻傻的以为state可以修改。在models里面初始化所有的state值，然后在controllers接收models值，通过dispatch触发modules里面的异步之类的方法，component里面的组件用props接收state值。

input框要注意value和name

 <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username"
            name='username'
            value={props.userdata.username}
            onChange={props.getValue} />

在controllers里面要这样写

 const getValue=(e)=>{   
        state.userdata[e.target.name]=e.target.value;
        //console.log(e.target.name, e.target.value)
        dispatch({
            type:"login/save",
            payload:{
                ...state  //将obj数据展开
            }
        })   
    }

其中的models里面的save是固定写法，有多少state就存多少

 reducers: {
        save(state, { payload: { userdata = state.userdata, users = state.users } }) {

            return { ...state, userdata, users };
        },

    },

现在想想觉得真的好简单啊，但是那时候我为什么看不懂。。。搞得师姐都抓狂了。。还有的是接口调用我也是够呛！

新建一个文件夹写个api.js

import axios from "axios";
export const ax = axios
//省略......

然后models里面（调用多条数据的写法）

import * as $$ from '../api'
function getUser(){
    return $$.ax.all([
        $$.ax.get('https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists'),
        $$.ax.get('https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists'),
        $$.ax.get('https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists')
    ])
}




effects: {
    *test({payload: {}}, {put,select,call}){
        const state = yeild select(x => x.login);  //选择所在命名空间的数据
        const data = yeils call(getUser);   //调取api数据
        let add = new Array();
        for(let i=0; i<data.length; i++){
            add = add.concat[data[i]]  //将三条数据concat到add中
        }
        state.users = add;   //将数据赋值给state
        yeild put({ type: 'save', payload: { ...state } });  //执行保存方法
        yield put(routerRedux.push('/list'))    //路由跳转设置
    }
}

只调用一个接口的话在api.js里面写

import axios from "axios";
axios.defaults.baseURL = 'https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/';
export const ax = axios

//省略...

然后models里面写

import * as $$ from '../api.js'
function getUser(){
    return $$.request('list', 'post');
}

effects: {
    *test({ payload: {}}, {put,select,call}){
        const state = yeild select(x => x.login);
        const datta = yield call(getUser);
        state.users = data;
        yeild put( { type:'save', payload: { ...state }} );
        yeild put(routerRedux.push('/list'))
    }
}

跳转到List组件用一个antd的表格接收，代码如下

import React from 'react';
import { Table } from 'antd';

const List = (props) => {
    const column = [
      {
          title:"id",
          dataIndex:'id',
          key:'id'
  
      },
      {
          title:"姓名",
          dataIndex:'name',
          key:'name'
          
      },
      {
          title:"年龄",
          dataIndex:'age',
          key:'age'
          
      },
      {
          title:"性别",
          dataIndex:'sex',
          key:'sex'
          
      }
  ]
  return(
      <div>
          <Table 
            columns={column}
            dataSource={props.users}
        />
      </div>
  );

};
export default List;