如何合并使用createStore与configureStore创建的两个Redux Store？

Redux应用应当只存在一个Store实例，你不需要保留两个独立的Store，直接用configureStore（Redux Toolkit官方推荐的Store创建方式）整合所有reducer即可。以下是具体实现步骤：

方法1：直接复用传统reducer #

1. 拆分原Store1的代码，只导出reducer（不再创建独立store）：

// 新建文件比如 src/store/uiReducer.js
const initialState = {
  sidebarShow: true,
}

export const changeState = (state = initialState, { type, ...rest }) => {
  switch (type) {
    case 'set':
      return { ...state, ...rest }
    default:
      return state
  }
}

2. 在原Store2的文件中，导入这个reducer并添加到configureStore的reducer配置项：

import { configureStore } from '@reduxjs/toolkit';
import { apiSlice } from './api/apiSlice';
import { changeState } from './uiReducer';

export const store = configureStore({
    reducer: {
        // 保留API slice的reducer
        [apiSlice.reducerPath]: apiSlice.reducer,
        // 添加传统reducer，指定状态key（比如ui）
        ui: changeState,
    },
    middleware: getDefaultMiddleware => 
    getDefaultMiddleware().concat(apiSlice.middleware),
    devTools: true
})

此时Store的状态结构为：

{
  ui: { sidebarShow: true },
  [apiSlice.reducerPath]: { /* API相关状态 */ }
}

你可以通过state.ui.sidebarShow访问侧栏状态，通过dispatch({ type: 'set', sidebarShow: false })更新它。

方法2：将传统reducer转为Redux Toolkit Slice（推荐） #

Redux Toolkit的createSlice能简化reducer和action的管理，更符合现代Redux写法：

1. 用createSlice重构原changeState逻辑：

// 新建文件 src/store/uiSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  sidebarShow: true,
};

const uiSlice = createSlice({
  name: 'ui',
  initialState,
  reducers: {
    setUIState: (state, action) => {
      // RTK内置Immer，允许直接修改state（底层自动转为不可变更新）
      Object.assign(state, action.payload);
      // 也可以返回新对象：return { ...state, ...action.payload }
    },
  },
});

// 导出自动生成的action creator
export const { setUIState } = uiSlice.actions;
// 导出slice的reducer
export default uiSlice.reducer;

2. 在configureStore中导入并使用这个slice reducer：

import { configureStore } from '@reduxjs/toolkit';
import { apiSlice } from './api/apiSlice';
import uiReducer from './uiSlice';

export const store = configureStore({
    reducer: {
        [apiSlice.reducerPath]: apiSlice.reducer,
        ui: uiReducer,
    },
    middleware: getDefaultMiddleware => 
    getDefaultMiddleware().concat(apiSlice.middleware),
    devTools: true
})

之后更新状态时，直接使用生成的action creator：

import { useDispatch } from 'react-redux';
import { setUIState } from './store/uiSlice';

// 在组件中
const dispatch = useDispatch();
dispatch(setUIState({ sidebarShow: false }));

关键说明 #

• Redux应用只能有一个Store实例，所有状态都由这个Store统一管理。
• configureStore会自动处理reducer合并（无需手动调用combineReducers），只需将各个reducer作为键值对传入reducer配置项即可。
• 优先使用Redux Toolkit的API（如configureStore、createSlice），这是Redux官方推荐写法，能减少样板代码并避免常见错误。

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