在Redux Provider外层组件调用useSelector报上下文缺失错误

• React-Redux 提供的 useSelector、useDispatch 等 hooks，依赖 Redux 内置的 React Context 传递 store 值，只能在被 <Provider> 包裹的组件子树范围内正常调用。
• 当前代码中，useSelector、useDispatch 被写在 MyApp 组件的函数体内，但 <Provider> 是 MyApp 本身渲染输出的 JSX 元素。这意味着 MyApp 组件自身完全处于 Provider 的上下文覆盖范围之外，自然会触发“找不到 react-redux context 值”的报错。
• 项目其他位置的导航组件能正常使用相同 hooks，是因为这类组件本身就是 Provider 渲染的子节点，处于 Redux 上下文的生效范围内，和报错逻辑不冲突。

方案1：抽离内部渲染组件（推荐） #

把需要读取 Redux 状态的逻辑从最外层 MyApp 中拆出，放到独立的内部组件里，让这个内部组件被 <Provider> 包裹，就能正常调用 Redux hooks：

// 被Provider包裹的内部组件，处于Redux上下文生效范围
const InnerApp = ({ Component, pageProps }: AppProps) => {
  // 以下hooks可正常获取状态
  const isDark = useSelector<ThemeState, ThemeState["isDark"]>(state => state.isDark)
  const dispatch = useDispatch()

  return (
    <div className={isDark ? 'dark' : 'white'}>
      <Player />
      <Component {...pageProps} />
    </div>
  )
}

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <Provider store={ThemeStore}>
      <InnerApp Component={Component} pageProps={pageProps} />
    </Provider>
  )
}
export default MyApp

这个方案完全遵循 React Context 的使用规范，不需要额外编写订阅逻辑，是该场景下最直观的处理方式。

方案2：直接与store实例交互（适合必须在Provider外层访问状态的场景） #

如果不需要拆分组件，可以直接手动和自己创建的 ThemeStore 实例交互，绕开 React Context 的传递机制：

const MyApp = ({ Component, pageProps }: AppProps) => {
  // 直接从store实例读取初始状态
  const [isDark, setIsDark] = useState(() => ThemeStore.getState().isDark)

  // 订阅store的状态变更，同步本地状态值
  useEffect(() => {
    const unsubscribe = ThemeStore.subscribe(() => {
      setIsDark(ThemeStore.getState().isDark)
    })
    // 组件卸载时取消订阅，避免内存泄漏
    return unsubscribe
  }, [])

  return (
    <Provider store={ThemeStore}>
      <div className={isDark ? 'dark' : 'white'}>
        <Player />
        <Component {...pageProps} />
      </div>
    </Provider>
  )
}

通用注意规则：所有依赖 React Context 的自定义 hooks，都不能在渲染对应 Provider 的组件本身的作用域内调用，这是 React 上下文机制的固定规则，并非 Redux 的特殊限制。

内容的提问来源于stack exchange，提问作者Maxime Géraille