[feat][inspector-monitor] add noop and rtk action filters - issue #753 #717

packages/redux-devtools-inspector-monitor/demo/config/webpack.config.ts

@@ -17,7 +17,7 @@ module.exports = {
         './demo/src/js/index',
       ],
   output: {
-    path: path.join(__dirname, 'demo/dist'),
+    path: path.join(__dirname, './dist'),
     filename: 'js/bundle.js',
   },
   module: {
@@ -60,5 +60,5 @@ module.exports = {
         },
         historyApiFallback: true,
       },
-  devtool: 'eval-source-map',
+  devtool: isProduction ? 'sourcemap' : 'eval-source-map',
 };

packages/redux-devtools-inspector-monitor/demo/src/js/components/Pokemon.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { useGetPokemonByNameQuery } from '../rtk-query/pokemonApi';
+import type { PokemonName } from '../rtk-query/pokemon.data';
+
+const intervalOptions = [
+  { label: 'Off', value: 0 },
+  { label: '3s', value: 3000 },
+  { label: '5s', value: 5000 },
+  { label: '10s', value: 10000 },
+  { label: '1m', value: 60000 },
+];
+
+export const Pokemon = ({ name }: { name: PokemonName }) => {
+  const [pollingInterval, setPollingInterval] = React.useState(60000);
+
+  const { data, error, isLoading, isFetching, refetch } =
+    useGetPokemonByNameQuery(name, {
+      pollingInterval,
+    });
+
+  return (
+    <div
+      style={{
+        float: 'left',
+        textAlign: 'center',
+        ...(isFetching ? { background: '#e6ffe8' } : {}),
+      }}
+    >
+      {error ? (
+        <>Oh no, there was an error loading {name}</>
+      ) : isLoading ? (
+        <>Loading...</>
+      ) : data ? (
+        <>
+          <h3>{data.species.name}</h3>
+          <div style={{ minWidth: 96, minHeight: 96 }}>
+            <img
+              src={data.sprites.front_shiny}
+              alt={data.species.name}
+              style={{ ...(isFetching ? { opacity: 0.3 } : {}) }}
+            />
+          </div>
+          <div>
+            <label style={{ display: 'block' }}>Polling interval</label>
+            <select
+              value={pollingInterval}
+              onChange={({ target: { value } }) =>
+                setPollingInterval(Number(value))
+              }
+            >
+              {intervalOptions.map(({ label, value }) => (
+                <option key={value} value={value}>
+                  {label}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <button onClick={refetch} disabled={isFetching}>
+              {isFetching ? 'Loading' : 'Manually refetch'}
+            </button>
+          </div>
+        </>
+      ) : (
+        'No Data'
+      )}
+    </div>
+  );
+};

packages/redux-devtools-inspector-monitor/demo/src/js/components/PokemonView.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { PokemonName, POKEMON_NAMES } from '../rtk-query/pokemon.data';
+import { Pokemon } from './Pokemon';
+
+const getRandomPokemonName = () =>
+  POKEMON_NAMES[Math.floor(Math.random() * POKEMON_NAMES.length)];
+
+export function PokemonView() {
+  const [pokemon, setPokemon] = React.useState<PokemonName[]>(['bulbasaur']);
+
+  return (
+    <div className="App">
+      <div>
+        <button
+          onClick={() =>
+            setPokemon((prev) => [...prev, getRandomPokemonName()])
+          }
+        >
+          Add random pokemon
+        </button>
+        <button onClick={() => setPokemon((prev) => [...prev, 'bulbasaur'])}>
+          Add bulbasaur
+        </button>
+      </div>
+
+      {pokemon.map((name, index) => (
+        <Pokemon key={index} name={name} />
+      ))}
+    </div>
+  );
+}

packages/redux-devtools-inspector-monitor/demo/src/js/DemoApp.tsx → packages/redux-devtools-inspector-monitor/demo/src/js/containers/DemoApp.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties } from 'react';
 import { connect } from 'react-redux';
-import pkg from '../../../package.json';
+import pkg from '../../../../package.json';
 import Button from 'react-bootstrap/Button';
 import FormGroup from 'react-bootstrap/FormGroup';
 import FormControl from 'react-bootstrap/FormControl';
@@ -11,9 +11,10 @@ import InputGroup from 'react-bootstrap/InputGroup';
 import Row from 'react-bootstrap/Row';
 import * as base16 from 'base16';
 import { push as pushRoute } from 'connected-react-router';
+import { PokemonView } from '../components/PokemonView';
 import { Path } from 'history';
-import * as inspectorThemes from '../../../src/themes';
-import getOptions, { Options } from './getOptions';
+import * as inspectorThemes from '../../../../src/themes';
+import getOptions, { Options } from '../getOptions';
 import {
   AddFunctionAction,
   AddHugeObjectAction,
@@ -34,7 +35,7 @@ import {
   ShuffleArrayAction,
   TimeoutUpdateAction,
   ToggleTimeoutUpdateAction,
-} from './reducers';
+} from '../reducers';
 
 const styles: {
   wrapper: CSSProperties;
@@ -56,9 +57,10 @@ const styles: {
   header: {},
   content: {
     display: 'flex',
+    flexFlow: 'column',
     alignItems: 'center',
-    justifyContent: 'center',
-    height: '50%',
+    justifyContent: 'space-evenly',
+    padding: 8,
   },
   buttons: {
     display: 'flex',
@@ -251,6 +253,7 @@ class DemoApp extends React.Component<Props> {
               Shuffle Array
             </Button>
           </div>
+          <PokemonView />
         </div>
         <div style={styles.links}>
           <a onClick={this.toggleExtension} style={styles.link}>

packages/redux-devtools-inspector-monitor/demo/src/js/DevTools.tsx → packages/redux-devtools-inspector-monitor/demo/src/js/containers/DevTools.tsx

@@ -3,10 +3,10 @@ import { connect } from 'react-redux';
 import { createDevTools } from '@redux-devtools/core';
 import DockMonitor from '@redux-devtools/dock-monitor';
 import { Location } from 'history';
-import DevtoolsInspector from '../../../src/DevtoolsInspector';
-import getOptions from './getOptions';
-import { base16Themes } from '../../../src/utils/createStylingFromTheme';
-import { DemoAppState } from './reducers';
+import DevtoolsInspector from '../../../../src/DevtoolsInspector';
+import getOptions from '../getOptions';
+import { base16Themes } from '../../../../src/utils/createStylingFromTheme';
+import { DemoAppState } from '../reducers';
 
 const CustomComponent = () => (
   <div

packages/redux-devtools-inspector-monitor/demo/src/js/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import { pokemonApi } from '../js/rtk-query/pokemonApi';
 import {
-  createStore,
   applyMiddleware,
   compose,
   StoreEnhancerStoreCreator,
@@ -13,20 +14,17 @@ import { Route } from 'react-router';
 import { createBrowserHistory } from 'history';
 import { ConnectedRouter, routerMiddleware } from 'connected-react-router';
 import { persistState } from '@redux-devtools/core';
-import DemoApp from './DemoApp';
+import DemoApp from './containers/DemoApp';
 import createRootReducer from './reducers';
 import getOptions from './getOptions';
-import { ConnectedDevTools, getDevTools } from './DevTools';
+import { ConnectedDevTools, getDevTools } from './containers/DevTools';
 
 function getDebugSessionKey() {
   const matches = /[?&]debug_session=([^&#]+)\b/.exec(window.location.href);
   return matches && matches.length > 0 ? matches[1] : null;
 }
 
-const ROOT =
-  process.env.NODE_ENV === 'production'
-    ? '/redux-devtools-inspector-monitor/'
-    : '/';
+const ROOT = '/';
 
 const DevTools = getDevTools(window.location);
 
@@ -51,7 +49,16 @@ const enhancer = compose(
   persistState(getDebugSessionKey())
 );
 
-const store = createStore(createRootReducer(history), enhancer);
+const store = configureStore({
+  reducer: createRootReducer(history),
+  devTools: false,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      immutableCheck: false,
+      serializableCheck: false,
+    }).concat([pokemonApi.middleware]),
+  enhancers: [enhancer],
+}); //  createStore(createRootReducer(history), enhancer);
 
 render(
   <Provider store={store}>

packages/redux-devtools-inspector-monitor/demo/src/js/reducers.ts

@@ -7,6 +7,7 @@ import {
   RouterState,
 } from 'connected-react-router';
 import { History } from 'history';
+import { pokemonApi } from './rtk-query/pokemonApi';
 
 type Nested = { long: { nested: { path: { to: { a: string } } }[] } };
 
@@ -187,6 +188,7 @@ export interface DemoAppState {
   addFunction: { f: (a: number, b: number, c: number) => number } | null;
   addSymbol: { s: symbol; error: Error } | null;
   shuffleArray: unknown[];
+  [pokemonApi.reducerPath]: ReturnType<typeof pokemonApi.reducer>;
 }
 
 const createRootReducer = (
@@ -259,6 +261,7 @@ const createRootReducer = (
         : state,
     shuffleArray: (state = DEFAULT_SHUFFLE_ARRAY, action) =>
       action.type === 'SHUFFLE_ARRAY' ? shuffle(state) : state,
+    [pokemonApi.reducerPath]: pokemonApi.reducer,
   });
 
 export default createRootReducer;