0
227
ViewsRedux hooks don't work inside the Next JS Head Tag
I was setting up redux in my Next JS project but the useDispatch hook wasn't working inside my Nav component. The nav was wrapped in the tag provided by Next JS. But when I moved my Nav component outside the tag, the useDispatch hook started working. Why is my app behaving like this?
Error:
_app.js:
import "../styles/globals.css";
import { useStore } from "../app/store/store";
import { Provider } from "react-redux"; 2
export default function App({ Component, pageProps }) {
const store = useStore(pageProps.initialReduxState);
return (
<Provider store="{store}">
<Component {...pageProps} />
</Provider>
)
}
index.js:
import styles from "../styles/Home.module.css";
import Head from "next/head";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { authCheckState } from "../app/store/actions/auth";
import Nav from "../app/components/Nav";
import Footer from "../app/components/Footer";
import MainCarousel from "../app/components/MainCarousel";
import BestSellers from "../app/components/BestSellers";
export default function Home() {
const dispatch = useDispatch();
useEffect(() => {
dispatch(authCheckState());
});
return (
<>
<Head>
<Nav />
</Head>
<main className={styles.main}>
<MainCarousel />
<BestSellers />
</main>
<Footer />
</>
);
}
·
Juan Pablo Isaza
Answer question