mobx-react#Provider JavaScript Examples

Root = () => {
  return (
    <MuiThemeProvider theme={theme}>
      <Provider
        languageStore={languageStore}
        notificationStore={notificationStore}
      >
        <Router basename="/">
          <Switch>
            <Route
              path=""
              component={App}
            />
          </Switch>
        </Router>
      </Provider>
    </MuiThemeProvider>
  );
}

//打包时，用的HashRouter并加上了basename，因为放在服务器的二级目录下
ReactDOM.render(
  <HashRouter>
    <LocaleProvider locale={zh_CN}>
      <Provider {...store}>
        <App />
      </Provider>
    </LocaleProvider>
  </HashRouter>,
  document.getElementById('root'));

AppComponent = ({ app }) => {
  return (
    <ErrorBoundary>
      <Provider store={app}>
        <SDKProvider sdk={app.SDK}>
          <Block name="root" mod={{ mode: app.SDK.mode }}>
            {app.crashed ? (
              <Block name="crash">
                <Elem name="header">Oops...</Elem>
                <Elem name="description">
                  Project has been deleted or not yet created.
                </Elem>
              </Block>
            ) : app.loading ? (
              <Block name="app-loader">
                <Spinner size="large" />
              </Block>
            ) : app.isLabeling ? (
              <Labeling />
            ) : (
              <DataManager />
            )}
            <Block name={"offscreen-lsf"} />
          </Block>
        </SDKProvider>
      </Provider>
    </ErrorBoundary>
  );
}

//打包时，用的HashRouter并加上了basename，因为放在服务器的二级目录下
ReactDOM.render(
  <Router history={history}>
    <LocaleProvider locale={zh_CN}>
      <Provider {...store}>
        <App />
      </Provider>
    </LocaleProvider>
  </Router>,
  document.getElementById('root')
);

App = () => {
  const [storeLoaded, setStoreLoaded] = useState(false)

  useEffect(() => {
    const hydrate = create()
    async function hydrateStore() {
      await hydrate('userStore', stores.userStore)
      await hydrate('chatStore', stores.chatStore)
      await hydrate('luckyStore', stores.luckyStore)
    }
    hydrateStore().then(() => setStoreLoaded(true))
  }, [])

  return (
    <Provider {...stores}>
      <Router history={browserHistory}>
        <Route path={'/adminLogin'} component={AdminLoginPage} />
        <Route path={'/admin'} render={() => (getTokenVerification().length > 0 ? <AdminMainPage /> : <Redirect to={'/adminLogin'} />)} />
        {storeLoaded ? (
          <Switch>
            <Route exact path={'/'} component={MainPage} />
            <Route path={'/login'} component={LoginPage} />
            <Route path={'/loginSuccess'} component={LoginSuccessPage} />
            <Route path={'/signup'} component={SignupPage} />
          </Switch>
        ) : null}
      </Router>
    </Provider>
  )
}

render() {
    const { level = 'site' } = getCurrentRole();
    const { tenantId = 0, tenantName } = getCurrentTenant();
    const language = getCurrentLanguage();
    const currentLanguage = language.replace('-', '_');
    const AppState = {
      currentLanguage,
      currentMenuType: {
        type: level,
        organizationId: tenantId,
        id: tenantId,
        name: tenantName,
      },
    };

    return (
      <Provider AppState={AppState}>
        <LowCodeSharedComponent componentCode="ModelProvider" componentProps={this.props} />
      </Provider>
    );
  }

render() {
    const { store } = this.props;
    const as = store.annotationStore;
    const root = as.selected && as.selected.root;
    const { settings } = store;

    if (store.isLoading) return this.renderLoader();

    if (store.noTask) return this.renderNothingToLabel(store);

    if (store.noAccess) return this.renderNoAccess();

    if (store.labeledSuccess) return this.renderSuccess();

    if (!root) return this.renderNoAnnotation();

    const viewingAll = as.viewingAllAnnotations || as.viewingAllPredictions;

    const mainContent = (
      <Block name="main-content">
        {as.validation === null
          ? this._renderUI(as.selectedHistory?.root ?? root, as)
          : this.renderConfigValidationException(store)}
      </Block>
    );

    const newUIEnabled = isFF(FF_DEV_1170);

    return (
      <Block name="editor" mod={{ fullscreen: settings.fullscreen }}>
        <Settings store={store} />
        <Provider store={store}>
          {store.showingDescription && (
            <Segment>
              <div dangerouslySetInnerHTML={{ __html: store.description }} />
            </Segment>
          )}

          {isDefined(store) && store.hasInterface('topbar') && <TopBar store={store}/>}
          <Block name="wrapper" mod={{ viewAll: viewingAll, bsp: settings.bottomSidePanel || newUIEnabled }}>
            {newUIEnabled ? (
              <SidePanels
                panelsHidden={viewingAll}
                currentEntity={as.selected}
                regions={as.selected.regionStore}
              >
                {mainContent}
              </SidePanels>
            ) : (
              <>
                {mainContent}
 
                {(viewingAll === false) && (
                  <Block name="menu" mod={{ bsp: settings.bottomSidePanel }}>
                    {store.hasInterface("side-column") && (
                      <SidebarTabs active="annotation">
                        <SidebarPage name="annotation" title="Annotation">
                          <AnnotationTab store={store}/>
                        </SidebarPage>
 
                        {this.props.panels.map(({ name, title, Component }) => (
                          <SidebarPage key={name} name={name} title={title}>
                            <Component/>
                          </SidebarPage>
                        ))}
                      </SidebarTabs>
                    )}
                  </Block>
                )}
              </>
            )}
 
          </Block>
        </Provider>
        {store.hasInterface("debug") && <Debug store={store} />}
      </Block>
    );
  }