1.model文件夹新建文件menu.ts
import { getMenuData } from '@/services/menu'; // 通过后台返回特定的数组json或者mock模拟数据
import { Reducer } from 'redux';
import { Effect } from './connect';
export interface MenuModelState {
menuData: any[];
}
export interface MenuModelType {
namespace: 'menu';
state: MenuModelState;
effects: {
getMenuData: Effect;
};
reducers: {
save: Reducer<MenuModelState>;
};
}
const MenuModel: MenuModelType = {
namespace: 'menu',
state: {
menuData: [],
},
effects: {
*getMenuData({ payload, callback }, { call, put }) {
const response = yield call(getMenuData);
yield put({
type: 'save',
payload: response.data.menuData,
});
},
},
reducers: {
save(state, action) {
return {
...state,
menuData: action.payload || [],
};
},
},
};
export default MenuModel;
2.打开layouts里面BasicLayout.tsx新增menuData 且在 useState方法里新增请求菜单接口
export default connect(({ global, settings,menu }: ConnectState) => ({
collapsed: global.collapsed,
settings,
menuData: menu.menuData,
}))(BasicLayout);
useState(() => {
if (dispatch) {
dispatch({
type: 'user/fetchCurrent',
});
dispatch({
type: 'settings/getSetting',
});
dispatch({
type: 'menu/getMenuData',
});
}
});
