How to use the umi.useModel function in umi

const AvatarDropdown: React.FC = ({ menu }) => {
  const { formatMessage } = useIntl();
  const { initialState, setInitialState } = useModel('@@initialState');

  const onMenuClick = useCallback((event) => {
    const { key } = event;
    if (key === 'settings') {
      settings();
      return;
    }

    if (key === 'logout') {
      setInitialState({ ...initialState, currentUser: undefined });
      history.replace({
        pathname: '/user/logout',
        search: stringify({
          redirect: window.location.pathname,
        }),
      });

export default (): React.ReactNode => {
  const { loading, workloadList } = useModel('useWorkloadsModel');

  const [showWorkload, setShowWorkload] = useState(DEFAULT_DETAIL_STATE);

  const showInfo = ({ parameters }: { parameters: ShowParameters }) => {
    setShowWorkload(parameters);
  };

  return (
    
      
      
        
          rowKey="name"
          headerTitle="Type"
          loading={loading ? { delay: 300 } : undefined}
          dataSource={workloadList ?? []}

export default () => {
  const fullRet = useModel('counter');
  const partialRet = useModel('counter', c => c.counter);

  return (<>
    {partialRet}
    <button>add</button>
    <button>minus</button>
  );
}

const GlobalHeaderRight: React.FC<{}> = () => {
  const { initialState } = useModel('@@initialState');

  if (!initialState || !initialState.settings) {
    return null;
  }

  const { navTheme, layout } = initialState.settings;
  let className = styles.right;

  if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
    className = `${styles.right}  ${styles.dark}`;
  }
  return (
    
      {REACT_APP_ENV && (
        <span>
          {REACT_APP_ENV}</span>

const GlobalHeaderRight: React.FC = () => {
  const { initialState } = useModel('@@initialState');

  useEffect(() => {
    if (localStorage.getItem('token')) {
      fetchVersionMatch();
    }
  }, []);

  if (!initialState || !initialState.settings) {
    return null;
  }

  const { navTheme, layout } = initialState.settings;
  let className = styles.right;

  if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
    className = `${styles.right}  ${styles.dark}`;

export default function() {
  const [value, setValue] = useState('');
  const { todos, addTodo, fetchTodos } = useModel('todos');
  const { count } = useModel('count');
  const { initialState } = useModel('@@initialState');
  return (
    <div>
      <h1>Page index</h1>
      <h2>Test {initialState || ''}</h2>
      <h2>Todos ({count})</h2>
      {
        todos.map(({ name, done }) =&gt; {
          return <li>{ name }</li>;
        })
      }
      <form> {
        ev.preventDefault();
        await addTodo(value);
        setValue('');
        await fetchTodos();
      }}&gt;</form></div>

export default (): React.ReactNode => {
  const { loading, traitsList } = useModel('useTraitsModel');

  const [showTraits, setShowTraits] = useState(DEFAULT_DETAIL_STATE);

  const showInfo = ({ traits }: { traits: ShowParameters }) => {
    setShowTraits({ ...traits });
  };

  return (
    
      
      
        
          rowKey="name"
          headerTitle="Type"
          pagination={{
            defaultPageSize: 5,

const CapabilitySelector: React.FC = ({
  capability,
  onSelect,
  disableCapabilities,
}) => {
  const workloadModel = useModel('useWorkloadsModel');
  const traitModel = useModel('useTraitsModel');

  let loading: boolean | undefined;
  let data: { name: string; description?: string }[] | null;

  switch (capability) {
    case 'service':
      loading = workloadModel.loading;
      data = workloadModel.workloadList ?? null;
      break;
    case 'trait':
      loading = traitModel.loading;
      data = traitModel.traitsList ?? null;
      break;
    default:
      throw new Error(`invalid capability: '${capability}'.`);
  }

export default function() {
  const [value, setValue] = useState('');
  const { todos, addTodo, fetchTodos } = useModel('todos');
  const { count } = useModel('count');
  const { initialState } = useModel('@@initialState');
  return (
    <div>
      <h1>Page index</h1>
      <h2>Test {initialState || ''}</h2>
      <h2>Todos ({count})</h2>
      {
        todos.map(({ name, done }) =&gt; {
          return <li>{ name }</li>;
        })
      }
      <form> {
        ev.preventDefault();
        await addTodo(value);
        setValue('');</form></div>

export default () => {
  const {
    environments,
    currentEnvironment,
    switchCurrentEnvironment: switchEnvironment,
  } = useModel('useEnvironmentModel');

  const menu = (
    <menu> {
        switchEnvironment(e.key.toString()).then((env) =&gt; {
          if (env == null) {
            return;
          }
          message.success({
            content: `Set environment succeed, current environment is ${env.envName}, namespace is ${env.namespace}`,
            key: 'switchEnvironment',
          });
        });
      }}</menu>