V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
vainly
V2EX  ›  问与答

请问一下 Antd Pro 中的 Protable 的 request 如何使用 model 的 state 数据呢?

  •  
  •   vainly · 2020-06-23 15:28:05 +08:00 · 1063 次点击
    这是一个创建于 1415 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,在学习 antd pro,仿照着 demo 写了个小例子,发现 antd pro 中的 protable 没法直接使用 state 。

    index.tsx
    
    import React, {Component} from 'react';
    import {connect} from 'dva';
    import ProTable  from '@ant-design/pro-table';
    
    import {PageHeaderWrapper} from "@ant-design/pro-layout";
    import {TableListItem} from "@/pages/CountryList/data";
    import {ConnectProps} from "@@/plugin-dva/connect";
    import {StateType} from './model';
    
    export interface CountryProps extends Partial<ConnectProps> {
      countries: StateType
    }
    
    
    class CountryList extends Component<CountryProps> {
      componentDidMount() {
        this.query({});
      }
    
      query(params:any) {
        const { dispatch } = this.props;
        if (dispatch) {
          dispatch({
            type: 'countries/pageQuery',
            payload: {
              ...params
            }
          });
        }
      }
    
      render(){
        const {countries:{data}} = this.props;
        const columns =
          [
            {
              title: '国家名称',
              dataIndex: 'countryName',
            },
            {
              title: '国家代码',
              dataIndex: 'countryCode',
            },
            {
              title: '新增时间',
              dataIndex: 'createTime',
            },
          ];
        return (
          <PageHeaderWrapper>
            <ProTable<TableListItem>
              headerTitle="国家列表"
              rowKey="id"
              toolBarRender={(action, {selectedRows}) => []}
              columns={columns}
              dataSource={data}
              // request={params => fetch(params)}
              rowSelection={{}}
            />
          </PageHeaderWrapper>
        );
      }
    }
    
    // @ts-ignore
    export default connect(({ countries }: StateType) => ({
      countries,
    }))(CountryList);
    
    
    dva model: model.ts
    import {page} from './service';
    import {Effect, Reducer} from "umi";
    import {TableListItem} from './data.d'
    
    export interface StateType {
      data: TableListItem[];
      success: boolean;
      total: number;
      pageSize: number;
      current: number;
    }
    
    export interface CountryModelType {
      namespace: string,
      state: StateType,
      effects: {
        pageQuery: Effect
        query: Effect
      },
      reducers: {
        list: Reducer<StateType>
      }
    }
    
    const Model: CountryModelType = {
      namespace: 'countries',
      state: {
        data: [],
        success: false,
        total: 0,
        pageSize: 0,
        current: 0
      },
      effects: {
        *pageQuery({payload}, {call, put}){
          const resp = yield call(page, payload);
          console.log(`resp:::${JSON.stringify(resp)}`)
          yield put({
            type: 'list',
            payload:  {
              data: resp.result.list,
              total: resp.result.total,
              success: true,
              pageSize: resp.result.pageSize,
              current: resp.result.pageNum,
            }
          })
        },
        *query({payload}, {call, put}) {
          const resp = yield call(page, payload);
          return  {
            data: resp.result.list,
            total: resp.result.total,
            success: true,
            pageSize: resp.result.pageSize,
            current: resp.result.pageNum,
          };
        }
      },
      reducers: {
        list(state, {payload}){
          return {
            ...state,
            ...payload
          }
        }
      }
    }
    
    export default Model;
    
    

    我想着 pretable 的 request 属性能不能直接调用 dispatch 更改 state 值,自动刷新页面。

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   6049 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 03:07 · PVG 11:07 · LAX 20:07 · JFK 23:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.