reactjs - 在 React Native Expo 中为 App 组件创建包装器

Question

我需要以某种方式从 App.js 访问我的 Redux 商店，从文档中说我可以为我的 App 创建新的入口点，所以我确实创建了一个，但不知何故我的 App 仍然无法访问 Redux Store。

Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

这是我的App.js代码

import React, { useState, useEffect } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { useFonts } from "expo-font";
import AppLoading from "expo-app-loading";
import { Provider } from "react-redux";
import { useDispatch, useSelector } from "react-redux";

//Layout
import Auth from "./src/layout/Auth.layout";
import Register from "./src/layout/Register.layout";
import Drawer from "./src/navigation/Drawer";
export default function App() {
  const Stack = createStackNavigator();
  const { isLoggedIn } = useSelector((state) => state.user);
  const [isLoading, setIsLoading] = useState(false);

  let [fontsLoaded] = useFonts({
    DMSans: require("./assets/fonts/DMSans-Regular.ttf"),
    "DMSans-Medium": require("./assets/fonts/DMSans-Medium.ttf"),
    "DMSans-Bold": require("./assets/fonts/DMSans-Bold.ttf"),
  });

  if (!fontsLoaded || isLoading) {
    return <AppLoading />;
  } else {
    return (
      <NavigationContainer>
        {!isLoggedIn ? (
          <Stack.Navigator
            initialRouteName="Auth"
            screenOptions={{ headerShown: false }}
          >
            <Stack.Screen name="Auth" component={Auth} />
            <Stack.Screen name="Register" component={Register} />
          </Stack.Navigator>
        ) : (
          <Drawer />
        )}
      </NavigationContainer>
    );
  }
}

这是我创建的EntryPoint.js：

import { registerRootComponent } from "expo";
import App from "../App";
import React from "react";
import { store, persistor } from "./state/store";
import { PersistGate } from "redux-persist/es/integration/react";
import { Provider } from "react-redux";

export default function EntryPoint() {
  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  );
}

registerRootComponent(EntryPoint);

我在这里想念什么？还是我可以实施更好的解决方案？

标签： reactjsreact-nativereduxreact-redux

Answer 1

解决了，我最终删除了 EntryPoint.js 并在我的 App.js 中创建了一个包装器。

App.js代码：

import React, { useState, useEffect } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { useFonts } from "expo-font";
import AppLoading from "expo-app-loading";
import { Provider } from "react-redux";

//Layout
import Auth from "./src/layout/Auth.layout";
import Register from "./src/layout/Register.layout";
import Drawer from "./src/navigation/Drawer";
import { store, persistor } from "./src/state/store";
import { PersistGate } from "redux-persist/es/integration/react";
import { useSelector } from "react-redux";

const AppWrapper = () => {
  const Stack = createStackNavigator();
  const { isLoggedIn } = useSelector((state) => state.user);
  const [isLoading, setIsLoading] = useState(false);

  let [fontsLoaded] = useFonts({
    DMSans: require("./assets/fonts/DMSans-Regular.ttf"),
    "DMSans-Medium": require("./assets/fonts/DMSans-Medium.ttf"),
    "DMSans-Bold": require("./assets/fonts/DMSans-Bold.ttf"),
  });
  if (!fontsLoaded || isLoading) {
    return <AppLoading />;
  } else {
    return (
      <NavigationContainer>
        {!isLoggedIn ? (
          <Stack.Navigator
            initialRouteName="Auth"
            screenOptions={{ headerShown: false }}
          >
            <Stack.Screen name="Auth" component={Auth} />
            <Stack.Screen name="Register" component={Register} />
          </Stack.Navigator>
        ) : (
          <Drawer />
        )}
      </NavigationContainer>
    );
  }
};

export default function App() {
  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <AppWrapper />
      </PersistGate>
    </Provider>
  );
}