dva model和组件的实际运用

最新推荐文章于 2021-11-27 12:17:12 发布

原创最新推荐文章于 2021-11-27 12:17:12 发布 · 2.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#dva

前端开发专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何使用DvaJS框架和Ant Design组件库进行高效Web应用开发，包括状态管理、组件渲染及异步数据加载等关键环节。通过具体实例，展示了如何利用DvaJS的model、effects和reducers处理复杂业务逻辑，以及Ant Design在界面设计上的灵活运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运用到的技术

dvaJS
antd Design

./model/nyltest/index.js

import { get } from 'api';
export default {
  namespace: 'nyltest', 
  state: {
    nylName: 'nielonglong',
    nylAge: 22,
    current2: 1,
    total2: 0,
    searchParams: {},
    recipeList: [],
    totalData: {},
  },

  // effects中处理异步函数
  effects: {
    *getRecipeData_nyl({ payload }, {call, put, select}) {
      const { searchParams } = yield select(state => state.testnyl);
      // get 是api.js中封装点的get请求方法
      const data = yield call(get, '接口url', { ...searchParams, ...payload });
      // 保存数据, payload里面的值 更新UI
      yield put({
        type:'save', // save是reducer中的save方法
        payload:{
          recipeList: data.items,
          current2: payload.page,
          total2: data.count,
        },
      });
    }
  },

  // reducers处理同步函数
  reducers: {
    // 同步保存到sate
    save(state, { payload }) {
      console.log({...state, ...payload})
      return {...state, ...payload} //{...变量1, ...变量2} 合并两个对象为一个对象
    }
  },
};

./routes/Nyltest/index.js

import React, { Component } from 'react';
import { connect } from 'dva';
import { columns1, columns2 } from './colums';
import styles from './index.less';
import { Tabs, Button, Card, Row, Col, Table, Input, DatePicker } from 'antd';
const TabPane = Tabs.TabPane;

// 方式1关联model (ES7语法糖)
@connect((state) => ({
  nyltestData: state.nyltest,
}))

export default class Nyltest extends Component{

  constructor(props) {
    super(props)
    this.requestData()
  }
  componentDidMount() {
    let p1 = {name: '张三'}
    let p2 = {age: '男'}
    console.log({...p1, ...p2})
  }

  //
  requestData = (page = 1, per = 3) => {
    console.log('page='+ page, 'per=' + per)
    this.props.dispatch({
      type:'nyltest/getRecipeData_nyl',
      payload: {
        page,
        per
      },
    });
  };

  // 第一个参数p代表当前页, p2代表每页的大小, 形参名字随意取, 但是顺序唯一
  pageFunc = (p, p2) => {
    console.log('p='+p+'p2='+p2)
  }


  render() {
    const { nyltestData } = this.props
    const { nylName, nylAge, recipeList, current2, total2 } = nyltestData;
    return (
      <div style={{background: '#fff'}}>
        <h4>{nylName}</h4>
        <h4>{nylAge}</h4>

        <Tabs defaultActiveKey='1'>
          <TabPane tab='栏目1' key='1'>
            <div>chufang</div>
          </TabPane>

          <TabPane tab='栏目2' key='2'>
            <div>
              <Table columns={columns2}
                     dataSource={ recipeList }
                      pagination={{ current:current2, total: total2, pageSize: 3,  onChange: this.requestData  }}
//                      pagination={{ current:current2, total: total2, pageSize: 3,  onChange: this.pageFunc  }}
/>
                      
            </div>
          </TabPane>
        </Tabs>
      </div>
    )
  }
}
/*

// 方式2关联model 如果用这种方式 class前面需要去掉export default
function mapStateToProps(state) {
  return {
name1: state.nyltest.nylName,
  age1: state.nyltest.nylAge,
  };
}

export default connect(mapStateToProps)(Nyltest);
*/