import {Provider} from 'react-redux'

import {createStore, applyMiddleware, compose} from 'redux'

import reducers from './reducers';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducers, composeEnhancers(applyMiddleware()))

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

它只在检测到您正在运行的应用程序上的存储时才起作用。这是有意义的，因为没有什么可以展示的。
启动一个应用程序与Redux正确连接起来，它会出现彩色，并将有非常有用的信息。
编辑：
我想我找到了检查代码是否正确。如果存在__REDUX_DEVTOOLS_EXTENSION_COMPOSE__，则compose方法必须是raplace。

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

let store;

store = createStore(
          rootReducer,
          initialState,
          composeEnhancers(
            applyMiddleware(...middleware)
        );

无if语句

如果你有多个中间件，这是一个更简单的方法。
1.使用npm或yarn安装扩展

npm install --save redux-devtools-extension

1.应用到store.js或任何初始化存储的地方

import { composeWithDevTools } from 'redux-devtools-extension';

const middlewares = [] //put your middleware over here

export const store = createStore(Reducer,composeWithDevTools(
    applyMiddleware(...middlewares))
);

@reduxjs/toolkit已经内置了devtools（在使用redux时应该强烈考虑）。添加flag：

export const store = configureStore({
  reducer: enableBatching(
    combineReducers({
      appState: stateSlice.reducer,
    })
  ),
  devTools: true // set to `true` if dev mode, i.e. import.meta.env.DEV for vite
});