微前端子应用之间如何共享全局状态？

Dev · 保霞提问于 2026-03-03 17:27:21 阅读 6

前端

我在用qiankun搭微前端，主应用和两个React子应用都需要读写同一个用户信息，试过用Redux但每个子应用是独立的store，改了主应用的state子应用根本感知不到，这要怎么搞？

比如主应用登录后设置用户数据，子应用里拿不到最新的值。我尝试在主应用里导出store，然后子应用import进来，但好像因为模块隔离根本不是同一个实例：

// 主应用 store.js
import { createStore } from 'redux';
const store = createStore(userReducer);
export default store;

// 子应用中
import mainStore from 'mainApp/store'; // 实际上拿不到，或者不是同一个实例

我来解答赞 1 收藏

反馈

1 条解答

UX-爱菊 Lv1

直接 import 肯定是不行的，微前端的沙箱机制和构建流程把主子应用彻底隔离开了，你那个路径在子应用里根本解析不到主应用的运行时实例。

既然你们已经上了 Redux，最直接、改动最小的方案就是把主应用的 store 挂载到 window 对象上。虽然听起来有点原始，但在微前端架构里，这是共享全局状态最高效的办法，子应用直接从 window 上拿这个实例即可。

在主应用里，初始化 store 后直接挂载：

import { createStore } from 'redux';

import userReducer from './reducers';



const store = createStore(userReducer);



// 关键一步：挂载到 window，确保子应用能访问到

window.__MAIN_STORE__ = store;



export default store;

然后在子应用里，不要自己创建 store，而是去判断 window 上有没有：

import { createStore } from 'redux';

import userReducer from './reducers';



let store;



// 优先使用主应用的 store 实例，实现共享

if (window.__MAIN_STORE__) {

    store = window.__MAIN_STORE__;

} else {

    // 兜底逻辑：如果子应用独立运行（比如本地开发），就自己创建一个

    store = createStore(userReducer);

}



export default store;

这样主应用和子应用持有的就是同一个 store 引用了，任何一方 dispatch，另一方都能通过 subscribe 或 useSelector 监听到变化。

要注意一点，qiankun 的沙箱可能会影响 window 属性的读取，不过挂载自定义属性通常没问题。如果遇到子应用读取不到的情况，检查一下 qiankun 的沙箱配置，或者确保挂载动作在子应用初始化之前完成。另外，记得给这个全局变量加个前缀，比如 __MAIN_STORE__，避免跟其他全局变量冲突。

2026-03-03 22:38