多Div共享Redux State问题：React多Widget需独立状态管理

核心思路是让每个Widget实例拥有独立的Redux Store，而非共用全局Store。具体实现步骤如下：

1. 封装独立Store创建逻辑 #

把创建Redux Store的逻辑抽成可复用函数，每次渲染Widget时调用该函数生成专属Store，还可以根据data-id传入自定义初始状态：

// 封装创建Widget专属Store的函数
function createWidgetStore(initialState = {}) {
  // 导入你的reducer（确保reducer是纯函数，无全局状态依赖）
  import { rootReducer } from './path/to/your/reducers';
  
  return Redux.createStore(
    rootReducer,
    initialState,
    // 可选：添加中间件如redux-thunk等
    Redux.applyMiddleware(ReduxThunk)
  );
}

2. 修改renderCustomWidget函数 #

在渲染每个Widget时，解析当前element的data-id生成初始状态，创建专属Store，再通过React-Redux的Provider将Store注入到Widget组件中：

function renderCustomWidget(element) {
  // 从data-id解析参数（按你的格式拆分）
  const dataId = element.dataset.id;
  const [appName, userToken, timestamp] = dataId.split('_');
  
  // 生成当前Widget的初始状态
  const initialState = {
    appName,
    userToken,
    timestamp,
    // 其他业务所需初始状态字段
  };
  
  // 创建专属Store
  const widgetStore = createWidgetStore(initialState);
  
  // 渲染Widget，用Provider包裹并传入专属Store
  ReactDOM.render(
    <React.StrictMode>
      <Provider store={widgetStore}>
        {/* 你的Widget根组件 */}
        <CustomWidgetRoot />
      </Provider>
    </React.StrictMode>,
    element
  );
}

3. 保持原有渲染触发逻辑不变 #

原来的window.onload循环逻辑无需修改，因为每次调用renderCustomWidget都会为当前element生成独立的Store：

window.onload = function () {
  document.querySelectorAll('div[data-widget="custom"]').forEach(function (element) {
    renderCustomWidget(element);
  });
};

关键注意事项 #

• 确保你的reducer是纯函数，不要依赖全局变量或闭包状态，否则多个Store实例可能出现状态污染。
• 如果需要共享某些全局配置（如API地址），可以将其作为参数传入createWidgetStore，避免硬编码。
• 若使用Redux Toolkit，可改用configureStore替代createStore，逻辑一致，API更简洁。

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