javascript Redux工具包找不到react-redux上下文值- React Native

gojuced7  于 2023-02-28  发布在  Java
关注(0)|答案(1)|浏览(178)

我是这个奇怪的问题与React原生应用程序,我正在创建一个React原生项目,并使用Redux工具包的状态管理。不知何故,它一直给我这个错误。
错误:找不到react-redux上下文值;请确保组件 Package 在
我已经按照文档做了,并且正确地做了所有的事情。我已经在StackOverflow上寻找了类似的问题,但仍然不是运气。
这是我应用程序. 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'

const App = () => {
  const theme = useAppSelector(selectTheme)

  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <PaperProvider theme={theme}>
          {/**
           * PersistGate delays the rendering of the app's UI until the persisted state has been retrieved
           * and saved to redux.
           * The `loading` prop can be `null` or any react instance to show during loading (e.g. a splash screen),
           * for example `loading={<SplashScreen />}`.
           * @see https://github.com/rt2zz/redux-persist/blob/master/docs/PersistGate.md
           */}
          <ApplicationNavigator />
        </PaperProvider>
      </PersistGate>
    </Provider>
  )
}

export default App

正如你所看到的,我已经 Package 了我的应用程序与供应商与商店。
应用程序导航器:

import React from 'react'
import { SafeAreaView, StatusBar } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack'
import { NavigationContainer } from '@react-navigation/native'
import { navigationRef } from './utils'
import MainNavigator from './Main'

const Stack = createStackNavigator()

// @refresh reset
const ApplicationNavigator = () => {
  return (
    <SafeAreaView>
      <NavigationContainer ref={navigationRef}>
        <StatusBar />
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen
            name="Main"
            component={MainNavigator}
            options={{
              animationEnabled: false,
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaView>
  )
}

export default ApplicationNavigator

存储和reducer具有@redux-toolkit中的基本样板文件。

42fyovps

42fyovps1#

您正在App组件中使用useAppSelector,该组件 Package 在Provider中。您正在提供程序中 Package App的子级。
您可以通过将App组件 Package 在Provider中来解决这个问题。

// instead of
// export default App

const withProvider = (props) => {
  return <App {...props} />;
};

export default withProvider;

相关问题