如何将 Redux Toolkit 添加到 Expo (sdk 50) 项目？

Question

由于路由和导航的工作原理，我在理解如何在 expo 项目上实现 redux 存储时遇到问题。

我真的不知道如何以及在哪里提供商店。

我的项目配置为从此文件启动：

//索引.tsx

import { Redirect } from "expo-router";
import Onboarding from "./Onboarding";

export default function App() {
  return <Onboarding />;
}

//布局.tsx

import { Stack } from "expo-router";

export default function LoginLayout() {
  return (
    <Stack
      initialRouteName="home"
      screenOptions={{
        headerShown: false,
        headerStyle: {
          backgroundColor: "brown",
        },
        headerTintColor: "#fff",
        headerTitleStyle: {
          fontWeight: "bold",
        },
      }}
    >
      <Stack.Screen
        name="login"
        options={{
          title: "Login",
        }}
      />
      <Stack.Screen
        name="register"
        options={{
          title: "Login",
        }}
      />
    </Stack>
  );
}

这是应用程序的开始。

根据expo-router的工作方式，我在哪里提供store？因为最终我们将离开这个组件？

Answer 1

这是一个非常通用的解决方案，可以在应用程序的根目录或附近创建和提供 Redux 存储以及任何其他全局上下文提供程序。

在这种情况下，您可以在

App

中导入存储并渲染包裹在根组件周围的 Redux

Provider

。

示例：

import { Redirect } from "expo-router";
import { Provider } from "react-redux";
import Onboarding from "./Onboarding";
import { store } from "../path/to/store";

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