How can I Add Redux Toolkit to Expo (sdk 50) Project?

Question

I'm having issues understanding how to implement redux store on expo project because of how it's routing and navigation works.

I don't really know how and where to provide the store.

my project is configured to start from this file:

//Index.tsx

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

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

//Layout.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>
  );
}

that is the beginning of the app.

based on the way expo-router works, where do I provide the store ? Since eventually, we will navigate away from this component ?

Answer 1

It is a pretty general solution to create and provide the Redux store, along with any other global context providers, at or near the root of the app.

See the Expo router root layout docs for specifics.

Traditional React Native projects are structured with a single root component that is often defined in ./App.js or ./index.js. This pattern is often used to inject global providers such as Redux, Themes, Styles, and so on, into the app, and to delay rendering until assets and fonts are loaded.

In Expo Router, you can use the Root Layout (app/_layout.js) to add providers which can be accessed by any route in the app.

In this case you could import the store and wrap the Onboarding component and provide the store to that sub-ReactTree.

Example:

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

...

<Provider store={store}>
  <Onboarding />
</Provider>