React应用Redux createStore报错：传入多个store增强器问题求助

Let's break down what's causing this error and fix it step by step:

What's Wrong Here #

Your error stems from incorrect parameter order in createStore plus conflicting reducer definitions.

Looking at your original store.js:

const store = createStore(
  changeState,
  rootReducers,
  allEnhancers
);

Redux's createStore expects arguments in this strict order:
createStore(reducer, preloadedState?, enhancer?)

You passed rootReducers (a combined reducer) as the second argument, which Redux interprets as a store enhancer. Combine that with allEnhancers as the third argument, and Redux thinks you're trying to pass two separate enhancers—hence the error.

On top of that, you had two disconnected reducers (changeState and rootReducers) instead of combining all your state logic into one single root reducer, which violates Redux's core pattern.

Fixed Solution #

1. Correct Your store.js

We'll merge all reducers (including the sidebarShow state) and call createStore properly:

import { applyMiddleware, combineReducers, compose, createStore } from 'redux'
import customerReducer from "./components/helpers/reducers/customerReducer";
import userReducer from "./components/helpers/reducers/userReducer";
import appointmentsReducer from "./components/helpers/reducers/appointmenstReducer";
import thunk from "redux-thunk";

// Move your sidebar state logic into a dedicated reducer
const sidebarReducer = (state = { sidebarShow: 'responsive' }, { type, ...rest }) => {
  switch (type) {
    case 'set':
      return {...state, ...rest };
    default:
      return state
  }
};

// Combine ALL reducers into one root reducer
const rootReducers = combineReducers({
  sidebar: sidebarReducer, // Add the sidebar reducer here
  customerInfo: customerReducer,
  account_profile: userReducer,
  appointmentsList: appointmentsReducer
});

// Use composeEnhancers to support Redux DevTools (optional but helpful for debugging)
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const allEnhancers = composeEnhancers(
  applyMiddleware(thunk)
);

// Properly call createStore with the correct argument order
const store = createStore(
  rootReducers,
  allEnhancers
);

export default store

2. Revert to a Clean App.js

Your modified App.js had duplicate store logic which is messy and error-prone. Go back to importing the correctly configured store from store.js:

import 'react-app-polyfill/ie11'; 
import 'react-app-polyfill/stable'; 
import './polyfill' 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import * as serviceWorker from './serviceWorker'; 
import { icons } from './assets/icons' 
import store from './store' 
import { transitions, positions, Provider as AlertProvider } from 'react-alert' 
import AlertTemplate from 'react-alert-template-basic' 
import { Provider } from 'react-redux'; 
import ReactNotification from 'react-notifications-component'; 
import 'react-notifications-component/dist/theme.css'

React.icons = icons; 

const options = { 
  position: positions.BOTTOM_RIGHT, 
  timeout: 5000, 
  offset: '1px', 
  transition: transitions.SCALE, 
}; 

ReactDOM.render( 
  <Provider store={store}> 
    <AlertProvider template={AlertTemplate} {...options}> 
      <ReactNotification/> 
      <App/> 
    </AlertProvider> 
  </Provider>, 
  document.getElementById('root') 
); 

serviceWorker.unregister();

Why This Works #

• We've merged all state management logic into a single root reducer, following Redux's standard pattern.
• createStore now receives arguments in the correct order: root reducer first, then the enhancer (with thunk middleware attached).
• We've kept store logic separated from your App component, making your code easier to maintain and debug.

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