微前端架构中Redux状态共享：1主应用1远程应用示例

一、主容器应用改造 #

要支持远程应用动态注入状态逻辑，首先得扩展主应用Redux Store的能力，让它能在运行时接收新的Reducers和Sagas。

1. 修改Redux Store配置 #

更新主应用src/redux/index.js，添加动态注入方法：

import { configureStore, combineReducers } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas/rootSaga';

// 创建并挂载saga中间件
const sagaMiddleware = createSagaMiddleware();

// 初始化Store，预留动态注入空间
const store = configureStore({
  reducer: {
    // 主应用自身的Reducers放在这里
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(sagaMiddleware),
});

// 运行主应用根Saga
sagaMiddleware.run(rootSaga);

// 动态注入Reducer的方法
store.injectReducer = (key, reducer) => {
  if (store.asyncReducers?.[key]) return;
  
  store.asyncReducers = { ...store.asyncReducers, [key]: reducer };
  // 替换根Reducer，保留原有状态
  store.replaceReducer(combineReducers({
    ...store.getState(),
    ...store.asyncReducers,
  }));
};

// 动态注入Saga的方法
store.injectSaga = (key, saga) => {
  if (store.sagas?.[key]) return;
  
  // 运行Saga并保存任务（可选：用于后续卸载时取消）
  const task = sagaMiddleware.run(saga);
  store.sagas = { ...store.sagas, [key]: task };
};

export default store;

2. 确认Module Federation配置 #

保持现有MF配置不变，确保react-redux、@reduxjs/toolkit、redux-saga等依赖在shared中设置为singleton: true，避免多实例导致的状态冲突。

二、远程仪表盘应用适配 #

远程应用需要自动判断运行环境，独立运行时用自身Store，嵌入主容器时复用主应用Store并注入自身逻辑。

1. 封装Store入口 #

在远程应用创建src/redux/store.js，实现环境判断与自动注入：

import { configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas/rootSaga';
import dashboardReducer from './slices/dashboardSlice';

let store;
try {
  // 尝试导入主应用的GlobalStore，判断是否在容器环境中
  store = require('container/GlobalStore').default;
  // 注入远程应用的Reducer和Saga
  store.injectReducer('dashboard', dashboardReducer);
  store.injectSaga('dashboardSaga', rootSaga);
} catch (e) {
  // 独立运行时，创建自身完整的Redux+Saga环境
  const sagaMiddleware = createSagaMiddleware();
  store = configureStore({
    reducer: {
      dashboard: dashboardReducer,
    },
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware().concat(sagaMiddleware),
  });
  sagaMiddleware.run(rootSaga);
}

export default store;

2. 统一应用入口组件 #

远程应用的主组件直接使用封装好的Store，无需区分环境：

// src/App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './redux/store';
import Dashboard from './components/Dashboard';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter([
  { path: '/', element: <Dashboard /> },
]);

const App = () => {
  return (
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  );
};

export default App;

3. 简化嵌入容器的组件（可选） #

原InsideContainerApp可以简化，因为远程应用已自行处理Store注入：

import React from 'react';
import App from './App';

const InsideContainerApp = () => {
  // 无需再传入Provider，直接渲染远程应用即可
  return <App />;
};

export default InsideContainerApp;

如果需要主容器控制路由，可将router作为props传入远程应用，调整路由配置适配外部传入的路由实例。

三、关键注意事项 #

• 依赖唯一性：确保Redux相关共享依赖为单实例，否则会出现状态不互通的问题。
• Reducer Key唯一：远程应用的Reducer key（如示例中的dashboard）需全局唯一，避免与主应用或其他远程应用冲突。
• Saga生命周期管理：若需支持远程应用卸载时取消Saga任务，可在injectSaga时保存任务实例，卸载时调用task.cancel()。
• 持久化兼容：如果主应用使用状态持久化，需在Store初始化时检查持久化数据，自动注入对应Reducer。

四、替代方案：导出Slice和Saga灵活注册 #

远程应用可直接导出自身的Slice和Saga，在运行时由主应用或自身完成注册：

// 远程应用src/redux/exports.js
export { default as dashboardSlice } from './slices/dashboardSlice';
export { default as dashboardSaga } from './sagas/dashboardSaga';

然后在远程应用初始化时调用：

store.injectReducer(dashboardSlice.name, dashboardSlice.reducer);
store.injectSaga(dashboardSlice.name, dashboardSaga);

这种方式更灵活，支持远程应用导出多个状态切片。

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