.catch(error => {
message.error(error);
});
}
// -----------------------------------使用封装后的request---------------------------------------------
type EditRecordParamsType = {
id: number |undefined;
value: FormValues;
};
export async function getRemoteList(): Promise {
return request(’/api/users’);
}
export async function editRecord(params: EditRecordParamsType): Promise {
return request(’/api/edit’, {
metho
《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享
d: ‘POST’,
data: params,
});
}
- 提取公用数据类型（data.d.ts中）
/**
- 这个文件是放 公共的 类型接口的
*/
/**
- 封装后台返回的数据
*/
export type SingleUserType ={
id: number,
name?: string,
email?: string,
create_time?: string,
update_time?: string,
status: number
}
/**
- Modal 框的确定按钮的类型
*/
export type FormValues ={
}
- 数据仓库（dva）model.ts中请求并处理数据
import { Effect, Reducer, Subscription } from ‘umi’;
//导入service远端数据请求
import { getRemoteList } from ‘./service’
import { SingleUserType } from ‘./data’
/**
- 封装后台返回的数据
*/
export type UserState = {
data: SingleUserType[],
meta: {
total: number,
per_page: number,
page: number
}
}
interface UserModelType {
namespace: string;//这里的命名空间就是展示页面得到数据的键
state: UserState;//封装后台返回的数据
effects: {
getRemote: Effect;
};
reducers: {
getList: Reducer,
};
subscriptions: { setup: Subscription };
}
const UserModel: UserModelType = {
namespace: ‘usersData’,//这里的命名空间就是展示页面得到数据的键
state: {
data: [],
meta: {
total: 0,
per_page: 10,
page: 1
}
},
//异步
effects: {
//获取列表数据
*getRemote({ payload }, { call, put }) {
//从service中获取数据（service主要用于接口请求）
const data = yield call(getRemoteList)
if (data && data instanceof Object) {
yield put({
type: ‘getList’,//这个是将数据给reducers中哪个方法
payload: data //注意这里传递一个数组会出问题，原因待定
})
}
},
},
//同步
reducers: {
getList(state, action) {
return {
…state,
…action.payload,
};
},
},
//订阅
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname }) => {
if (pathname === ‘/’) {//当前页面的路径
dispatch({
type: ‘getRemote’,//调用effects中的方法
})
}
});
}
}
};
export default UserModel;
- 首页index.tsx展示数据
import React, { useState, FC } from ‘react’;
//UserState, SingleUserType 需要在model中导出
import { connect, Dispatch, Loading, UserState } from ‘umi’;
import { Table, Space, message } from ‘antd’;
import UserModal from ‘./components/UserModal’
import { SingleUserType, FormValues } from ‘./data’
import { editRecord } from ‘./service’
/**
-
声明下方 props 类型
-
const { users, dispatch, listLoading } = props
*/
type userPageProps = {
users: UserState,
dispatch: Dispatch,
listLoading: boolean
}
const UserListPage: FC = (props) => {
//控制modal弹框
const [visible, setVisible] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [record, setRecord] = useState<SingleUserType | undefined>(undefined);
//获取从model中来的数据
const { users, dispatch, listLoading } = props
//编辑
const onClickEdit = (record: SingleUserType) => {
setVisible(true)
setRecord(record)
};
/**
- 表单提交
*/
const onFinish = async (value: FormValues) => {
setConfirmLoading(true);
const id = record?.id
const result = await editRecord({ id, value })
if (result && result instanceof Object) {
message.success(result.data);
setVisible(false);
dispatch({
type: ‘usersData/getRemote’
})
}
setConfirmLoading(false);
};
//关闭弹窗
const handleCancel = () => {
setVisible(false);
};
const columns = [
{
title: ‘ID’,
dataIndex: ‘id’,
},
{
title: ‘Name’,
dataIndex: ‘name’,
render: (text: string) => {text},
},
{
title: ‘CreateTime’,
dataIndex: ‘create_time’,
},
{
title: ‘Action’,
render: (text: string, record: SingleUserType) => (
<a onClick={() => onClickEdit(record)}>编辑
删除
),
},
];
return (
<UserModal visible={visible} confirmLoading={confirmLoading}
onFinish={onFinish} //关联子组件方法
handleCancel={handleCancel}
record={record} />
)
}
/**
-
这是从model中获取数据
-
@param param0
-
@returns
*/
const mapStateToProps = ({ usersData, loading }: { usersData: UserState, loading: Loading }) => {
return {
users: usersData,//这里的usersData就是model中的namespace
listLoading: loading.models.usersData
}
}
/**
- mapStateToProps 简写
*/
/*
const mapStateToProps = ({ users }) => ({
users
})
*/
export default connect(mapStateToProps)(UserListPage)
//最终简写
// export default connect(({ users }) => ({
// users
// }))(UserListPage)
- 弹窗UserModal.tsx
import React, { useEffect, FC } from ‘react’
import { Modal, Form, Input } from ‘antd’;
import { SingleUserType, FormValues } from ‘…/data’
/**
-
声明下方 props 类型
-
const { visible, confirmLoading, record, handleCancel, onFinish } = props
*/
type userModalProps = {
visible: boolean,
confirmLoading: boolean,
record: SingleUserType | undefined,
handleCancel: () => void,
onFinish: (values: FormValues) => void
}
const UserModal: FC = (props) => {
const { visible, confirmLoading, record, handleCancel, onFinish } = props
const [form] = Form.useForm();
//相当于componentDidMount
useEffect(() => {
form.setFieldsValue(record);
}, [visible])
//点击弹窗
const handleOk = () => {
form.submit()
};
/**
- 表单失败
*/
const onFinishFailed = (err: any) => {
console.log(err)
};
return (
<Modal
title=“Title”
forceRender
visible={visible}
okText=‘确定’
cancelText=“取消”
onOk={handleOk}//传递父组件处理
confirmLoading={confirmLoading}
onCancel={handleCancel}//传递父组件处理
form={form}
name=“basic”
onFinish={onFinish}
onFinishFailed={onFinishFailed}
<Form.Item
label=“name”
name=“name”
rules={[{ required: true, message: ‘请输入name’ }]}
</Form.Item>
<Form.Item
label=“CreateTime”
name=“create_time”
rules={[{ required: true, message: ‘请输入create_time’ }]}
</Form.Item> <Form.Item
label=“status”
name=“status”
rules={[{ required: true, message: ‘请输入status’ }]}