React Native子组件使用Redux Hooks报错找不到Provider排查

报错和Redux类型化Hooks封装、根组件Provider配置无关，核心原因是react-native-paper的Portal组件的渲染逻辑：

• Portal会将子组件渲染到原应用组件树之外的独立顶层宿主节点，不会继承原JSX结构链路中的React Context
• 代码结构上MusicDetails虽然写在SearchItemDetails的子节点位置、逻辑上属于根ReduxProvider的后代，但实际运行时被Portal抽离到了独立渲染树，不在Redux Context的覆盖范围内，因此调用useAppDispatch时会抛出找不到上下文的错误
• 父组件SearchItemDetails本身没有被Portal抽离，始终在ReduxProvider的组件树链路中，因此可以正常使用Redux Hooks

优先选择改动最小的方案1即可：

• 方案1：给Portal内渲染的弹窗内容外层追加一层ReduxProvider，传入和根组件完全一致的同一个store实例，注意不要新建store实例，否则会导致状态不同步。参考实现：

import { Provider as ReduxProvider } from 'react-redux';
import { Portal, Modal } from 'react-native-paper';
// 引入和根组件传入Provider完全相同的store实例
import { store } from '@/store';

// SearchItemDetails组件内的Modal渲染逻辑
return (
  <Portal>
    <Modal>
      <ReduxProvider store={store}>
        {/* 原有条件渲染逻辑：根据状态渲染AlbumDetails/ArtistDetails/MusicDetails */}
      </ReduxProvider>
    </Modal>
  </Portal>
)

• 方案2：自定义react-native-paper的Portal挂载节点，将Portal的宿主容器设置在ReduxProvider包裹的内部组件节点上，让弹窗内容自然继承Context链路，该方案需要额外配置Portal.Host，适合弹窗类组件较多、不想重复嵌套Provider的场景。
• 无需调整现有类型化Hooks的封装逻辑，按官方规范实现的useAppSelector、useAppDispatch可以正常使用。

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