如何配置Redux Toolkit，使读写Reducer仅在组件配置应用加载、嵌入运行时排除？

1. 推荐模式 #

核心思路是拆分状态逻辑+动态注入reducers+代码分割：

• 将每个组件的状态逻辑拆分为通用核心部分（如状态结构、只读选择器、数据初始化thunks）和编辑器专属部分（所有修改状态的reducer、编辑相关thunks）
• 利用Redux Toolkit的动态reducer注入能力，仅在配置器模式下加载并注入编辑器专属reducers；嵌入模式下只加载通用核心逻辑，完全排除编辑相关代码
• 结合代码分割（动态import()）实现按需加载，进一步减小嵌入版的包体积

这种模式既复用了同一套Redux Store架构，又能精准控制不同模式下的代码打包范围，完美适配你的场景。

2. 能否按需加载/条件注入reducers？ #

完全可以。Redux Toolkit的configureStore创建的store原生支持replaceReducer方法，结合动态import()和运行时模式判断，就能实现：

• 配置器模式：加载所有通用slice + 编辑器专属slice，并注入到store
• 嵌入模式：仅加载当前需要渲染的组件的通用slice，不加载任何编辑相关reducer

同时，由于嵌入版状态是只读的，甚至可以在嵌入模式下禁用所有修改状态的dispatch操作（可选），进一步保证状态安全。

3. 实际配置方案 #

步骤1：拆分Slice结构 #

将每个组件的slice拆分为两个文件，分离通用逻辑与编辑专属逻辑：

// 示例：Button组件核心逻辑（components/Button/slice/core.ts）
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export type ButtonState = {
  backgroundColor: string;
  borderRadius: number;
  isLoading: boolean;
};

// 嵌入版拉取服务器配置的thunk
export const fetchButtonConfig = createAsyncThunk(
  'button/fetchConfig',
  async (componentId: string) => {
    const res = await fetch(`/api/components/${componentId}`);
    return res.json() as ButtonState;
  }
);

// 仅包含通用逻辑的基础slice（无修改状态的reducer）
const buttonCoreSlice = createSlice({
  name: 'button',
  initialState: {} as ButtonState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchButtonConfig.fulfilled, (state, action) => {
      Object.assign(state, action.payload);
    });
  },
});

export const buttonCoreReducer = buttonCoreSlice.reducer;
export const buttonSelectors = {
  getBackgroundColor: (state: RootState) => state.button?.backgroundColor,
};

// 示例：Button组件编辑器专属逻辑（components/Button/slice/editor.ts）
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { ButtonState } from './core';

const buttonEditorSlice = createSlice({
  name: 'button',
  initialState: {} as ButtonState,
  reducers: {
    setBackgroundColor: (state, action: PayloadAction<string>) => {
      state.backgroundColor = action.payload;
    },
    setBorderRadius: (state, action: PayloadAction<number>) => {
      state.borderRadius = action.payload;
    },
    // 所有编辑相关的reducer
  },
});

export const { setBackgroundColor, setBorderRadius } = buttonEditorSlice.actions;
export const buttonEditorReducer = buttonEditorSlice.reducer;

步骤2：配置支持动态注入的Redux Store #

创建store时初始只包含全局通用逻辑，封装工具函数实现reducer动态注入：

// store.ts
import { configureStore, combineReducers } from '@reduxjs/toolkit';

// 全局通用reducer（如应用模式）
const globalReducer = combineReducers({
  appMode: (state = 'embed', action) => {
    if (action.type === 'app/setMode') return action.payload;
    return state;
  },
});

let rootReducer = combineReducers({
  global: globalReducer,
});

export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false, // 若Shadow DOM存在非序列化状态可关闭
    }),
});

// 动态注入reducer工具函数
export const injectReducer = (key: string, reducer: any) => {
  if ((store.getState() as any)[key]) return; // 避免重复注入

  rootReducer = combineReducers({
    ...rootReducer,
    [key]: reducer,
  });

  store.replaceReducer(rootReducer);
};

// TypeScript类型定义
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof rootReducer>;

步骤3：运行时模式判断与按需加载 #

在应用入口根据模式加载对应逻辑，嵌入版仅加载当前需要的组件核心slice：

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store, injectReducer } from './store';

// 从全局变量或URL参数获取运行模式
const appMode = window.__APP_MODE__ || new URLSearchParams(window.location.search).get('mode') || 'embed';
store.dispatch({ type: 'app/setMode', payload: appMode });

if (appMode === 'editor') {
  // 配置器模式：加载所有编辑器专属slice并注入
  Promise.all([
    import('./components/Button/slice/editor').then(mod => injectReducer('button', mod.buttonEditorReducer)),
    import('./components/Card/slice/editor').then(mod => injectReducer('card', mod.cardEditorReducer)),
  ]).then(() => {
    import('./EditorApp').then(mod => {
      ReactDOM.createRoot(document.getElementById('root')!).render(
        <Provider store={store}><mod.EditorApp /></Provider>
      );
    });
  });
} else {
  // 嵌入模式：仅加载当前需要渲染的组件核心slice
  const embedComponentIds = window.__EMBED_COMPONENTS__ || [];
  Promise.all(
    embedComponentIds.map(id => {
      switch (id) {
        case 'button':
          return import('./components/Button/slice/core').then(mod => injectReducer('button', mod.buttonCoreReducer));
        case 'card':
          return import('./components/Card/slice/core').then(mod => injectReducer('card', mod.cardCoreReducer));
        default: return Promise.resolve();
      }
    })
  ).then(() => {
    import('./EmbedRenderer').then(mod => mod.renderEmbedComponents(embedComponentIds));
  });
}

步骤4：嵌入版Shadow DOM渲染 #

嵌入版将组件渲染到独立Shadow DOM，利用全局Store获取状态：

// EmbedRenderer.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store';
import { Button } from './components/Button';
import { Card } from './components/Card';

export const renderEmbedComponents = (componentIds: string[]) => {
  componentIds.forEach(id => {
    const container = document.getElementById(`embed-${id}`);
    if (!container) return;

    const shadowRoot = container.attachShadow({ mode: 'open' });
    const rootDiv = document.createElement('div');
    shadowRoot.appendChild(rootDiv);

    const Component = id === 'button' ? Button : id === 'card' ? Card : null;
    if (!Component) return;

    ReactDOM.createRoot(rootDiv).render(
      <Provider store={store}><Component /></Provider>
    );
  });
};

步骤5：TypeScript类型优化 #

定义动态扩展的RootState，适配注入的组件状态：

// types.ts
import { store } from './store';

type BaseRootState = {
  global: {
    appMode: 'editor' | 'embed';
  };
};

type ComponentStates = {
  button: import('./components/Button/slice/core').ButtonState;
  card: import('./components/Card/slice/core').CardState;
};

export type RootState = BaseRootState & Partial<ComponentStates>;
export type AppDispatch = typeof store.dispatch;

内容的提问来源于stack exchange，提问作者Юлий Малиновский