Redux-Toolkit集成Redux-StateSync时createStateSyncMiddleware引发克隆错误

数据老陈

2026-6-29

解决DOMException: 无法在‘BroadcastChannel’上执行‘postMessage’：请求对象无法被克隆

这个错误的核心原因是Redux-State-Sync通过BroadcastChannel同步状态时，状态中包含了无法被结构化克隆算法处理的内容——比如RTK Query的apiSlice状态里存在函数、Symbol或其他不可序列化的对象，或者你的自定义reducer中存在这类数据。

具体解决步骤：

过滤不需要同步的状态分支
RTK Query的apiSlice状态不需要通过Redux-State-Sync同步（它自身已经有缓存同步机制），而且其内部包含大量不可序列化内容。你需要在createStateSyncMiddleware中配置，排除该状态分支，同时确保只同步你需要的可序列化状态：

修改中间件配置部分，给createStateSyncMiddleware添加whitelist或blacklist来指定状态范围：

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat(
      // 只同步指定的状态分支，排除apiSlice
      createStateSyncMiddleware({
        blacklist: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, apiSlice.reducerPath],
        // 或者用whitelist明确指定要同步的部分：
        // whitelist: ['global', 'component', 'cachedData']
      }),
      apiSlice.middleware,
      rtkQueryErrorLogger
    ),
});

排查自定义状态中的不可序列化内容
检查globalReducer、componentSlice、cachedDataSlice的状态，确保没有生成函数、Promise、DOM元素、Symbol这类无法被克隆的数据。可以暂时开启Redux-Toolkit的serializableCheck全量检查（去掉ignoredActions），运行项目时控制台会输出具体的不可序列化数据位置，针对性修复。
确认Redux-Persist的配置
你的persist配置已经用whitelist指定了只缓存cachedData，这部分没问题，但要确保cachedData的内容都是可序列化的。