1

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

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

与反应。我有使用 redux(thunk,saga) 的 reactjs 经验，但在单个 spa 中，我无法拦截存储在单个 MFE根组件中的提供程序。

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

我所有的 MFE 都只在 reactjs 中。

#reactjs #redux #redux-saga。

4

1 回答 1

0

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

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

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


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

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


    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
      );

在作为客户道具商店传递后，GlobalEventDispatcher 将在传递给子应用程序的 singleSpaReact 的 rootComponent 中可用。从 rootComponent 它将作为道具传递给 Provider

我在实施它时提到了下面的回购。 https://github.com/me-12/single-spa-portal-example

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

于 2021-06-24T18:19:23.170 回答