Webpack 5 Module Federation微前端集成react-redux运行异常如何解决

• 核心原因是React Redux的上下文实例冲突：react-redux默认使用全局唯一的Context实例传递store，微前端场景下如果父子应用共享React、react-redux运行时实例，子应用内部的connect高阶组件会默认向父应用的上下文树查找store，而不会读取自身根节点包裹的Provider提供的store，找不到就抛出对应错误。
• 微前端运行时隔离未覆盖React Context：主流微前端框架（如single-spa、qiankun）默认的沙箱隔离仅处理全局变量、样式冲突，不会默认隔离React Context实例，导致父子应用的Redux Context被打通。
• 依赖打包配置问题：如果子应用打包时未将react、react-redux等依赖打包为私有依赖，而是复用父应用的依赖实例，也会触发Context共享的问题。

以下方案可按实际场景选择：

方案1：子应用使用独立的Redux Context（兼容性最好） #

针对react-redux v7+版本，给子应用单独绑定专用的Redux Context即可彻底隔离上下文：

1. 子应用内部创建自定义Context

import React from 'react';
export const CustomReduxContext = React.createContext(null);

2. 子应用根节点的Provider指定自定义Context

import { Provider } from 'react-redux';
import { CustomReduxContext } from './custom-context';
// 初始化子应用自己的store
import store from './store';

// 根组件包裹时指定context属性
<Provider store={store} context={CustomReduxContext}>
  <App />
</Provider>

3. 子应用内所有使用Redux的地方指定该Context

• 类组件connect调用：

connect(mapStateToProps, mapDispatchToProps, null, { context: CustomReduxContext })(IndexPage);

• 函数组件Hooks调用：

import { useSelector, useDispatch } from 'react-redux';
import { CustomReduxContext } from './custom-context';

// 调用时传入context参数
const dispatch = useDispatch({ context: CustomReduxContext });
const userInfo = useSelector(state => state.user.info, { context: CustomReduxContext });

方案2：开启微前端沙箱的严格隔离 #

如果使用qiankun框架，注册子应用时开启严格沙箱，隔离运行时环境：

registerMicroApps([
  {
    name: 'ReactReduxApp',
    entry: '//localhost:8081',
    container: '#subapp-container',
    activeRule: '/react-redux-app',
    // 开启严格沙箱隔离运行时
    sandbox: { strictIsolation: true }
  }
])

方案3：统一依赖版本并调整打包配置 #

如果父子应用需要复用公共依赖，需满足两个条件：

• 父子应用的react、react-redux版本完全一致
• 打包时将react、react-redux设置为externals，通过全局变量统一引入，避免多实例冲突

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