reactjs - 如何在微前端架构中共享 redux store?

标签 reactjs redux react-redux micro-frontend

我正在尝试创建一个小项目来实现 Micro Frontends 之后的微前端架构文章。我正在为每个 MFE(微前端)创建多个存储库,并为应用程序使用 Redux。我有以下架构:

  • Frame - 一个集中的(主)存储库,负责根据路由呈现主应用程序部分和 MFE(我使用的是 connected-react-router)。它初始化 Redux 存储并添加一个 injectReducer code splitting in redux 中解释的动态添加 reducer 的函数文档。框架获取特定 MFE 的 list 并呈现它。该框架还有一些用于身份验证的 redux 数据。
  • MFEs - 这些是单独的功能应用程序,并按帧呈现。

  • 现在我有一个问题,我想使用 injectReducer在我的 MFE 中运行以动态添加 reducer 来存储。为此,我需要访问相同的 store由框架创建的实例。
    this answer 中所述,理想的方法是导出创建的商店实例并使用它,但我们如何才能跨多个存储库共享相同的商店实例?

    最佳答案

    文章中有一条评论直接解决了这个问题:
    如果您使用的是 redux,通常的方法是为整个应用程序提供一个单一的、全局的、共享的存储。但是,如果每个微前端都应该是自己的独立应用程序,那么每个微前端都有自己的 redux 存储是有意义的。 redux 文档甚至提到“将 Redux 应用程序隔离为更大应用程序中的组件”作为拥有多个商店的正当理由。
    长话短说:不要分享你的 redux store
    在你的微前端之间共享任何东西不再使它们成为独立的实体,并且违背了它的整个目的。现在它只是一个过度设计的单体。只需将这些相应的存储库转换为整体存储库中定义明确的模块即可。仍然可以在统一的 repo 中将职责拆分为各自的孤岛。只是需要更多的纪律。

    关于reactjs - 如何在微前端架构中共享 redux store?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62853824/

    相关文章:

    javascript - Linting jsx-a11y 向 div 元素添加角色

    javascript - 使用 axios 向服务器发出请求会卡住 React Native 应用程序

    reactjs - 为 Webpack 生产环境实现 history-api-fallback

    javascript - 服务器端渲染+ react 路由器重定向

    reactjs - asyncLocalStorage 需要全局 localStorage 对象

    javascript - 在 React Router 上,如何保持登录状态甚至页面刷新?

    reactjs - Paypal 错误处理。找不到消息 postrobot_method 的消息确认处理程序

    javascript - 编辑大量内容的大型(大概)应用程序

    javascript - React Router - 如何索引重定向到动态路由

    reactjs - 以编程方式响应 native (使用 Redux)动画切换