如何在同一页面的多个React应用之间共享单个Redux store

核心原理 #

Redux的store是独立于React组件树的状态容器，其状态更新、事件订阅逻辑都基于自身实例实现，和上层包裹的Provider数量无关。只要多个应用绑定的是同一个store实例，就能实现跨应用的状态共享和同步。

实现方案 #

当项目约束不允许将多个应用放在同一个组件树下时，直接给每个独立应用的根Provider传入同一个store实例即可，参考代码如下：

import React from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';
import store from './store.js';
import App1 from './App1.js';
import App2 from './App2.js';

// 挂载第一个独立应用
ReactDOM.render(
    <Provider store={store}>
        <App1 />
    </Provider>,
    document.querySelector('#app-1')
);

// 挂载第二个独立应用
ReactDOM.render(
    <Provider store={store}>
        <App2 />
    </Provider>,
    document.querySelector('#app-2')
);

注意事项 #

• 必须保证所有应用导入的是同一个store实例，不要在每个应用内部单独创建新的store，否则状态还是互相隔离无法共享
• 多应用共用store时建议按应用拆分reducer模块，统一规范action命名规则，避免不同应用的action命名冲突导致状态被意外修改
• 任意应用内dispatch的action都会触发所有绑定了该store的应用的组件更新，性能敏感场景可配合reselect、React.memo等能力优化不必要的重渲染
• 该方案支持2个及以上的独立应用共享状态，只需给每个应用的根Provider都传入同一个store实例即可

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