如何在微前端架构中共享 redux store? [英] How to share redux store in micro frontend architecture?

问题描述

我正在尝试按照 微前端 文章.我正在为每个 MFE(微前端)创建多个存储库，并为应用程序使用 Redux.我有以下架构:

I am trying to create a small project to implement micro-frontend architecture following Micro Frontends article. I am creating multiple repositories for each MFE(Micro frontend) and also using Redux for the application. I have the following architecture:

1. Frame - 一个集中式(主)存储库，负责根据路由呈现主要应用程序部分和 MFE(我使用的是 connected-react-router).它初始化 Redux 存储并添加一个 injectReducer 函数来动态添加减速器，如 redux 中的代码拆分 文档.该框架获取特定 MFE 的清单并呈现它.该框架还有一些用于身份验证的 redux 数据.
2. MFEs - 这些是单独的功能应用程序，按帧呈现.

1. Frame - A centralised(main) repo that is responsible for rendering the main application part and MFEs based on routing(I am using connected-react-router). It initialises the Redux store and also adds an injectReducer function to dynamically add reducers as explained in code splitting in redux docs. The frame fetches the manifest for particular MFE and renders it. The frame also has some redux data for authentication purpose.
2. MFEs - These are the individual feature-wise application and are rendered by frame.

现在我有一个问题，我想在我的 MFE 中使用 injectReducer 函数来动态添加减速器来存储.为此，我需要访问由框架创建的同一个 store 实例.如这个答案中所述，理想的方法是导出创建的 store 实例并使用它，但是我们如何在多个 repos 之间共享同一个 store 实例?

Now I have a problem that I want to use injectReducer function into my MFEs to dynamically add reducers to store. For this, I need access to the same store instance that is created by frame. As mentioned in this answer, the ideal way is to export the created store instance and use it but how we can share the same instance of the store across multiple repos?

推荐答案

文章中有一条评论直接解决了这个问题:

There is a comment in the article addressing this directly:

如果您使用的是 redux，通常的方法是为整个应用程序创建一个单一的、全局的、共享的存储.然而，如果每个微前端都应该是它自己的独立应用程序，那么每个微前端都有自己的 redux 存储是有意义的.redux 文档甚至提到将 Redux 应用程序隔离为更大应用程序中的一个组件".作为拥有多个商店的正当理由.

If you are using redux, the usual approach is to have a single, global, shared store for the entire application. However, if each micro frontend is supposed to be its own self-contained application, then it makes sense for each one to have its own redux store. The redux docs even mention "isolating a Redux app as a component in a bigger application" as a valid reason to have multiple stores.

长话短说:不要分享你的 redux store

Long story short: Don't share your redux store

在您的微前端之间共享任何东西不再使它们成为独立的实体并违背其全部目的.现在它只是一个过度设计的单体.只需将这些各自的存储库转换为单体存储库中定义明确的模块即可.仍然可以在统一的 repo 中将职责拆分为各自的孤岛.只是需要更多的纪律.

Sharing anything between your micro frontends no longer makes them separate entities and defeats the entire purpose of it. Now it's just an overengineered monolith. Just turn those respective repos into well-defined modules inside a monolith repo. It is still possible to split responsibilities into their own silos in a unified repo. It just takes more discipline.

这篇关于如何在微前端架构中共享 redux store?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！