通过Module Federation共享Zustand Store时远程应用无法接收更新

问题描述 #

我正在用Webpack Module Federation构建微前端架构，包含宿主应用和远程购物车应用，尝试将宿主端的全局Zustand Store（themeStore）共享给远程应用，但远程应用只能获取初始值，无法接收宿主端Store的更新。

预期目标 #

• 在宿主应用（themeStore.ts）中创建Zustand Store
• 通过ModuleFederationPlugin暴露该Store
• 在远程应用中消费该Store
• 远程应用响应宿主端的Store变更

宿主配置与代码 #

webpack.config.ts

new ModuleFederationPlugin({
  name: "host",
  filename: "remoteEntry.js",
  exposes: {
    "./ThemeStore": "./src/store/themeStore.ts",
  },
  shared: {
    react: { singleton: true, requiredVersion: deps.react },
    "react-dom": { singleton: true, requiredVersion: deps["react-dom"] },
    zustand: { singleton: true, requiredVersion: deps.zustand },
  },
}),

themeStore.ts

import create from 'zustand';

export const useThemeStore = create((set) => ({
  theme: 'light',
  toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
}));

远程应用配置与代码 #

webpack.config.js

new ModuleFederationPlugin({
  name: "cart",
  filename: "remoteEntry.js",
  remotes: {
    host: "host@http://localhost:8000/remoteEntry.js",
  },
  shared: {
    react: { singleton: true },
    "react-dom": { singleton: true },
    zustand: { singleton: true },
  },
}),

ListItems组件

import React from "react";
import { useThemeStore } from "host/ThemeStore";

function ListItems() {
  const theme = useThemeStore((state) => state.theme);

  return (
    <>
      <h1>I'm from List Items</h1>
      <p>Current Theme: {theme}</p>
    </>
  );
}

export default ListItems;

问题现象与已检查项 #

• 宿主应用点击切换按钮更改主题时，远程应用会重新渲染，但始终显示初始主题值，远程端的useThemeStore未订阅到更新
• 已确认：zustand设为单例、Store模块正确暴露导入、宿主端useThemeStore运行正常

疑问 #

1. 为何Zustand Store的更新无法同步到远程应用？
2. 跨微前端边界共享Zustand的正确模式是什么？
3. Zustand与Module Federation存在哪些已知限制？

解决方案与解释 #

1. 为何更新无法同步？ #

直接暴露并导入宿主端的useThemeStore hook会导致订阅失效，核心原因是zustand的useStore hook依赖于其创建时的模块上下文。Module Federation在跨应用共享模块时，会对导出的模块做包装处理，远程应用导入的hook无法正确绑定到宿主端store的订阅机制，因此即使store实例是单例，远程组件也无法感知到状态更新。

另外，虽然你已经将zustand设为singleton，但直接共享创建好的hook会因为闭包隔离问题，导致远程端的订阅逻辑无法关联到宿主端的状态变更流。

2. 跨微前端共享Zustand的正确模式 #

推荐采用共享store实例+远程端本地useStore订阅的方式，具体步骤如下：

步骤1：宿主端修改Store导出

将store实例单独导出，而非仅导出useStore hook：

// 宿主端 themeStore.ts
import create from 'zustand';

// 创建store实例
const themeStore = create((set) => ({
  theme: 'light',
  toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
}));

// 保留原hook供宿主内部使用
export const useThemeStore = themeStore;
// 导出store实例供远程应用使用
export { themeStore };

步骤2：远程端修改订阅方式

使用本地的zustand useStore hook来订阅宿主的store实例：

// 远程端 ListItems组件
import React from "react";
import { useStore } from 'zustand';
import { themeStore } from "host/ThemeStore";

function ListItems() {
  // 用本地useStore订阅宿主的store实例
  const theme = useStore(themeStore, (state) => state.theme);

  return (
    <>
      <h1>I'm from List Items</h1>
      <p>Current Theme: {theme}</p>
    </>
  );
}

export default ListItems;

其他可选模式

• React上下文共享：宿主端将store实例注入全局React上下文，远程应用在宿主的上下文环境中渲染，通过useContext获取store实例后再订阅。这种方式需要确保远程组件挂载到宿主的React树中。
• 自定义事件同步：宿主端store更新时触发自定义事件，远程应用监听事件并更新本地状态。这种方式适合不需要直接共享store实例的场景，但状态同步会有延迟。

3. Zustand与Module Federation的已知限制 #

• hook跨应用共享失效：直接共享创建好的useStore hook会因为模块上下文隔离导致订阅失效，必须共享store实例。
• 版本兼容性问题：如果宿主和远程应用的zustand版本不匹配，即使设置了singleton: true，Webpack也会加载两个版本的zustand，导致store实例不共享，状态无法同步。
• 异步加载风险：远程应用可能在store实例未加载完成时就尝试使用，需要添加加载状态处理（比如用React.Suspense包裹远程组件）。
• 非序列化状态限制：如果store中包含函数、Symbol等非序列化值，虽然通过实例共享可以正常使用，但如果尝试通过postMessage等方式同步状态会出现问题。

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