如何在Expo SDK50项目中集成Redux Toolkit？路由结构下Store配置疑问

核心思路 #

把Redux的Provider放在Expo Router的根布局组件外层，这是所有页面的统一父容器，能保证后续导航到的任何页面都能访问到Store，不会因为页面跳转丢失上下文。

具体步骤 #

1. 安装Redux依赖

先装必备的包：

npm install @reduxjs/toolkit react-redux
# 或者用yarn
yarn add @reduxjs/toolkit react-redux

2. 创建Redux Store

在项目里新建app/store.ts文件，配置你的Store：

import { configureStore } from '@reduxjs/toolkit';
// 导入你的切片（示例：用户状态切片）
import userReducer from './features/user/userSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
    // 后续添加的其他切片都放这里
  },
});

// 导出类型，方便组件中做类型提示
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

3. 在根布局中注入Store

找到你的根布局文件app/_layout.tsx，用Provider包裹整个路由栈：

import { Stack } from 'expo-router';
import { Provider } from 'react-redux';
import { store } from './store';

export default function RootLayout() {
  return (
    <Provider store={store}>
      <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: "Register", // 建议把这里的标题改成Register更合理
          }}
        />
        {/* 其他页面路由都加在这里 */}
      </Stack>
    </Provider>
  );
}

4. 关于你的Index.tsx

你的Index.tsx返回<Onboarding />，这个组件会被Expo Router自动识别为根路由的初始页面。因为根布局已经用Provider包裹，所以Onboarding和后续导航到的login、register等页面，都能正常使用Redux的useSelector和useDispatch钩子。

5. 在组件中使用Store示例

比如在Login组件里：

import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from '../store';
import { login } from '../features/user/userSlice';

export default function Login() {
  const currentUser = useSelector((state: RootState) => state.user);
  const dispatch = useDispatch<AppDispatch>();

  const handleLogin = () => {
    // 触发登录action
    dispatch(login({ username: 'demo', token: 'xxx123' }));
  };

  return (
    // 你的登录页面UI
  );
}

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