Global Initial State

Introduction

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

Initialization

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>;
};

API:

Related umi plugins

• plugin-model with plugin-initial-state can be used to quickly get the global initial state within the component
• plugin-layout layout can get the initialState state for displaying user information
• plugin-access The state of the initialState is available in plugin-access and is used to determine user permissions