9

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

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

现在我有一个问题，我想在injectReducer我的 MFE 中使用函数来动态添加减速器来存储。为此，我需要访问store由框架创建的同一实例。如this answer中所述，理想的方法是导出创建的商店实例并使用它，但是我们如何在多个存储库中共享相同的商店实例？

4

3 回答 3

6

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

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

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

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

于 2020-07-11T22:33:52.483 回答
2

你可以看看这个 NPM 包。这个包将允许每个微前端拥有自己的 redux 存储，但允许其他微前端查看和订阅其他微前端的状态更改。

Github
https://github.com/microsoft/redux-micro-frontend

NPM
https://www.npmjs.com/package/redux-micro-frontend

文章
https://www.devcompost.com/post/state-management-ii-world-of-micro-frontends

或许能解决你的问题。

于 2020-10-20T22:09:20.187 回答
1

使用合成事件进行跨微前端通信eventListeners，CustomEvent如下所示：

MF-1：

function Cart() {
  const [cartItems, addCartItems] = useState([]);

  const handleAddToCart = (event) => {
    addCartItems((currentItems) => [...currentItems,
    event.detail.item]);
  };

  useEffect(() => {
    window.addEventListener('addToCart', handleAddToCart);

    return () => {
      window.removeEventListener('addToCart', handleAddToCart)
    }
  }, [handleAddToCart]);
  ...
}

MF-2：

function itemLookUp() {
  const handleSubmit = (item) => {
    const customEvent = new CustomEvent('message', { detail: item });
    window.dispatchEvent(customEvent)
  }
  ...
}
于 2021-08-05T15:55:50.143 回答