How to call dispatch in

R

roaddd2021-12-08 18:29:39

React

roaddd, 2021-12-08 18:29:39

How to call dispatch in _app.js?

_app.js:

import App from "next/app"
import Head from "next/head"
import { useRouter } from "next/router"
import request from "../helpers/request"
import { wrapper } from "../redux/store"
import { MediaContextProvider } from "../components/Media"
import Header from "../components/Header"
import Footer from "../components/Footer"
import "../prototypes"
import "../styles/globals.scss"

const MyApp = (props) => {
  const router = useRouter()

  const isHeaderAndFooterVisible = router.pathname !== "/vehicle/print"

  return (
    <MediaContextProvider>
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <link
          href="/fonts/FordAntenna/FordAntenna-Regular.woff2"
          as="font"
          type="font/woff2"
          crossOrigin="true"
        />
        <link
          href="/fonts/FordAntenna/FordAntenna-Semibold.woff2"
          as="font"
          type="font/woff2"
          crossOrigin="true"
        />
        <link
          href="/fonts/FordAntenna/FordAntenna-Bold.woff2"
          as="font"
          type="font/woff2"
          crossOrigin="true"
        />
        <link rel="preconnect" href="http://s.viawebsites.com" />
        <link rel="dns-prefetch" href="http://s.viawebsites.com" />
      </Head>
      {isHeaderAndFooterVisible && (
        <Header
          settings={props.settings}
          texts={props.texts}
          videos={props.videos}
          vendors={props.vendors}
        />
      )}
      <props.Component {...props.pageProps} />
      {isHeaderAndFooterVisible && <Footer />}
    </MediaContextProvider>
  )
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext)
  const [settings, texts, videos, vendors] = await Promise.all([
    request("settings"),
    request("texts"),
    request("videos"),
    request("vendors/list")
  ])

  return {
    ...appProps,
    settings: settings.data,
    texts: texts.data,
    videos: videos.data,
    vendors: vendors.data
  }
}

export default wrapper.withRedux(MyApp)

Now I’m grabbing data from _getInitialProps and throwing it in the header so that I can put it in the redux state through mapDispatchProps. How can I put it directly in _app.js in the redux store?