react redux里请求数据，使用antd表格加分页功能

首先，我们要保证我们的redux已经正常配置好了。

第一步。在actions文件夹里定义了一个方法。

export getLimitData = option => {
  return {
    type: 'GET_LIMIT_DATA',
    payload: post(api.limitData, option)    
    //这里payload属性值 是我封装好了的axios， 这个option是页面传过来的数据
  }
}

第二步：在reducer文件夹里写入

const defaultState = {
  data: [],    //定义一个空数组
   count:1     //这个count是总条数，因为我用了别人的接口，名字方面就别那么在意。
}

export default function (state = defaultState, action) {
  switch (action.type) {
    case 'GET_LIMIT_DATA':
      return {
        ...state,
        data: action.payload.result.list,
        count: +action.payload.result.count
      }

    default:
      return state;
  }
}

第三步：在页面拿数据这里使用了修饰器@

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Table } from 'antd';
import { getLimitData } from '@/actions/home' //从actions拿方法

export default @connect(state => {

return {

data: state.home0428.data,　　　　//再这里拿到数据

count: state.home0428.count　　　　

}

}, {

getLimitData　　　　　　　　　　//引入方法

})

class Home extends Component {

componentDidMount() {

this.props.getLimitData({ limit: 10 })　　//再加载阶段，使用方法并且传入参数

}

//分页index

changePage(current) {　　//点击分页下面的页码，获取到下标

// console.log( current )

this.props.getLimitData({ page: current, limit: 10 })　　//把当前页面，和分页长度传到redux里（page是页码，页码从1开始，不传默认是1　，分页长度最少1，不传默认20 ，）括号里的是我那接口的要求

}

render() {

const columns = [

{

title: '编号',

dataIndex: 'id',

key: 'id',

{

title: '标题',

dataIndex: 'title',

key: 'title',

{

title: '使用',

dataIndex: 'tags',

key: 'tags',

{

title: '图片',

dataIndex: 'thumb',

key: 'thumb',

];

// 表格分页设置

const paginationProps = {

　　showTotal: () => `共${this.props.count}条`,

pageSize: 10,　　　　　　每页显示多少条数据

total: this.props.count,　　//总条数

onChange: (current) => this.changePage(current)　　//动态获取页码

}

const { title, data, count } = this.props

// console.log(count,data)

return (

<div>

<Table

rowKey="id"　　//获取我数据库里的id ，key值必须加

dataSource={data}

columns={columns}

pagination={paginationProps}　　//分页设置

</div>

)

}

react redux里请求数据，使用antd表格加分页功能

猜你喜欢