升级到 V5

上次修改时间：2021-05-07 14:47:85

Pro V5 是可以渐进使用的，只要升级到 umi@3 即可使用这些特性，新的数据流虽然简单高效但是并不能满足所有的场景，我们可以混合适应，慢慢迁移。当然我们希望可以尽早迁移来减少历史债务。

initialState

initialState 在 v5 中替代了原来的自带 model，global,login,setting 都并入了 initialState 中。我们需要删除 src/models/global.ts,src/models/login.ts,src/models/setting.ts ，并且将请求用户信息和登陆拦截放到 src/app.tsx 中。

我们可以将 initialState 理解为一个默认的 model，里面可以将项目中需要的不频繁修改的数据注入。

import { history } from 'umi';
import { Settings as ProSettings } from '@ant-design/pro-layout';
import { queryCurrent } from '@/services/user';
import defaultSettings from '../config/defaultSettings';

export async function getInitialState(): Promise<{
  currentUser?: API.CurrentUser;
  settings?: ProSettings;
}> {
  // 如果是登录页面，不执行
  if (history.location.pathname !== '/user/login') {
    try {
      const currentUser = await queryCurrent();
      return {
        currentUser,
        settings: defaultSettings,
      };
    } catch (error) {
      history.push('/user/login');
    }
  }
  return {
    settings: defaultSettings,
  };
}

Layout

在新的架构中 Layout 被作为插件使用，作为了替代品我们在 app.ts 中提供了 layout 的配置项来支持运行时配置,我们需要将 footer 和 menu 的自定义迁移到 app.ts 中，在 return 中我们可以原来的任何 props 配置。

import React from 'react';
import { history } from 'umi';
import { BasicLayoutProps, Settings as ProSettings } from '@ant-design/pro-layout';
import RightContent from '@/components/RightContent';
import Footer from '@/components/Footer';

export const layout = ({
  initialState,
}: {
  initialState: { settings?: ProSettings };
}): BasicLayoutProps => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    footerRender: () => <Footer />,
    menuHeaderRender: false,
    ...initialState?.settings,
  };
};

在 V4 中我们将 layout 的配置放到了 model 中，在 V5 中我们将其放入了 initialState 中，还有非常重要的用户信息也在 initialState进行了初始化。默认配置中的 layout 属性变为 'side' | 'top' | 'mix'，这里需要注意一下，默认是 mix。

export async function getInitialState(): Promise<{
  currentUser?: API.CurrentUser;
  settings?: ProSettings;
}> {
  // 如果是登录页面，不执行
  if (history.location.pathname !== '/user/login') {
    try {
      const currentUser = await queryCurrent();
      return {
        currentUser,
        settings: defaultSettings,
      };
    } catch (error) {
      history.push('/user/login');
    }
  }
  return {
    settings: defaultSettings,
  };
}

这里是 Footer 的配置可以修改为自己需要的。

import React from 'react';
import { GithubOutlined } from '@ant-design/icons';
import { DefaultFooter } from '@ant-design/pro-layout';

export default () => (
  <DefaultFooter
    copyright="2019 蚂蚁金服体验技术部出品"
    links={[
      {
        key: 'Ant Design Pro',
        title: 'Ant Design Pro',
        href: 'https://pro.ant.design',
        blankTarget: true,
      },
      {
        key: 'github',
        title: <GithubOutlined />,
        href: 'https://github.com/ant-design/ant-design-pro',
        blankTarget: true,
      },
      {
        key: 'Ant Design',
        title: 'Ant Design',
        href: 'https://ant.design',
        blankTarget: true,
      },
    ]}
  />
);

权限

我们的权限改造也依赖了它，对于原来的权限我们可以完全将其删除, 并且在 src/access.ts 增加相应的权限标识，以 pro 为例，我们只使用了 canAdmin。

// src/access.ts
export default function (initialState: { currentUser?: API.CurrentUser | undefined }) {
  const { currentUser } = initialState || {};
  return {
    canAdmin: currentUser && currentUser.access === 'admin',
  };
}

迁移之后我们就可以将原来的权限组件删除。 src/utils/Authorized.ts,src/utils/authority.ts,src/components/Authorized/**。

在 config.ts 的 router 中我们需要删除 authority，修改为 access: 'canAdmin' 同时我们可以 util 中的所有关于权限的方法。

对于运行时的代码，我们提供了两个 API 来帮助我们自定义任何形态的 UI 和逻辑，这里有个一看就懂的 demo。

import React from 'react';
import { useAccess, Access } from 'umi';

const PageA = (props) => {
  const { foo } = props;
  const access = useAccess(); // access 的成员: canAdmin

  if (access.canReadFoo) {
    // 如果可以读取 Foo，则...
  }

  return (
    <div>
      <Access accessible={access.canAdmin} fallback={<div>Can not read foo content.</div>}>
        Foo content.
      </Access>
      <Access accessible={access.canDeleteFoo(foo)} fallback={<div>Can not delete foo.</div>}>
        Delete foo.
      </Access>
    </div>
  );
};

请求

原有的项目中 request 定义在 src/utils/request.ts中，在 V5 中需要用 umi 中 import ，各项配置需要写在 app.ts 中进行实现。

import { RequestConfig } from 'umi';

export const request: RequestConfig = {
  timeout: 1000,
  errorConfig: {},
  middlewares: [],
  requestInterceptors: [],
  responseInterceptors: [],
  errorHandler,
};

V5 中还自带了 useRequest hooks ，很多页面并不需要数据共享，我们可以用 useRequest 来快速的网络请求，并且内置了 loading 和 run 来指示状态和重新请求数据，使用方式极为简单。

import { useRequest } from 'umi';

export default () => {
  const { data, error, loading } = useRequest(() => {
    return services.getUserList('/api/test');
  });
  if (loading) {
    return <div>loading...</div>;
  }
  if (error) {
    return <div>{error.message}</div>;
  }
  return <div>{data.name}</div>;
};

其他杂项

由于将所有的逻辑做了拆离，很多依赖都不在需要了，我们可以将其中一些依赖进行删除来增加依赖的安装速度。

path-to-regexp
react-helmet-async
jsdom-global
enzyme
chalk
checkFiles

现在 layout 作为插件会一直包裹在最外层，如果我们想在某个路由中不使用 layout，可以在菜单中配置 layout=false 来隐藏。详细的配置可以看这里。

对于 SettingDrawer，为了方便集成和部署，我们开发了 umi-plugin-setting-drawer ,只要在项目中安装这个插件即可快速使用。