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>

    )

  }

}