diff --git a/x-pack/plugins/canvas/public/state/middleware/index.js b/x-pack/plugins/canvas/public/state/middleware/index.js
index 25933b851ba9f..88481c4682eb8 100644
--- a/x-pack/plugins/canvas/public/state/middleware/index.js
+++ b/x-pack/plugins/canvas/public/state/middleware/index.js
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { applyMiddleware, compose } from 'redux';
+import { applyMiddleware, compose as reduxCompose } from 'redux';
 import thunkMiddleware from 'redux-thunk';
 import { getWindow } from '../../lib/get_window';
 import { breadcrumbs } from './breadcrumbs';
@@ -34,9 +34,7 @@ const middlewares = [
   ),
 ];
 
-// initialize redux devtools if extension is installed
-if (getWindow().__REDUX_DEVTOOLS_EXTENSION__) {
-  middlewares.push(getWindow().__REDUX_DEVTOOLS_EXTENSION__());
-}
+// compose with redux devtools, if extension is installed
+const compose = getWindow().__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || reduxCompose;
 
 export const middleware = compose(...middlewares);