Хакерская реакция, метод рендеринга и редукса

Question

Попытка сделать что-то, что не знаю, возможно ли это. Прежде чем полностью погрузиться в GraphQl, я пытаюсь дать последний go редуксу.

У меня есть следующий код

function App() {

  useFirestoreConnect(() => ({ collection: "kategorier" }));
  const dispatch = useDispatch();



  async function databas() {
    try {
      await dispatch(verify());
      await dispatch(initialLoad());
      await dispatch(loadProduct());
      dispatch(loadKategorier())
    } finally {
      console.log('initialized')
    }
  }

  databas()

  return (
    <>
    <BrowserRouter>
      <ScrollToTop />
      <div className="App">
        <Meny />
        <Switch>
          <Route exact path="/" component={Hem} />
          <Route path="/shop" component={Shop} />
          <Route path="/register" component={Register} />
          <Route path="/login" component={Logina} />
          <Route path="/mittkonto" component={Mittkonto} />
          <Route path="/mittkontoad" component={MittKontoAd} />
          <Route path="/product" component={ProductSingle} />
          <Route path="/cart" component={Cart} />
          <Route path="/checkout" component={Checkout} />
          <Route path="/kategories" component={Kategories} />
          <Route path="/nyheter" component={Nyheter} />
          <Route path="/skaffapost" component={SkaffaPost} />
        </Switch>
        <Footer />
      </div>
    </BrowserRouter>

  </>
  )
}

export default App;

, и у меня есть начальное значение для редукторов (так как большинство действий асин c) Я читаю из локальных файлов в качестве начального состояния ,

Однако моя идея заключалась в следующем:

function App() {

  useFirestoreConnect(() => ({ collection: "kategorier" }));
  const dispatch = useDispatch();



  async function databas() {
    try {
      await dispatch(verify());
      await dispatch(initialLoad());
      await dispatch(loadProduct());
      dispatch(loadKategorier())
    } finally {
      console.log('initialized')
    }
  }



  return (
    <>
{  databas()}
    <BrowserRouter>
      <ScrollToTop />
      <div className="App">
        <Meny />
        <Switch>
          <Route exact path="/" component={Hem} />
          <Route path="/shop" component={Shop} />
          <Route path="/register" component={Register} />
          <Route path="/login" component={Logina} />
          <Route path="/mittkonto" component={Mittkonto} />
          <Route path="/mittkontoad" component={MittKontoAd} />
          <Route path="/product" component={ProductSingle} />
          <Route path="/cart" component={Cart} />
          <Route path="/checkout" component={Checkout} />
          <Route path="/kategories" component={Kategories} />
          <Route path="/nyheter" component={Nyheter} />
          <Route path="/skaffapost" component={SkaffaPost} />
        </Switch>
        <Footer />
      </div>
    </BrowserRouter>

  </>
  )
}

export default App;

, где весь асинхронный c материал будет сделан до того, как он будет отрисован (и предоставлен только один рендеринг всего процесса). Тем не менее, реакция вызывает у меня ошибку: я не могу воспроизвести дочерние объекты (не то, что я ожидал), но кто-нибудь, кто достиг моей цели?