React Redux多Store实现及弹窗独立应用通信与路由方案咨询

1. 是否可创建两个Redux Store并实现相互通信？ #

当然可以！多个Redux Store完全是合法的用法，尤其适配你这种独立弹窗应用的场景。实现通信的核心是在两个应用之间建立消息传递通道，常见的实现方式有这几种：

• postMessage跨窗口通信：如果弹窗是独立浏览器窗口，用window.postMessage传递状态更新指令。主应用可以向弹窗窗口发送带action的消息，弹窗监听message事件后调用自己的dispatch更新Store；反过来弹窗也能向主窗口发消息，触发主应用的状态变更。
  示例代码片段：

  // 主应用：向弹窗发送更新指令
  popupWindow.postMessage({ type: 'UPDATE_USER', payload: { name: 'John' } }, '*');
  
  // 弹窗应用：监听消息并更新Store
  window.addEventListener('message', (event) => {
    if (event.data.type === 'UPDATE_USER') {
      store.dispatch(event.data);
    }
  });
  

• 共享回调函数：如果弹窗是页面内模态框，主应用可以把自己的dispatch方法或自定义回调作为props传给弹窗组件，弹窗直接调用这些方法触发主应用状态变化；弹窗也可以暴露自身的Store方法给主应用调用。

• 自定义事件总线：在封装弹窗的Node模块里用EventEmitter实现一个简单事件总线，主应用和弹窗通过订阅/发布事件来同步状态。

2. 主应用与子应用的Store能否实现通信（参考子应用维护方案）？ #

你提到的子应用方案本质是微前端风格的隔离思路，这种模式下两个Store完全可以实现通信，关键是让双方能访问到彼此Store的核心方法：

• 暴露Store方法：子应用（弹窗）初始化时，可以把自己的dispatch和subscribe方法通过模块导出或全局挂载的方式提供给主应用。主应用拿到后，要么直接调用dispatch给子应用发action，要么通过subscribe监听子应用的状态变化，同步更新自身Store。
  示例：

  // 弹窗模块导出自己的Store
  export const popupStore = configureStore({ /* 弹窗Store配置 */ });
  
  // 主应用中监听弹窗Store变化
  popupStore.subscribe(() => {
    const popupState = popupStore.getState();
    mainStore.dispatch({ type: 'POPUP_STATE_UPDATED', payload: popupState });
  });
  

• 自定义中间件：给两个Store都添加自定义中间件，当检测到特定类型的action时，自动转发到另一个Store。比如主应用中间件识别到POPUP_ACTION类型的action，就调用弹窗Store的dispatch；弹窗中间件识别到MAIN_ACTION类型的action，就调用主应用Store的dispatch。

3. 弹窗应用中如何维护路由？弹窗窗口的历史回退功能无法正常工作，有何解决思路？ #

这个问题要分独立浏览器窗口和页面内模态框两种情况处理：

情况1：独立浏览器窗口弹窗

独立窗口有自己的window对象和专属history栈，完全可以正常使用BrowserRouter，和常规React应用一致。历史回退失效通常是因为弹窗初始化时路由组件挂载错误，或路由配置路径有误。

解决思路：

• 弹窗应用单独用BrowserRouter包裹，路由配置和普通应用一样
• 可以监听弹窗窗口的popstate事件，或用React Router的useNavigate/useHistory钩子处理回退逻辑，确保弹窗历史栈独立于主应用

示例代码：

// 弹窗应用入口
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function PopupApp() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<PopupHome />} />
        <Route path="/details" element={<PopupDetails />} />
      </Routes>
    </Router>
  );
}

情况2：页面内模态框弹窗

这种场景不能用BrowserRouter，因为它会共享主应用的history栈，导致回退时关闭弹窗的同时主应用也会跳转。应该用MemoryRouter，它在内存中维护独立的历史栈，完全不影响主应用路由。

解决历史回退问题：

• 用MemoryRouter包裹弹窗的路由组件
• 通过useNavigate钩子手动处理回退，或监听MemoryRouter的history变化控制弹窗显示/隐藏

示例代码：

// 主应用中的弹窗组件
import { MemoryRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';

function PopupModal() {
  const navigate = useNavigate();

  return (
    <div className="modal">
      <Router>
        <button onClick={() => navigate(-1)}>返回上一页</button>
        <Routes>
          <Route path="/" element={<ModalHome />} />
          <Route path="/settings" element={<ModalSettings />} />
        </Routes>
      </Router>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Sumanth madey