reactjs - 如何在微前端架构中共享 redux store?
问题描述
我正在尝试创建一个小项目来实现微前端文章之后的微前端架构。我正在为每个 MFE(微前端)创建多个存储库,并为应用程序使用 Redux。我有以下架构:
Frame
- 一个集中的(主)存储库,负责根据路由(我正在使用connected-react-router
)呈现主应用程序部分和 MFE。它初始化 Redux 存储并添加一个injectReducer
函数来动态添加减速器,如redux文档中的代码拆分中所述。框架获取特定 MFE 的清单并呈现它。该框架还有一些用于身份验证的 redux 数据。MFEs
- 这些是单独的功能应用程序,并按帧呈现。
现在我有一个问题,我想在injectReducer
我的 MFE 中使用函数来动态添加减速器来存储。为此,我需要访问store
由框架创建的同一实例。如this answer中所述,理想的方法是导出创建的商店实例并使用它,但是我们如何在多个存储库中共享相同的商店实例?
解决方案
文章中有一条评论直接解决了这个问题:
如果您使用的是 redux,通常的方法是为整个应用程序提供一个单一的、全局的、共享的存储。但是,如果每个微前端都应该是自己的独立应用程序,那么每个微前端都有自己的 redux 存储是有意义的。redux 文档甚至提到“将 Redux 应用程序隔离为更大应用程序中的组件”作为拥有多个商店的正当理由。
长话短说:不要分享你的 redux store
在你的微前端之间共享任何东西不再使它们成为独立的实体,并且违背了它的整个目的。现在它只是一个过度设计的单体。只需将这些相应的存储库转换为整体存储库中定义明确的模块即可。仍然可以在统一的 repo 中将职责拆分为各自的孤岛。只是需要更多的纪律。
推荐阅读
- typo3 - 通过 TSConfig 预填充弹性表单的值?
- c# - 在 ac# 项目上工作,对于 windows 服务器,在 linux 上开发它是否有意义?
- python - 我怎么能要求添加超过 1 个列表
- javascript - JS:在一个对象中合并 2 个数组
- storybook - 如何在故事书 iframe 上设置 CSS 样式
- c# - 标签和发件人如何在 c# 中工作找不到我的代码的修复程序
- python - 使用 python 在 Azure 中获取所有“全局管理员”用户
- python-3.x - 如何在python中保存文件以占用更少的内存?
- c# - C# - Dsharp:如何编辑机器人发送的消息
- javascript - “字面上”将字符串插入 HTML 输入