【React】dva 绑定 State 到 View

最新推荐文章于 2022-09-15 21:08:47 发布

zoe驿鹿

最新推荐文章于 2022-09-15 21:08:47 发布

阅读量1.1k

点赞数

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/webFrontEndDev/article/details/121147418

版权

React 专栏收录该内容

4 篇文章

订阅专栏

mapStateToProps 函数会返回一个对象，用于建立 State 到 Props 的映射关系。state.[namespace] ，也就是说与model的namespace保持一致，否则取值失败返回undefined

DataSync.tsx

import React, { Component } from 'react';
import { message, Row, Col,Spin, Card, Button  } from 'antd';
import { MenuUnfoldOutlined, PlusOutlined } from '@ant-design/icons';
import { connect } from 'dva';
import { PageContainer } from '@ant-design/pro-layout';
import styles from './index.less';
import TableArea from './components/TableArea/index'

interface IProps {
    dispatch: any,
    ListSp: {
        isFetching: boolean;
        tableData: {
            pageNumber: number;
            pageSize: number;
            totalPage: number;
            totalRecord: number;
            list: []
        },
    }
}
interface IState {
    loading: boolean
}

class DataSync extends Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
        loading: false
    }
  }
  componentDidMount() {
    //   console.log(this.props)
    this.props.dispatch({
        type: 'DataSync/handleGetDataSyncList',
        params: {},
    });
  }
  handleUpdateState(params: any) {
    this.props.dispatch({
        type: 'DataSync/changeStoreDatas',
        data: params,
    });
  }
  handleOpenAuditModal() {

  }
  render() {
      const { isFetching, tableData } = this.props.ListSp
      return (
          <>
            <PageContainer title={false}>
            <Spin size="large" spinning={this.state.loading}>
                <Card>
                    <Row className={styles.headArea}>
                        <Col span={12}>
                            <MenuUnfoldOutlined />
                            数据列表
                        </Col>
                        <Button type="primary" icon={<PlusOutlined />}>添加</Button>
                    </Row>
                    <TableArea
                        isFetching={isFetching}
                        tableData={tableData}
                        handleUpdateState={this.handleUpdateState}
                        handleOpenAuditModal={this.handleOpenAuditModal}
                    ></TableArea>
                    </Card>
                </Spin>
                {/* <Modal></Modal> */}
            </PageContainer>
          </>
      )
  }
}

function mapStateToProps(state: any) {
    return {
        ListSp: state.DataSync,
    };
}

export default connect(mapStateToProps)(DataSync)

model.ts

import { message } from 'antd';
import * as dataSyncService from '../service';

export default {
    namespace: 'DataSync',
    state: {
        isFetching: false,
        tableData: {
            pageNumber: 1,
            pageSize: 10
        }
    },
    reducers: {
        changeStoreDatas(state: any, { data }: { data: any }) {
            return { ...state, ...data };
        }
    },
    effects: {
        *handleGetDataSyncList({}, {call, put, select}: any){
            const { isFetching, tableData} = yield select((state: any) => state.DataSync)
            const {pageNumber, pageSize} = tableData
            if(isFetching) return
            yield put({
                type: 'changeStoreDatas',
                data: { isFetching: true },
            })
            const param: any = {
                pageNumber,
                pageSize
            }

            const res: any = yield call(dataSyncService.getDataSyncList, param)
            yield put({
                type: 'changeStoreDatas',
                data: { isFetching: false },
            })
            if(res?.code === '0' && res.data?.list){
                const { data } = res
                yield put({
                    type: 'changeStoreDatas',
                    data: { tableData: data}
                })
            }
            
        }
    }
}