如何在NextJS的_app.tsx中正确使用Redux状态？

你的错误根源很明确：MyApp组件本身没有被Provider包裹，却在组件内部直接调用了useSelector。因为Provider是在MyApp的return语句里渲染的，组件执行到useSelector这一行时，Redux上下文还未创建，自然会报找不到上下文的错误。

下面给你两种可行的解决方法：

方法一：用Provider包裹MyApp后导出 #

把Provider移到MyApp外面，让整个MyApp处于Redux上下文覆盖范围内：

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 } from 'react-redux'
import { RootState } from '../store'

function MyApp({ Component, pageProps }: AppProps) {
  // 此时MyApp已被Provider包裹，可正常使用useSelector
  const user = useSelector((state: RootState) => state.user.value)

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

// 外层用Provider包裹MyApp再导出
export default function WrappedApp(props: AppProps) {
  return (
    <Provider store={store}>
      <MyApp {...props} />
    </Provider>
  )
}

方法二：创建嵌套组件封装Redux逻辑 #

在MyApp内部新建一个嵌套组件，把需要访问Redux状态的逻辑放在这个组件里，确保它处于Provider内部：

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 } from 'react-redux'
import { RootState } from '../store'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <AppContent Component={Component} pageProps={pageProps} />
    </Provider>
  )
}

// 嵌套组件处于Provider内部，可正常访问Redux状态
function AppContent({ Component, pageProps }: AppProps) {
  const user = useSelector((state: RootState) => state.user.value)

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

export default MyApp

核心逻辑就是：所有使用useSelector/useDispatch的组件，必须处于Provider包裹的组件树内部，这样才能获取到Redux上下文。

内容的提问来源于stack exchange，提问作者sebastianTheCoder