如何在微前端架构中用单个MFE实现react redux

Question

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

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

使用reactjs。我有使用redux(thunk，saga(的reactjs的经验，但在单个spa中，我无法在个人MFE根组件中拦截具有存储的提供商。

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

我的所有MFE都只在reactjs中。

#reactjs#redux#redux传奇。

Answer 1

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

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

此存储将由主应用程序导入，并在主应用程序的全局事件分发服务器中注册。

class GlobalEventDistributor {

constructor() {
this.stores = [];
}

registerStore(store) {
this.stores.push(store);
}

dispatch(event) {
this.stores.forEach((s) => s.dispatch(event));
}
}

在注册应用程序时，此GlobalEventDistributor和存储将作为自定义道具传递。

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，它将作为道具传递给提供商

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

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