feat: adding more options to devtools & filtering event send to devtools

src/configureStore.ts

@@ -8,13 +8,11 @@ import type { AnyEventCreator, DevTools, Event, Store, StoreOption } from "./typ
  * @param param0 the options used to configure the store
  * @returns A configured solux store
  */
-export const configureStore = <S extends object, C>({
-  name,
-  rootSlice,
-  preloadedState,
-  rootEpic,
-  container,
-}: Partial<StoreOption<S, C>>): Store<S, C> => {
+export const configureStore = <S extends object, C>(
+  options: Partial<StoreOption<S, C>>,
+): Store<S, C> => {
+  const { rootSlice, rootEpic, preloadedState, devtools, container } = options;
+
   if (preloadedState && rootSlice === undefined)
     throw Error(`
       You should not provide a preloaded state without providing a root slice !!
@@ -56,21 +54,15 @@ export const configureStore = <S extends object, C>({
   let devTools: DevTools<S> = undefined;
 
   if (isDevtoolsAvailable) {
-    devTools = window.__REDUX_DEVTOOLS_EXTENSION__.connect({
-      name: name ?? "Solux",
-    });
-    devTools.subscribe(({ type, state }) => {
-      if (type === "DISPATCH" && state) {
-        console.log("DevTools requested to change the state to", state);
-      }
-    });
+    devTools = window.__REDUX_DEVTOOLS_EXTENSION__.connect(devtools?.options && devtools.options);
     devTools.init(state as S);
   }
 
   const dispatch: Store<S, C>["dispatch"] = (event) => {
     if (rootSlice !== undefined) setState(produce((state: S) => rootSlice.handler(state, event)));
     store$.next({ state: state as S, event });
-    if (isDevtoolsAvailable) devTools.send(event, state as S);
+    if (isDevtoolsAvailable && (!devtools.filterEvent || devtools.filterEvent(event)))
+      devTools.send(event, state as S);
     event$.next(event);
   };
 

src/global.d.ts

@@ -1,9 +1,9 @@
-import { DevTools } from "./types";
+import { DevTools, DevToolsOptions } from "./types";
 
 declare global {
   interface Window {
     __REDUX_DEVTOOLS_EXTENSION__: {
-      connect: <S>(options?: { name: string }) => DevTools<S>;
+      connect: <S>(options?: Partial<DevToolsOptions>) => DevTools<S>;
     };
   }
 }

src/types.ts

@@ -51,17 +51,25 @@ export type EventWithPayload<P = any> = Event & { payload: P };
  */
 export type Handler<S, E extends Event = Event> = (state: S, event: E) => void;
 
+export type DevToolsOptions = {
+  name: string;
+  maxAge: number;
+};
+
 /**
  * Options for `configureStore()`.
  *
  * @template S The type of state held by this store.
  */
 export type StoreOption<S, C = unknown> = {
-  name?: string;
   rootSlice: Slice<S>;
   rootEpic: Epic<S, C>;
   container: C;
   preloadedState: S;
+  devtools: {
+    filterEvent?: (event: Event) => boolean;
+    options: Partial<DevToolsOptions>;
+  };
 };
 
 /**