reactjs - 如何在微前端场景中共享状态？

Question

第一个想法是饼干，但你可能很快就会用完空间。

Answer 1

有几种方法可以在微前端中进行通信。

正如已经提到的，不同的微前端应该是松散耦合的，所以你永远不会直接从一个到另一个。

关键问题是：您的微前端解决方案是在服务器端还是客户端组成？

对于客户端，我写了一篇关于通信的文章。

如果您在服务器端（由于提到 cookie，问题似乎朝那个方向发展），那么我建议使用标准微服务模式进行通信和交换状态。当然，使用 Redis 缓存等集中式系统会有所帮助。

一般来说，不同的微前端应该有自己的状态并尽可能独立。

通常你想要分享的不是状态/数据，而是带有 UI 表示的状态。原因很简单：这样您就不必处理表示和边缘情况（如果数据不可用怎么办？）。展示这一点的一个框架是Piral。

希望有帮助！

Answer 2

没有共享状态，这会打破应该发生的隔离概念。这种模式存在于所有微服务架构中，因为它应该消除单点故障和维护更大存储的其他复杂性。常见的方法是让每个“微前端”拥有自己的存储（即 Redux）。Redux文档对此有一个主题。

Answer 3

首先，您应该尽可能避免在 MicroFrontend (MFE) 之间共享状态。这是避免耦合、减少错误等的最佳实践。

很多时候您不需要它，例如，来自服务器的每个信息/状态（例如：“用户”信息）可以在每个 MFE 需要时单独请求。

但是，如果您真的需要共享状态，有一些解决方案，例如：

- 在 Window 对象中实现 pub/sub 模式。

有一些库已经提供了这个。

//MFE 1 
import { Observable } from 'windowed-observable';

const observable = new Observable('messages');
observable.publish(input.value); //input.value markup is not present in this example for simplicity


//MFE 2 
import { Observable } from 'windowed-observable';

const observable = new Observable('messages');

const handleNewMessage = (newMessage) => {
    setMessages((currentMessages) =>  currentMessages.concat(newMessage)); //custom logic to handle the message
  };

 observable.subscribe(handleNewMessage);

参考：https ://dev.to/luistak/cross-micro-frontends-communication-30m3#windowed-observable

- 调度/捕获自定义浏览器事件 请记住，自定义事件可以包含允许传递信息的“详细信息”

//MF1 
const customEvent = new CustomEvent('message', { detail: input.value });
window.dispatchEvent(customEvent)

//MF2 
const handleNewMessage = (event) => {
setMessages((currentMessages) => currentMessages.concat(event.detail));
};
    
window.addEventListener('message', handleNewMessage);

这种方法有一个重要问题，仅适用于“已调度的新事件”，因此如果您目前不捕获事件，则可以读取状态。

参考：https ://dev.to/luistak/cross-micro-frontends-communication-30m3#custom-events

在这两种实现中，使用良好的命名约定将有助于保持秩序。