单网页多React嵌入组件实例的多Redux实例创建与关联咨询

Absolutely feasible! Creating multiple Redux stores is a perfectly valid approach here, and it’s exactly what you need to keep state isolated between different widget instances on the same page. Let’s break down how to implement this, plus cover alternative options if you prefer not to use multiple stores.

方案1：为每个Widget实例创建独立Redux Store #

This is the most straightforward and recommended approach for your embedded widget scenario, since it ensures complete state isolation between instances.

实现步骤： #

• 在Widget初始化函数内创建专属Store：每次调用new ConvertWidget(...)时，生成一个全新的Redux store（可以使用Redux核心的createStore或Redux Toolkit的configureStore）。
• 用Provider绑定实例与Store：将Widget的根React组件用Redux Provider包裹，并传入该实例专属的store，再渲染到目标容器中。

代码示例： #

// 假设这是你的Widget核心初始化逻辑
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider, configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers'; // 你的根reducer
import ConvertWidgetRoot from './components/ConvertWidgetRoot';

window.ConvertWidget = function(config, container) {
  // 为当前Widget实例创建独立的Redux Store
  const widgetStore = configureStore({
    reducer: rootReducer,
    preloadedState: {
      // 根据传入的config初始化实例状态
      currency: {
        baseCurrencyId: config.baseCurrencyId,
        pairCurrencyId: config.pairCurrencyId,
        displayCurrency: config.displayCurrency
      },
      ui: {
        primaryColor: config.primaryColor
      }
    }
  });

  // 渲染组件，通过Provider关联当前实例的Store
  const root = ReactDOM.createRoot(container);
  root.render(
    <Provider store={widgetStore}>
      <ConvertWidgetRoot config={config} />
    </Provider>
  );
};

关键注意事项： #

• 确保你的reducer是纯函数（这也是Redux的最佳实践），这样可以避免因共享闭包导致的跨实例状态泄漏。
• Redux Toolkit的configureStore每次调用都会生成完全独立的store，不用担心意外的状态共享。

方案2：单一Redux Store + 实例隔离的状态结构 #

如果你偏爱使用单一全局store（比如需要统一追踪所有Widget实例的状态），可以将状态按唯一的Widget ID进行划分。

实现思路： #

• 按实例ID划分状态：根reducer管理一个widgets切片，其中每个键是Widget实例的唯一ID，对应的值就是该实例的状态。
• 传递实例ID到组件：每个Widget实例生成一个唯一ID，将这个ID传递给组件，让组件可以从全局store中选择自己的专属状态。

代码示例： #

根Reducer结构

import { combineReducers } from '@reduxjs/toolkit';
import widgetsReducer from './widgetsReducer';

const rootReducer = combineReducers({
  widgets: widgetsReducer
});

Widgets Reducer

import { createSlice } from '@reduxjs/toolkit';

const widgetsSlice = createSlice({
  name: 'widgets',
  initialState: {},
  reducers: {
    updateBaseCurrency: (state, action) => {
      const { instanceId, baseCurrencyId } = action.payload;
      state[instanceId] = { ...state[instanceId], baseCurrencyId };
    },
    // 其他实例相关的action
  }
});

export const { updateBaseCurrency } = widgetsSlice.actions;
export default widgetsSlice.reducer;

Widget初始化与组件使用

// 全局唯一的Redux Store
const store = configureStore({ reducer: rootReducer });

window.ConvertWidget = function(config, container) {
  const instanceId = `widget-${Math.random().toString(36).slice(2, 11)}`; // 生成唯一ID

  // 初始化实例状态到全局store
  store.dispatch(setInitialWidgetState({
    instanceId,
    ...config
  }));

  const root = ReactDOM.createRoot(container);
  root.render(
    <Provider store={store}>
      <ConvertWidgetRoot instanceId={instanceId} config={config} />
    </Provider>
  );
};

// 在组件中选择实例专属状态
function ConvertWidgetRoot({ instanceId }) {
  const baseCurrencyId = useSelector(state => state.widgets[instanceId].baseCurrencyId);
  const dispatch = useDispatch();

  const handleCurrencyChange = (newId) => {
    dispatch(updateBaseCurrency({ instanceId, baseCurrencyId: newId }));
  };

  // ...组件逻辑
}

方案3：使用React Context API替代Redux #

如果你的Widget状态逻辑不算复杂，也可以跳过Redux，直接用React内置的Context API实现实例隔离的状态。每个Widget实例会有自己的Context和Provider，确保状态不会在实例间共享。

代码示例： #

// 创建可复用的Context工厂函数
function createWidgetContext() {
  return React.createContext();
}

window.ConvertWidget = function(config, container) {
  // 为当前实例创建专属Context
  const WidgetContext = createWidgetContext();

  // 创建Context Provider的状态管理组件
  function WidgetProvider({ children }) {
    const [state, setState] = React.useState({
      baseCurrencyId: config.baseCurrencyId,
      pairCurrencyId: config.pairCurrencyId,
      // ...其他状态
    });

    const updateCurrency = (newBaseId) => {
      setState(prev => ({ ...prev, baseCurrencyId: newBaseId }));
    };

    return (
      <WidgetContext.Provider value={{ state, updateCurrency }}>
        {children}
      </WidgetContext.Provider>
    );
  }

  const root = ReactDOM.createRoot(container);
  root.render(
    <WidgetProvider>
      <ConvertWidgetRoot />
    </WidgetProvider>
  );
};

// 在子组件中使用Context
function CurrencySelector() {
  const { state, updateCurrency } = React.useContext(WidgetContext);
  // ...组件逻辑
}

总结 #

对于你的嵌入式Widget场景，**方案1（独立Redux Stores）**是最优选择。它实现简单，提供完全的状态隔离，完美匹配同一页面运行多个独立实例的需求。其他方案也可行，但除非你有特定需求（比如全局追踪所有Widget实例），否则会增加不必要的复杂度。

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