如何在Expo React Native的_layout文件中更新Redux Store？

你遇到的问题核心是：saveNotificationResponse函数里的useDispatch钩子需要在Redux <Provider>的上下文环境中调用，但当前代码里的useEffect在_layout组件渲染<Provider>之前就执行了，导致无法获取Redux上下文。下面提供两种可行的修复方案：

方案一：直接使用Redux Store实例进行dispatch #

既然你已经导入了Redux的store实例，完全可以跳过useDispatch钩子，直接调用store.dispatch来触发action，这样不需要依赖React上下文。

修改saveNotificationResponse函数：

function saveNotificationResponse() {
  // 直接使用导入的store实例，不再用useDispatch
  const subscription = Notifications.addNotificationResponseReceivedListener(
    (response) => {
      console.log(response.notification.request.content.data);
      store.dispatch(addMessage(response.notification.request.content.data));
    }
  );

  return () => {
    subscription.remove();
  };
}

同时删除代码中导入的useDispatch：

// 删掉这一行
import { useDispatch } from "react-redux";

这个方案最简单，不需要调整组件结构，适合快速修复。

方案二：将通知监听逻辑移到Provider包裹的组件中 #

如果更倾向于使用React Redux的钩子，可以创建一个专门的通知监听组件，把它放在<PersistGate>内部，确保组件处于Redux上下文环境中。

步骤如下：

1. 创建NotificationListener组件：

function NotificationListener() {
  const dispatcher = useDispatch();

  useEffect(() => {
    const subscription = Notifications.addNotificationResponseReceivedListener(
      (response) => {
        console.log(response.notification.request.content.data);
        dispatcher(addMessage(response.notification.request.content.data));
      }
    );

    return () => subscription.remove();
  }, [dispatcher]);

  return null; // 这个组件不需要渲染任何内容
}

2. 在_layout的返回值中，把这个组件放在<PersistGate>内部：

return (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      {/* 添加这个组件 */}
      <NotificationListener />
      <Stack>
        {/* 原有的Stack.Screen配置 */}
      </Stack>
    </PersistGate>
  </Provider>
);

3. 删除原来_layout中的useEffect和saveNotificationResponse函数：

// 删掉这部分代码
useEffect(() => {
  saveNotificationResponse();
}, []);

function saveNotificationResponse() {
  // ...原函数内容
}

这个方案更符合React Redux的最佳实践，钩子的使用也更规范。

两种方案都能解决你的问题，根据自己的偏好选择即可。

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