Runtime Config

It is not possible to use dom during construction, so some configurations may need to be configured at runtime. Generally speaking, we manage runtime configuration in src/app.tsx.

getInitialState

getInitialState is used to obtain initial data, and the initial data is used in various components using useModel. In the request, getInitialState will block the page loading.

/**
 * @see https://umijs.org/zh-CN/plugins/plugin-initial-state
 * */
export async function getInitialState(): Promise<{
  currentUser?: API.CurrentUser;
}> {
  // If it is a login page, do not execute
  const currentUser = await fetchUserInfo();
  return {
    currentUser,
  };
}

initialStateConfig

initialStateConfig is the supplementary configuration of getInitialState, getInitialState supports asynchronous settings, we show a loading before the initialization is completed, and initialStateConfig can configure this loading.

/** When obtaining user information is slow, a loading */
export const initialStateConfig = {
  loading: <PageLoading />,
};

request

request is used to configure global network requests. You can configure interceptors, global error handling, and authentication here.

export const request: RequestConfig = {
  errorHandler: (error: ResponseError) => {
    const { messages } = getIntl(getLocale());
    const { response } = error;
    notification.error({
      description: 'Your network is abnormal and cannot connect to the server',
      message: 'Network abnormal',
    });
    throw error;
  },
};

layout

Dom cannot be used during construction, so some configurations may need to be configured at runtime. We can export a layout in src/app.tsx for configuration:

import React from 'react';
import { RunTimeLayoutConfig } from 'umi';
import { BasicLayoutProps, Settings as LayoutSettings } from '@ant-design/pro-layout';

// API supported by ProLayout https://procomponents.ant.design/components/layout
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    waterMarkProps: {
      content: initialState?.currentUser?.name,
    },
    footerRender: () => <Footer />,
    onPageChange: () => {
      console.log(location.pathname);
    },
    // Customize the 403 page
    // unAccessible: <div>unAccessible</div>,
    ...initialState?.settings,
    childrenRender: (children) => {
      return <div>{children}</div>;
    },
  };
};

The layout supports a function, which can be used in conjunction with initialState to put dynamic data into initialState and it will trigger an update every time initialState changes.

Ant Design Pro

Runtime Config

getInitialState

initialStateConfig

request

layout