介绍
model用于把数据相关的逻辑聚合到一起.
目录结构采用: src/models/数据模型文件
- 数据模型文件: 命名采用驼峰形式
新增model文件
在开发的模块 src/models
目录下新建 client.js
client.js
effects
中定义的函数名称与在页面中 dispatch
的 type
一致,即:
type: ‘[model的命名空间]/[effects中对应的函数名称]’,
// src/routes/Client/index.js
// 页面组件入口文件
dispatch({
type: 'client/fetchClientList',
payload: {
page: isEmpty(fields) ? {} : fields,
tenantId,
...fieldValues,
},
});
// src/models/client.js
// 数据模型文件
/**
* client.js - 客户端 model
* @date: 2018-12-24
* @author: XXX <xxx@hand-china.com>
* @version: 0.0.1
* @copyright: Copyright (c) 2018, Hand
*/
import { getResponse, createPagination } from 'utils/utils';
import {
fetchClientList,
} from '../../services/hiam/clientService';
export default {
namespace: 'client',
state: {
clientList: [], // 列表数据
pagination: {}, // 分页器
},
effects: {
// 查询Client列表数据
*fetchClientList({ payload }, { call, put }) {
// `yield call` 第一个参数与在`service` 中导出的函数名称一致
const res = yield call(fetchClientList, payload);
const list = getResponse(res);
if (list) {
yield put({
type: 'updateState',
payload: {
clientList: list.content,
pagination: createPagination(list),
},
});
}
return list;
},
},
reducers: {
updateState(state, action) {
return {
...state,
...action.payload,
};
},
},
};