如何解决react中的微前端
你好，我正在学习微前端架构。考虑到我正在开发电子商务应用程序，我有四个垂直领域 - 主页、帐户、PLP&PDP 和购物车&结帐。
我的理解是，每个垂直领域都有自己的观点、行动、减速器、传奇、商店。这里我们将有 4 个 redux store。
我的问题是有一些东西，比如用户配置文件缩减器，它们可能对在所有这些微前端应用程序之间共享有用。这里使用 4 个 redux store 是个好主意吗？
在 React Web 应用程序中处理此问题的正确方法是什么？
解决方法
根据我的经验，最好在微前端的框架级别管理一个 redux 存储，即每个微应用程序的命名空间。加载每个应用程序时，它可以动态加载减速器、中间件和数据。
采用这种方法的原因是，您最终将不可避免地需要在不同的微应用之间共享一些数据，而当您只有一个存储时，这会容易得多。
看看这个来自 Microsoft 的项目，它使这件事变得非常简单。
https://github.com/Microsoft/redux-dynamic-modules
他们有许多其他解决方案可以将不同的东西动态加载到您的商店中
,您正确地将微前端划分为主页、帐户、PLP&PDP 和购物车&结帐，这些将有自己的商店，您可以单独维护它们。
然而，问题是他们应该单独进行服务调用并为此维护他们的商店。
现在这样，userProfile 将与产品列表页面和产品详细信息页面无关。 Cart 和 Checkout 组件的情况相同。它们可能需要令牌来进行一些 API 调用，但可以从 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
,您的问题没有标准模板解决方案，它完全基于需求。我正在分享我如何处理类似的项目结构并将大型单体转换为前端和后端微服务。 FE 是使用 Angular、React 和 Vue 的不同技术组合开发的。我们使用 https://single-spa.js.org/ 来管理不同的模块，并使用 Angular 和 Vue 在 React 和子框架中创建了一个父应用程序（容器）作为单独的应用程序。数据共享管理是通过混合使用 cookie/本地存储和 redux 来完成的。子应用程序和父应用程序之间的数据共享使用 Post Robot https://github.com/krakenjs/post-robot。过去 1.5 年，我们一直在生产中运行这种结构，它是可扩展的解决方案。
,如果您的某些 redux 存储需要在您的应用程序中共享，那么只需使用带有纱线工作区的 monorepo 从该 redux 存储中创建一个单独的包。
您可以将该存储安装为单独的包，然后按定义的包名称使用它。
有关此主题的更多信息，请查看 Yarn Workspaces 网站。 https://classic.yarnpkg.com/en/docs/workspaces/
此外，只要您的微前端本身应该是一个独立的应用程序，使用 4 redux store 并没有那么糟糕。但是，如果您的所有微前端都在使用数据，那么请为单一事实来源创建单一存储。
,据我所知，微前端架构 (MFeA) 不应该与页面的其他部分有任何依赖关系，它必须独立工作。
基于此，后端服务必须向 UI 发送必要的信息。
对于用户信息，您可以使用 Session 并从中获取相应的信息。
为了管理用户配置文件，它可以是另一个 MFeA 模块。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。