Add redux-devtools-extension trace feature in development mode if ava…

…ilable. (#3781) * Added devToolsTrace prop to CoreAdmin * Added devToolsTrace prop to allow Redux DevTools Trace to be enable. * Changes suggested by Prettier * Changes suggested by Prettier * More Prettier suggestions. * Removed trailing space. * Revert #3661 * Add DevTools trace feature in development mode if available. * Corrected parentheses * Prettier suggestions * Prettier suggestion. * Update CustomApp.md * Update CustomApp.md * Update CustomApp.md * Update CustomApp.md * Updated CustomApp.md to reflect DevToolsTrace usage * Corrections to the docs. * Requested changes to the docs. * Added missing validation to the docs.
marmelab · Oct 8, 2019 · d03447c · d03447c
1 parent 01332ca
commit d03447c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/docs/CustomApp.md b/docs/CustomApp.md
@@ -53,20 +53,27 @@ export default ({
     };
     const sagaMiddleware = createSagaMiddleware();
 
+    const composeEnhancers =
+        (process.env.NODE_ENV === 'development' &&
+            typeof window !== 'undefined' &&
+            window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
+            window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+                trace: true,
+                traceLimit: 25,
+            })) ||
+        compose;
+
     const store = createStore(
         resettableAppReducer,
         { /* set your initial state here */ },
-        compose(
+        composeEnhancers(
             applyMiddleware(
                 sagaMiddleware,
                 routerMiddleware(history),
                 // add your own middlewares here
             ),
-            typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
-                ? window.__REDUX_DEVTOOLS_EXTENSION__()
-                : f => f
             // add your own enhancers here
-        )
+        ),        
     );
     sagaMiddleware.run(saga);
     return store;

diff --git a/packages/ra-core/src/createAdminStore.ts b/packages/ra-core/src/createAdminStore.ts
@@ -10,7 +10,7 @@ import { adminSaga } from './sideEffect';
 import { CLEAR_STATE } from './actions/clearActions';
 
 interface Window {
-    __REDUX_DEVTOOLS_EXTENSION__?: () => () => void;
+    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: (traceOptions: object) => Function;
 }
 
 export type InitialState = object | (() => object);
@@ -61,15 +61,21 @@ export default ({
     const sagaMiddleware = createSagaMiddleware();
     const typedWindow = window as Window;
 
+    const composeEnhancers =
+        (process.env.NODE_ENV === 'development' &&
+            typeof typedWindow !== 'undefined' &&
+            typedWindow.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
+            typedWindow.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+                trace: true,
+                traceLimit: 25,
+            })) ||
+        compose;
+
     const store = createStore(
         resettableAppReducer,
         typeof initialState === 'function' ? initialState() : initialState,
-        compose(
-            applyMiddleware(sagaMiddleware, routerMiddleware(history)),
-            typeof typedWindow !== 'undefined' &&
-                typedWindow.__REDUX_DEVTOOLS_EXTENSION__
-                ? typedWindow.__REDUX_DEVTOOLS_EXTENSION__()
-                : f => f
+        composeEnhancers(
+            applyMiddleware(sagaMiddleware, routerMiddleware(history))
         )
     );
     sagaMiddleware.run(saga);