项目基本结构
一.接口 services.js ,模块 models.js ,HTML页面
1.第一种方式-三者同级
2.第二种方式-子级
二.接口配置-services
import { get, post } from '@/utils/request';
export const getList = (params) => {
return get(`/api/demo/list`, params);
};
export const postList = (params) => {
return post(`/api/demo/list`, params);
};
三.模块配置-models
import { getList, postList } from '../services';
export default {
namespace: 'demo',
state: {
welfareList: [],
},
effects: {
*getList({ payload }, { call, put }) {
const response = yield call(getList, payload);
yield put({
type: 'updateState',
payload: {
welfareList: response?.data,
},
});
},
*postList({ payload }, { call }) {
const response = yield call(postList, payload);
直接返回后端请求数据结果结果
retuen response?.data
},
},
reducers: {
updateState: (state, { payload }) => {
return {
...state,
...payload,
};
},
},
};
四.页面配置
import React, { useEffect } from 'react';
import { connect } from 'umi';
const Index = (props) => {
const { dispatch, welfareList } = props;
useEffect(() => {
dispatch({
type: 'demo/getList',
payload: { id: 1 },
});
}, []);
return <div>小样</div>;
};
export default connect(({ Demo }) => {
return Demo;
})(Index);
OK! 这样一篇简介,明了的文章,不值得一个赞吗?