问react中的微前端

EN

你的问题没有标准的模板解决方案，它都是基于需求的。我正在分享我如何在类似的项目结构上工作，并将大型整体转换为前端和后端微服务。有限元是使用不同的技术组合的角度，反应和Vue。我们使用https://single-spa.js.org/来管理不同的模块，并使用Angular和Vue在React和子框架中创建了一个父应用程序(容器)作为单独的应用程序。数据共享管理是通过混合使用cookie/本地存储和redux完成的。孩子和家长应用程序之间的数据共享是使用Post Robot https://github.com/krakenjs/post-robot。我们在过去一年半的生产中运行了这个结构，它是一个可扩展的解决方案。

在我的经验中，你最好有一个redux存储，它在你的微前端的框架级别管理，即每个微应用的名称空间。当每个应用被加载时，它可以动态地加载减速器、中间件和数据。

采用这种方法的原因是，您将不可避免地需要在不同的微应用程序之间共享一些数据，而当您有一个单独的存储时，这会容易得多。

看看微软的这个项目，它现在让这件事变得非常简单。

https://github.com/Microsoft/redux-dynamic-modules

他们有许多其他的解决方案，可以动态地将不同的东西加载到你的存储中

https://github.com/markerikson/redux-ecosystem-links/blob/master/reducers.md#dynamic-reducer-injection

你已经正确地将微前端划分为Home、Account、PLP&PDP和Cart&Checkout，这些将有自己的商店，允许您单独维护它们。

然而，问题是他们应该单独进行服务调用，并为此维护他们的存储。

这样，userProfile将与Product Listing Page和Product Details Page无关。Cart和Checkout组件的情况相同。它们可能需要令牌才能进行一些应用编程接口调用，但是可以从localStorage中获取该值。

另一种选择是拥有一个单一的Store，并将函数传递给相应的微前端以进行操作。然而，这会使您的应用程序复杂化，并朝着单一的方法发展，从而违背了MFE架构的目的。

请参阅此链接以查看基本的https://martinfowler.com/articles/micro-frontends.html#Cross-applicationCommunication

作为附注，当涉及到MFE之间的通信时，使用自定义事件也是有效的，但在项目之间需要大量交互的情况下更可取。参考：https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events