Next.js项目：如何在iframe外部连接RTK到内部Redux Store？

我们有一个使用Context进行状态管理的Next.js应用，由于全局Context更新会触发所有消费者重渲染，且无法改为局部Context，因此迁移到Redux。

已构建的Redux Store代码如下：

const buildStore = () => {
  const devMode = process.env.NODE_ENV === 'development';
  const sagaMiddleware = createSagaMiddleware();

  const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) => [
      ...getDefaultMiddleware({
        thunk: false, // 我们使用redux-saga，而非默认的thunk
        serializableCheck: false, // 解决redux toolkit的相关问题
      }),
      sagaMiddleware,
    ],
    devTools: devMode, // 开发环境启用devTools
  });
  sagaMiddleware.run(rootSaga);

  return store;
};

组件中使用Store的代码：

const Widget = ({ formSettings }) => {
  const client = getClient();
  const store = buildStore();

  return (
    <ReduxProvider store={store}>
      <StateProvider formSettings={formSettings}>
        <ApolloProvider client={client}>
          <ThemeProvider>
            <Form />
            <BrowserMessages />
          </ThemeProvider>
        </ApolloProvider>
      </StateProvider>
    </ReduxProvider>
  );
};

我们同时使用Apollo（其内部包含Redux Store），计划移除Context。

当前问题：该应用嵌入在iframe中，本地开发时在iframe内可看到RTK的动作和状态更新，但staging环境下在iframe外部无法看到RTK的动作及Store更新（虽能看到BrowserMessages触发的网络请求，应用运行正常）。

需要解决：如何在iframe外部连接RTK到内部的Redux Store？

1. 配置Redux DevTools跨iframe通信支持 #

Redux DevTools默认限制了跨iframe连接，需显式配置devTools选项允许外部窗口接入：
修改buildStore中的devTools配置，替换原布尔值为对象形式：

devTools: devMode ? {
  name: 'IFrame Redux Store', // 给Store命名方便区分
  hostname: '*', // 允许任何域名连接，生产环境可指定具体域名
  maxAge: 50, // 保留历史动作的数量
  actionsDenylist: [] // 可选：排除无需监控的动作
} : false

2. 检查iframe的sandbox属性配置 #

如果staging环境的iframe设置了sandbox属性，必须添加allow-same-origin和allow-scripts以解除通信限制：

<iframe src="你的应用地址" sandbox="allow-same-origin allow-scripts allow-top-navigation"></iframe>

若主页面与iframe属于不同域名，需确保双方配置了正确的CORS策略，避免跨域拦截。

3. 手动在主窗口连接iframe内的Store #

若自动连接失败，可在主页面控制台执行以下代码手动建立连接：

const iframe = document.querySelector('iframe');
window.__REDUX_DEVTOOLS_EXTENSION__.connect({
  name: 'IFrame Redux Store',
  iframe: iframe.contentWindow
});

4. 修复Store实例重复创建的问题 #

你的Widget组件每次渲染都会调用buildStore()生成新Store实例，这会导致DevTools无法稳定追踪状态。建议将Store创建提升到组件外部，确保全局唯一实例：

// 在单独文件（如store.js）中创建单例Store
const store = buildStore();

// Widget组件中直接导入使用
const Widget = ({ formSettings }) => {
  const client = getClient();

  return (
    <ReduxProvider store={store}>
      {/* 其他Provider代码 */}
    </ReduxProvider>
  );
};

5. 区分Apollo内部Store与应用Store #

由于Apollo自带Redux Store，需通过devTools配置的name字段区分两者，这样在DevTools的Store选择器中可以切换到你的应用Store，避免混淆。

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