如何在带有单个 MFE 的微前端架构中实现 react-redux？答案

【问题标题】：how to implement react-redux in micro frontend architecture with individual MFE?如何在带有单个 MFE 的微前端架构中实现 react-redux？
【发布时间】：2021-09-07 21:13:55
【问题描述】：

可能是重复的问题，尽管我的业务案例略有不同，因为我需要专家的帮助。

第一次，我在single spa framework的帮助下在当前项目中使用微前端架构

使用 reactjs。我有使用 redux(thunk,saga) 的 reactjs 经验，但在单个 spa 中，我无法在 individual MFE 中使用 store 拦截提供者根组件。

任何人都使用过带有单个 SPA 框架的 reactjs 以及带有单个 MFE 的 redux。

我所有的 MFE 都只在 reactjs 中。

#reactjs #redux #redux-saga。

【问题讨论】：

我面临同样的问题

标签： reactjs react-redux redux-saga micro-frontend single-spa

【解决方案1】：

我已经实现了一段时间，也在 MFE 之间使用 redux 进行应用间通信。

商店是在子应用中单独构建的。

该商店将由主应用导入并在主应用的全球事件分发器中注册。


    class GlobalEventDistributor {
    
        constructor() {
            this.stores = [];
        }
    
        registerStore(store) {
            this.stores.push(store);
        }
    
        dispatch(event) {
            this.stores.forEach((s) => s.dispatch(event));
        }
    }

这个 GlobalEventDistributor 和 store 将在注册应用程序时作为自定义 prop 传递。


    let storeModule = {},
        customProps = {
          globalEventDistributor: globalEventDistributor,
          ...additionalProps,
        };
    
      try {
        storeModule = storeURL
          ? await SystemJS.import(storeURL)
          : { storeInstance: null };
      } catch (e) {
        console.error(`Could not load store of app ${name}.`, e);
      }
    
      if (storeModule.storeInstance && globalEventDistributor) {
        // add a reference of the store to the customProps
        customProps.store = storeModule.storeInstance;
    
        // register the store with the globalEventDistributor
        globalEventDistributor.registerStore(storeModule.storeInstance);
      }
    
      // register the app with singleSPA and pass a reference to the store of the app as well as a reference to the globalEventDistributor
      singleSpa.registerApplication(
        name,
        () => SystemJS.import(appURL),
        hashPrefix(hash, wild),
        customProps
      );

作为customer props store 传递后，GlobalEventDispatcher 将在传递给子应用的singleSpaReact 的rootComponent 中可用。从 rootComponent 它将作为道具传递给 Provider

我在实现它时参考了下面的 repo。 https://github.com/me-12/single-spa-portal-example

注意：目前我们正在迁移到 Module Federation 而不是使用 singleSPA，您也可以尝试。

【讨论】：