如何拥有非管理员用户未加载的单独管理存储？

Question

我想创建一个仅由管理员用户加载的 mobx 商店。它只会被注入 /admin 路线上的任何东西。我研究了 Nested Providers 的使用，但运气不佳。

理想情况下，我希望它链接到路线，因此如果用户去 domain.com/admin 然后它被加载。

我可以编写简单的代码来检查用户是否是管理员，但我希望我可以遵循更优雅的模式。

编辑

这是我的临时解决方案，如果有更好的方法请告诉我

AdminRoutes

export const AdminRoutes = () => {
    
    const adminStores = createAdminStores()
    return (
        <Switch>
            <Provider {...adminStores}>
                <AuthedRoute path="/admin" exact component={Admin} />
            </Provider>
        </Switch>
    )
};

App.ts

export const App = hot(({ history }: any) => (
<Provider {...rootStores}/>
  <Router history={history}>

    <Switch>

      <UnauthedRoute path="/login" exact component={Login}></UnauthedRoute>

      <Route path="/admin" exact component={AdminRoutes} />

      <Route path="/error" component={ErrorComponent} />
      <Route path="/abc" component={Test} />

      <Route path="/:path" component={Issue} />
      <Route path="/" component={Home} />

    </Switch>
  </Router>
</Provider>
));

我仅在用户运行 AdminRoutes 路由时创建管理存储。唯一的问题是，当用户更改 URL 时商店会重新加载，但是我所有其他商店都会发生这种情况。

Answer 1

您可以改进的一件事是将 React.lazy 与整个管理组件一起使用。

// import it like that
const AdminRoutes = React.lazy(() => import('./path-to-admin-routes'))
...
// and use like that
<Route
  path="/admin"
  render={() => (
    <Suspense fallback={'Loading'}>
      <AdminRoutes />
    </Suspense>
  )}
/>

这样普通的非管理员用户甚至不会加载管理员的东西，你的最终包会更小。

更多信息：https://reactjs.org/docs/code-splitting.html#reactlazy

或者您也可以将 AdminStore 动态注入到 RootStore 中。我为它做了例子，希望它有意义https://codesandbox.io/s/httpsWhosebugcomquestions62759240-ew8hf?file=/src/AdminComponent.js 基本上，您会在第一次加载管理组件时创建 AdminStore，然后通过将其保存在 RootStore

中来使用新创建的实例

如何拥有非管理员用户未加载的单独管理存储？

how to have seperate admin store that is not loaded by a non admin user?

mobx

mobx-react

编辑

AdminRoutes

App.ts