umi3学习 Typescript(一)

配置文件config.ts

import { defineConfig } from 'umi';
import RouterConfig from './router.config';

export default defineConfig({
  /** 浏览器路由配置 **/
  history: { type: 'browser' },

  /** 路由配置 */
  routes:   { 
    path: '/', 
    component: './index' 
  },

  /** 引用路径配置 */

  alias: {
      constants: '@/constants/',
      utils: '@/utils/',
      services: '@/services/',
      assets: '@/assets/',
  },

  /** umi插件 */
  antd: {},
  dva: {
    hmr: true,
  },
  /** 按需加载 */
  dynamicImport: false,
  title: '',
});

umi3配置文档

状态管理 model.ts

import { Effect, Reducer, Subscription } from 'umi';
/**
 * 全局State状态
 */

interface ModelState {
  xxx: string;
}
/**
 * 接口类型
 */
interface ModelType {
  namespace: 'index';

  state: ModelState;

  effects: {
    yy: Effect;
  };

  reducers: {
    updateS: Reducer<ModelState>;
  };

  subscriptions?: { setup: Subscription };
}

const Model: ModelType = {
  namespace: 'index',

  state: {
    xxx: ''
  },

  effects: {
    *yy({ payload }, { put, call, select }) { }
  },

  reducers: {
    updateS(state, { payload: { xxx } }) {
      return {
        ...state,
        xxx
      }
    }
  },
  
  subscriptions: {
    setup({ dispatch, history }) {
      return history.listen(({ pathname }) => {
        if (pathname === '/user') {
          dispatch({
            type: 'updateS',
          })
        }
      });
    }
  }
}

export default Model;

用户反馈工具库

用于全局提示用户
下面例子为message提示⇒ 更多antd提示

/**  事件总线 */
import { EventEmitter } from 'events';
import { message } from 'antd';

message.config({
  top: 100,
  duration: 2,
  maxCount: 1,
});
/**
 * message.error()提示
 */
fEventEmitter.addListener('f.event.message.error', (content, resolve, reject) => {
  message.error(content).then(resolve, reject);
});

export const messageError = (content: string) => {
  return new Promise((resolve) => {
    fEventEmitter.emit('f.event.message.error', content, resolve);
  });
};

umi2升级umi3

引入更改 可以在umi中直接引用
import { all } from ‘umi’;