React Native集成Redux Toolkit报错：找不到react-redux上下文值

问题根源 #

你在App组件中直接调用了useAppSelector(selectTheme)，但这个组件是Redux Provider的父级。Redux的Context是通过Provider向下传递的，在Provider还没渲染的时候调用Redux Hook，自然无法获取到Context值，导致报错。

解决方案 #

把所有使用Redux Hooks的逻辑移到Provider内部的组件中，修改后的app.tsx代码如下：

import 'react-native-gesture-handler'
import React from 'react'
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/lib/integration/react'
import { store, persistor, useAppSelector } from '@/Store'
import ApplicationNavigator from '@/Navigators/Application'
import './Translations'
import { selectTheme } from './Store/reducers/Theme'
import { Provider as PaperProvider } from 'react-native-paper'

// 将主题逻辑封装到Provider内部的组件中
const AppContent = () => {
  const theme = useAppSelector(selectTheme)
  
  return (
    <PaperProvider theme={theme}>
      <ApplicationNavigator />
    </PaperProvider>
  )
}

const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <AppContent />
      </PersistGate>
    </Provider>
  )
}

export default App

额外检查点 #

• 确认你的store配置正确，已导出合法的Redux Store实例
• 排查项目中其他组件，确保没有在Provider或PersistGate外层使用useSelector/useDispatch等Redux Hooks
• 若使用了自定义导航逻辑，检查导航器的初始化代码是否在Provider内部执行

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