Middleware breaks redux devtools?

Question

JavaScript

Good afternoon! Please tell me why REDUX_DEVTOOLS_EXTENSION breaks when I use middleware?
Who faced such a problem, how to solve it?
Plus, react extension for chrome doesn't work either... I don't understand what it is.
Throws an error Uncaught TypeError: t.apply is not a function
Code store

import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import rootReducer from 'reducers/index'

const middleware = [thunk];
if(process.env.NODE_ENV !== 'production') {
  middleware.push(window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
}


const mapStore = createStore(
  rootReducer,
  applyMiddleware(...middleware)
);

export default mapStore

Thank you!

Answer 1

You need to do it via compose:

const mapStore = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__  ?  window.__REDUX_DEVTOOLS_EXTENSION__() : f => f,
  )
);