Estaba configurando redux en mi proyecto Next JS, pero el enlace useDispatch no funcionaba dentro de mi componente Nav. La navegación estaba envuelta en la etiqueta proporcionada por Next JS. Pero cuando moví mi componente Nav fuera de la etiqueta, el enlace useDispatch comenzó a funcionar. ¿Por qué mi aplicación se comporta así?
_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> ) }índice.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 /> </> ); }