How to use Redux state in _app.tsx (NextJS)

Question

This is the code to my _app.tsx

import '../styles/globals.css'
import AppNav from '../components/AppNav'
import type { AppProps } from 'next/app'
import { store } from '../store'
import { Provider } from 'react-redux'
import { useSelector, useDispatch } from 'react-redux'
import { RootState } from '../store'

function MyApp({ Component, pageProps }: AppProps) {

  const user = useSelector((state: RootState) => state.user.value)

  return (
    <Provider store={store}>
      <div className='global_container'>
        <AppNav />
        <Component {...pageProps} />
      </div>
    </Provider>
  )
}

export default MyApp

In the code, I am trying to use the user redux state inside _app.tsx, but it gives me an error: Error: could not find react-redux context value; please ensure the component is wrapped in a Provider.

How can I access the redux state inside _app.tsx? This is nextjs by the way.

Answer 1

Your component is not connected to the store. Normally this package https://github.com/kirill-konshin/next-redux-wrapper is used to wrap next.js. Once you created wrapper, you have to wrap _app.jx

export default wrapper.withRedux(MyApp);

Now you can use useSelector to access store within any component

import { useSelector } from "react-redux";