Global Initial State


Almost most middleware projects have a requirement to request user information or some globally dependent base data before the entire application loads. This information is typically used for base information on Layout (usually user information), permission initialization, and base data that many pages may use.

In the middleground best practice, we provide a minimalistic way to initialize this data and to bridge it with Layout and permissions. The solution is based on the umi plugin @umijs/plugin-initial-state.

How to use


Add the runtime configuration getInitialState to umi's runtime configuration ``src/app.ts`, which is an async function, for example

export async function getInitialState() {
return {
userName: 'xxx',

Consuming in a component

The data returned by this method is eventually injected by default into a model with namespace @@initialState. It can be consumed via the ``useModel`'' hook.

import React from 'react';
import { useModel } from 'umi';
import { Spin } from 'antd';
export default () => {
const { initialState, loading, refresh, setInitialState } = useModel('@@initialState');
if (loading) {
return <Spin />;
return <div>{initialState.userName}</div>;


return valuetypedescription
initialStateTReturn value of getInitialState
loadingbooleanWhether or not the application is in the loading state
refresh() => voidre-execute the getInitialState method
setInitialState(newState: T) => voidManually set the initial value