ant design pro v4 菜单请求数据

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',
            });
        }
    });