How to use the piral-core.useGlobalState function in piral-core

const Sitemap: React.SFC = () => {
  const pages = useGlobalState(s => s.components.pages);

  return (
    <ul>
      <li>
        Go to /
      </li>
      {Object.keys(pages)
        .map(url =&gt; url.replace(':id', `${~~(Math.random() * 1000)}`))
        .map(url =&gt; (
          <li>
            Go to {url}
          </li>
        ))}
      <li>
        Go to /sitemap
      </li></ul>

export function useForm(
  initialData: TFormData,
  history: History,
  options: InputFormOptions,
  existingId?: string,
) {
  const { silent, message } = options;
  const [id] = useState(existingId || generateId);
  const state = useGlobalState(m => m.forms[id] || createDefaultState(initialData));
  const updateState = useAction('updateFormState');
  usePrompt(!silent && state.changed, history, message);
  useEffect(() => {
    updateState(id, state, {
      active: true,
    });

    return () =>
      updateState(id, state, {
        active: false,
      });
  }, [state.submitting]);
  return createProps(id, state, updateState, options);
}

const Sitemap: React.FC = () => {
  const pages = useGlobalState(s => s.registry.pages);

  return (
    <ul>
      <li>
        Go to /
      </li>
      {Object.keys(pages)
        .map(url =&gt; url.replace(':id', `${~~(Math.random() * 1000)}`))
        .map(url =&gt; (
          <li>
            Go to {url}
          </li>
        ))}
      <li>
        Go to /sitemap
      </li></ul>

export const SwitchErrorInfo: React.FC = props => {
  const components = useGlobalState(m => m.components);

  switch (props.type) {
    case 'not_found':
      return renderComponent(components, 'NotFoundErrorInfo', props);
    case 'page':
      return renderComponent(components, 'PageErrorInfo', props);
    case 'tile':
      return renderComponent(components, 'TileErrorInfo', props);
    case 'menu':
      return renderComponent(components, 'MenuErrorInfo', props);
    case 'extension':
      return renderComponent(components, 'ExtensionErrorInfo', props);
    case 'modal':
      return renderComponent(components, 'ModalErrorInfo', props);
    case 'loading':
      return renderComponent(components, 'LoadingErrorInfo', props);

const Sitemap: React.FC = () => {
  const pages = useGlobalState(s => s.registry.pages);

  return (
    <ul>
      <li>
        Go to /
      </li>
      {Object.keys(pages)
        .map(url =&gt; url.replace(':id', `${~~(Math.random() * 1000)}`))
        .map(url =&gt; (
          <li>
            Go to {url}
          </li>
        ))}
      <li>
        Go to /sitemap
      </li></ul>

export function useTranslation() {
  const { selected, translations } = useGlobalState(m => m.app.language);
  return translations[selected];
}

export const Notifications: React.FC = () => {
  const notifications = useGlobalState(s => s.notifications);

  return (
    
      {notifications.map(({ component: Component, close, options, id }) => (
        
          
        
      ))}
    
  );
};
Notifications.displayName = 'Notifications';

export function useFeed(options: ConnectorDetails): [boolean, TData, any] {
  const { loaded, loading, error, data } = useGlobalState(s => s.feeds[options.id]);
  const load = useAction('loadFeed');

  useEffect(() => {
    if (!loaded && !loading) {
      load(options);
    }
  }, [loaded]);

  return [loaded, data, error];
}

const StateView: React.FC = props => {
    const state = useGlobalState(s => s.containers[id]);
    return ;
  };
  StateView.displayName = `StateView_${id}`;