Replace Action<unknown> with Action<string> (#1525)

* Replace Action<unknown> with Action<string>

In anticipation of Redux 5 type changes

* Fix lint errors

* Create yellow-steaks-marry.md

.changeset/yellow-steaks-marry.md

@@ -0,0 +1,14 @@
+---
+'remotedev-redux-devtools-extension': patch
+'@redux-devtools/app': patch
+'@redux-devtools/chart-monitor': patch
+'@redux-devtools/dock-monitor': patch
+'@redux-devtools/extension': patch
+'@redux-devtools/inspector-monitor-test-tab': patch
+'@redux-devtools/inspector-monitor-trace-tab': patch
+'@redux-devtools/inspector-monitor': patch
+'@redux-devtools/core': patch
+'test-demo': patch
+---
+
+Replace Action<unknown> with Action<string>

extension/src/background/store/apiMiddleware.ts

@@ -84,7 +84,7 @@ export interface NAAction {
   readonly id: string | number;
 }
 
-interface InitMessage<S, A extends Action<unknown>> {
+interface InitMessage<S, A extends Action<string>> {
   readonly type: 'INIT';
   readonly payload: string;
   instanceId: string;
@@ -137,7 +137,7 @@ interface SerializedActionMessage {
   readonly nextActionId: number;
 }
 
-interface SerializedStateMessage<S, A extends Action<unknown>> {
+interface SerializedStateMessage<S, A extends Action<string>> {
   readonly type: 'STATE';
   readonly payload: Omit<
     LiftedState<S, A, unknown>,
@@ -151,7 +151,7 @@ interface SerializedStateMessage<S, A extends Action<unknown>> {
   readonly committedState: boolean;
 }
 
-type UpdateStateRequest<S, A extends Action<unknown>> =
+type UpdateStateRequest<S, A extends Action<string>> =
   | InitMessage<S, A>
   | LiftedMessage
   | SerializedPartialStateMessage
@@ -163,7 +163,7 @@ export interface EmptyUpdateStateAction {
   readonly type: typeof UPDATE_STATE;
 }
 
-interface UpdateStateAction<S, A extends Action<unknown>> {
+interface UpdateStateAction<S, A extends Action<string>> {
   readonly type: typeof UPDATE_STATE;
   request: UpdateStateRequest<S, A>;
   readonly id: string | number;
@@ -177,7 +177,7 @@ export type TabMessage =
   | ImportAction
   | ActionAction
   | ExportAction;
-export type PanelMessage<S, A extends Action<unknown>> =
+export type PanelMessage<S, A extends Action<string>> =
   | NAAction
   | ErrorMessage
   | UpdateStateAction<S, A>
@@ -192,7 +192,7 @@ type TabPort = Omit<chrome.runtime.Port, 'postMessage'> & {
   postMessage: (message: TabMessage) => void;
 };
 type PanelPort = Omit<chrome.runtime.Port, 'postMessage'> & {
-  postMessage: <S, A extends Action<unknown>>(
+  postMessage: <S, A extends Action<string>>(
     message: PanelMessage<S, A>,
   ) => void;
 };
@@ -214,7 +214,7 @@ const connections: {
 const chunks: {
   [instanceId: string]: PageScriptToContentScriptMessageForwardedToMonitors<
     unknown,
-    Action<unknown>
+    Action<string>
   >;
 } = {};
 let monitors = 0;
@@ -223,13 +223,13 @@ let isMonitored = false;
 const getId = (sender: chrome.runtime.MessageSender, name?: string) =>
   sender.tab ? sender.tab.id! : name || sender.id!;
 
-type MonitorAction<S, A extends Action<unknown>> =
+type MonitorAction<S, A extends Action<string>> =
   | NAAction
   | ErrorMessage
   | UpdateStateAction<S, A>
   | SetPersistAction;
 
-function toMonitors<S, A extends Action<unknown>>(
+function toMonitors<S, A extends Action<string>>(
   action: MonitorAction<S, A>,
   tabId?: string | number,
   verbose?: boolean,
@@ -387,14 +387,14 @@ export type SingleMessage =
   | OpenOptionsMessage
   | GetOptionsMessage;
 
-type BackgroundStoreMessage<S, A extends Action<unknown>> =
+type BackgroundStoreMessage<S, A extends Action<string>> =
   | PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance<S, A>
   | SplitMessage
   | SingleMessage;
 type BackgroundStoreResponse = { readonly options: Options };
 
 // Receive messages from content scripts
-function messaging<S, A extends Action<unknown>>(
+function messaging<S, A extends Action<string>>(
   request: BackgroundStoreMessage<S, A>,
   sender: chrome.runtime.MessageSender,
   sendResponse?: (response?: BackgroundStoreResponse) => void,
@@ -508,7 +508,7 @@ function disconnect(
   };
 }
 
-function onConnect<S, A extends Action<unknown>>(port: chrome.runtime.Port) {
+function onConnect<S, A extends Action<string>>(port: chrome.runtime.Port) {
   let id: number | string;
   let listener;
 

extension/src/contentScript/index.ts

@@ -92,18 +92,18 @@ export type ContentScriptToPageScriptMessage =
   | ExportAction
   | UpdateAction;
 
-interface ImportStatePayload<S, A extends Action<unknown>> {
+interface ImportStatePayload<S, A extends Action<string>> {
   readonly type: 'IMPORT_STATE';
   readonly nextLiftedState: LiftedState<S, A, unknown> | readonly A[];
   readonly preloadedState?: S;
 }
 
-interface ImportStateDispatchAction<S, A extends Action<unknown>> {
+interface ImportStateDispatchAction<S, A extends Action<string>> {
   readonly type: 'DISPATCH';
   readonly payload: ImportStatePayload<S, A>;
 }
 
-export type ListenerMessage<S, A extends Action<unknown>> =
+export type ListenerMessage<S, A extends Action<string>> =
   | StartAction
   | StopAction
   | DispatchAction
@@ -204,7 +204,7 @@ export type SplitMessage =
   | SplitMessageChunk
   | SplitMessageEnd;
 
-function tryCatch<S, A extends Action<unknown>>(
+function tryCatch<S, A extends Action<string>>(
   fn: (
     args:
       | PageScriptToContentScriptMessageWithoutDisconnect<S, A>
@@ -264,24 +264,24 @@ interface InitInstanceContentScriptToBackgroundMessage {
   readonly instanceId: number;
 }
 
-interface RelayMessage<S, A extends Action<unknown>> {
+interface RelayMessage<S, A extends Action<string>> {
   readonly name: 'RELAY';
   readonly message:
     | PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance<S, A>
     | SplitMessage;
 }
 
-export type ContentScriptToBackgroundMessage<S, A extends Action<unknown>> =
+export type ContentScriptToBackgroundMessage<S, A extends Action<string>> =
   | InitInstanceContentScriptToBackgroundMessage
   | RelayMessage<S, A>;
 
-function postToBackground<S, A extends Action<unknown>>(
+function postToBackground<S, A extends Action<string>>(
   message: ContentScriptToBackgroundMessage<S, A>,
 ) {
   bg!.postMessage(message);
 }
 
-function send<S, A extends Action<unknown>>(
+function send<S, A extends Action<string>>(
   message:
     | PageScriptToContentScriptMessageWithoutDisconnect<S, A>
     | SplitMessage,
@@ -296,7 +296,7 @@ function send<S, A extends Action<unknown>>(
 }
 
 // Resend messages from the page to the background script
-function handleMessages<S, A extends Action<unknown>>(
+function handleMessages<S, A extends Action<string>>(
   event: MessageEvent<PageScriptToContentScriptMessage<S, A>>,
 ) {
   if (!isAllowed()) return;

extension/src/devpanel/index.tsx

@@ -96,7 +96,7 @@ function init(id: number) {
     name: id ? id.toString() : undefined,
   });
   bgConnection.onMessage.addListener(
-    <S, A extends Action<unknown>>(message: PanelMessage<S, A>) => {
+    <S, A extends Action<string>>(message: PanelMessage<S, A>) => {
       if (message.type === 'NA') {
         if (message.id === id) renderNA();
         else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id });

extension/src/pageScript/Monitor.ts

@@ -8,7 +8,7 @@ declare global {
   }
 }
 
-export default class Monitor<S, A extends Action<unknown>> {
+export default class Monitor<S, A extends Action<string>> {
   update: (
     liftedState?: LiftedState<S, A, unknown> | undefined,
     libConfig?: LibConfig,

extension/src/pageScript/api/filters.ts

@@ -21,7 +21,7 @@ export const noFiltersApplied = (localFilter: LocalFilter | undefined) =>
     !window.devToolsOptions.filter ||
     window.devToolsOptions.filter === FilterState.DO_NOT_FILTER);
 
-export function isFiltered<A extends Action<unknown>>(
+export function isFiltered<A extends Action<string>>(
   action: A | string,
   localFilter: LocalFilter | undefined,
 ) {
@@ -41,7 +41,7 @@ export function isFiltered<A extends Action<unknown>>(
   );
 }
 
-function filterActions<A extends Action<unknown>>(
+function filterActions<A extends Action<string>>(
   actionsById: { [p: number]: PerformAction<A> },
   actionSanitizer: ((action: A, id: number) => A) | undefined,
 ): { [p: number]: PerformAction<A> } {
@@ -63,7 +63,7 @@ function filterStates<S>(
   }));
 }
 
-export function filterState<S, A extends Action<unknown>>(
+export function filterState<S, A extends Action<string>>(
   state: LiftedState<S, A, unknown>,
   localFilter: LocalFilter | undefined,
   stateSanitizer: ((state: S, index: number) => S) | undefined,
@@ -120,7 +120,7 @@ export function filterState<S, A extends Action<unknown>>(
   };
 }
 
-export interface PartialLiftedState<S, A extends Action<unknown>> {
+export interface PartialLiftedState<S, A extends Action<string>> {
   readonly actionsById: { [actionId: number]: PerformAction<A> };
   readonly computedStates: { state: S; error?: string }[];
   readonly stagedActionIds: readonly number[];
@@ -129,16 +129,16 @@ export interface PartialLiftedState<S, A extends Action<unknown>> {
   readonly committedState?: S;
 }
 
-export function startingFrom<S, A extends Action<unknown>>(
+export function startingFrom<S, A extends Action<string>>(
   sendingActionId: number,
   state: LiftedState<S, A, unknown>,
   localFilter: LocalFilter | undefined,
   stateSanitizer: (<S>(state: S, index: number) => S) | undefined,
   actionSanitizer:
-    | (<A extends Action<unknown>>(action: A, id: number) => A)
+    | (<A extends Action<string>>(action: A, id: number) => A)
     | undefined,
   predicate:
-    | (<S, A extends Action<unknown>>(state: S, action: A) => boolean)
+    | (<S, A extends Action<string>>(state: S, action: A) => boolean)
     | undefined,
 ): LiftedState<S, A, unknown> | PartialLiftedState<S, A> | undefined {
   const stagedActionIds = state.stagedActionIds;

extension/src/pageScript/api/importState.ts

@@ -30,7 +30,7 @@ interface ParsedSerializedLiftedState {
   readonly preloadedState?: string;
 }
 
-export default function importState<S, A extends Action<unknown>>(
+export default function importState<S, A extends Action<string>>(
   state: string | undefined,
   { serialize }: Config,
 ) {

extension/src/pageScript/api/index.ts

@@ -115,7 +115,7 @@ interface DisconnectMessage {
   readonly source: typeof source;
 }
 
-interface InitMessage<S, A extends Action<unknown>> {
+interface InitMessage<S, A extends Action<string>> {
   readonly type: 'INIT';
   readonly payload: string;
   readonly instanceId: number;
@@ -161,7 +161,7 @@ interface SerializedActionMessage {
   readonly nextActionId?: number;
 }
 
-interface SerializedStateMessage<S, A extends Action<unknown>> {
+interface SerializedStateMessage<S, A extends Action<string>> {
   readonly type: 'STATE';
   readonly payload: Omit<
     LiftedState<S, A, unknown>,
@@ -183,7 +183,7 @@ interface OpenMessage {
 
 export type PageScriptToContentScriptMessageForwardedToMonitors<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
 > =
   | InitMessage<S, A>
   | LiftedMessage
@@ -194,7 +194,7 @@ export type PageScriptToContentScriptMessageForwardedToMonitors<
 
 export type PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
 > =
   | PageScriptToContentScriptMessageForwardedToMonitors<S, A>
   | ErrorMessage
@@ -204,17 +204,17 @@ export type PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance<
 
 export type PageScriptToContentScriptMessageWithoutDisconnect<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
 > =
   | PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance<S, A>
   | InitInstancePageScriptToContentScriptMessage
   | InitInstanceMessage;
 
-export type PageScriptToContentScriptMessage<S, A extends Action<unknown>> =
+export type PageScriptToContentScriptMessage<S, A extends Action<string>> =
   | PageScriptToContentScriptMessageWithoutDisconnect<S, A>
   | DisconnectMessage;
 
-function post<S, A extends Action<unknown>>(
+function post<S, A extends Action<string>>(
   message: PageScriptToContentScriptMessage<S, A>,
 ) {
   window.postMessage(message, '*');
@@ -258,7 +258,7 @@ function getStackTrace(
   return stack;
 }
 
-function amendActionType<A extends Action<unknown>>(
+function amendActionType<A extends Action<string>>(
   action:
     | A
     | StructuralPerformAction<A>
@@ -288,7 +288,7 @@ interface LiftedMessage {
   readonly source: typeof source;
 }
 
-interface PartialStateMessage<S, A extends Action<unknown>> {
+interface PartialStateMessage<S, A extends Action<string>> {
   readonly type: 'PARTIAL_STATE';
   readonly payload: PartialLiftedState<S, A>;
   readonly source: typeof source;
@@ -296,7 +296,7 @@ interface PartialStateMessage<S, A extends Action<unknown>> {
   readonly maxAge: number;
 }
 
-interface ExportMessage<S, A extends Action<unknown>> {
+interface ExportMessage<S, A extends Action<string>> {
   readonly type: 'EXPORT';
   readonly payload: readonly A[];
   readonly committedState: S;
@@ -304,21 +304,21 @@ interface ExportMessage<S, A extends Action<unknown>> {
   readonly instanceId: number;
 }
 
-export interface StructuralPerformAction<A extends Action<unknown>> {
+export interface StructuralPerformAction<A extends Action<string>> {
   readonly action: A;
   readonly timestamp?: number;
   readonly stack?: string;
 }
 
-type SingleUserAction<A extends Action<unknown>> =
+type SingleUserAction<A extends Action<string>> =
   | PerformAction<A>
   | StructuralPerformAction<A>
   | A;
-type UserAction<A extends Action<unknown>> =
+type UserAction<A extends Action<string>> =
   | SingleUserAction<A>
   | readonly SingleUserAction<A>[];
 
-interface ActionMessage<S, A extends Action<unknown>> {
+interface ActionMessage<S, A extends Action<string>> {
   readonly type: 'ACTION';
   readonly payload: S;
   readonly source: typeof source;
@@ -329,7 +329,7 @@ interface ActionMessage<S, A extends Action<unknown>> {
   readonly name?: string;
 }
 
-interface StateMessage<S, A extends Action<unknown>> {
+interface StateMessage<S, A extends Action<string>> {
   readonly type: 'STATE';
   readonly payload: LiftedState<S, A, unknown>;
   readonly source: typeof source;
@@ -369,7 +369,7 @@ interface StopMessage {
   readonly instanceId: number;
 }
 
-type ToContentScriptMessage<S, A extends Action<unknown>> =
+type ToContentScriptMessage<S, A extends Action<string>> =
   | LiftedMessage
   | PartialStateMessage<S, A>
   | ExportMessage<S, A>
@@ -380,7 +380,7 @@ type ToContentScriptMessage<S, A extends Action<unknown>> =
   | GetReportMessage
   | StopMessage;
 
-export function toContentScript<S, A extends Action<unknown>>(
+export function toContentScript<S, A extends Action<string>>(
   message: ToContentScriptMessage<S, A>,
   serializeState?: Serialize | undefined,
   serializeAction?: Serialize | undefined,
@@ -425,7 +425,7 @@ export function toContentScript<S, A extends Action<unknown>>(
   }
 }
 
-export function sendMessage<S, A extends Action<unknown>>(
+export function sendMessage<S, A extends Action<string>>(
   action: StructuralPerformAction<A> | StructuralPerformAction<A>[],
   state: LiftedState<S, A, unknown>,
   config: Config,
@@ -496,7 +496,7 @@ export function setListener(
 }
 
 const liftListener =
-  <S, A extends Action<unknown>>(
+  <S, A extends Action<string>>(
     listener: (message: ListenerMessage<S, A>) => void,
     config: Config,
   ) =>
@@ -520,15 +520,15 @@ export function disconnect() {
 }
 
 export interface ConnectResponse {
-  init: <S, A extends Action<unknown>>(
+  init: <S, A extends Action<string>>(
     state: S,
     liftedData?: LiftedState<S, A, unknown>,
   ) => void;
-  subscribe: <S, A extends Action<unknown>>(
+  subscribe: <S, A extends Action<string>>(
     listener: (message: ListenerMessage<S, A>) => void,
   ) => (() => void) | undefined;
   unsubscribe: () => void;
-  send: <S, A extends Action<unknown>>(
+  send: <S, A extends Action<string>>(
     action: A,
     state: LiftedState<S, A, unknown>,
   ) => void;
@@ -550,8 +550,8 @@ export function connect(preConfig: Config): ConnectResponse {
   const localFilter = getLocalFilter(config);
   const autoPause = config.autoPause;
   let isPaused = autoPause;
-  let delayedActions: StructuralPerformAction<Action<unknown>>[] = [];
+  let delayedActions: StructuralPerformAction<Action<string>>[] = [];
-  let delayedStates: LiftedState<unknown, Action<unknown>, unknown>[] = [];
+  let delayedStates: LiftedState<unknown, Action<string>, unknown>[] = [];
 
   const rootListener = (action: ContentScriptToPageScriptMessage) => {
     if (autoPause) {
@@ -574,7 +574,7 @@ export function connect(preConfig: Config): ConnectResponse {
 
   listeners[id] = [rootListener];
 
-  const subscribe = <S, A extends Action<unknown>>(
+  const subscribe = <S, A extends Action<string>>(
     listener: (message: ListenerMessage<S, A>) => void,
   ) => {
     if (!listener) return undefined;
@@ -600,7 +600,7 @@ export function connect(preConfig: Config): ConnectResponse {
     delayedStates = [];
   }, latency);
 
-  const send = <S, A extends Action<unknown>>(
+  const send = <S, A extends Action<string>>(
     action: A,
     state: LiftedState<S, A, unknown>,
   ) => {
@@ -643,7 +643,7 @@ export function connect(preConfig: Config): ConnectResponse {
     );
   };
 
-  const init = <S, A extends Action<unknown>>(
+  const init = <S, A extends Action<string>>(
     state: S,
     liftedData?: LiftedState<S, A, unknown>,
   ) => {

extension/src/pageScript/api/openWindow.ts

@@ -3,7 +3,7 @@ import type { PageScriptToContentScriptMessage } from './index';
 
 export type Position = 'left' | 'right' | 'bottom' | 'panel' | 'remote';
 
-function post<S, A extends Action<unknown>>(
+function post<S, A extends Action<string>>(
   message: PageScriptToContentScriptMessage<S, A>,
 ) {
   window.postMessage(message, '*');

extension/src/pageScript/enhancerStore.ts

@@ -18,9 +18,9 @@ declare global {
 
 export default function configureStore<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
   MonitorState,
-  MonitorAction extends Action<unknown>,
+  MonitorAction extends Action<string>,
 >(
   next: StoreEnhancerStoreCreator,
   monitorReducer: Reducer<MonitorState, MonitorAction>,

extension/src/pageScript/index.ts

@@ -56,7 +56,7 @@ import type { ContentScriptToPageScriptMessage } from '../contentScript';
 
 type EnhancedStoreWithInitialDispatch<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
   MonitorState,
 > = EnhancedStore<S, A, MonitorState> & { initialDispatch: Dispatch<A> };
 
@@ -64,7 +64,7 @@ const source = '@devtools-page';
 let stores: {
   [K in string | number]: EnhancedStoreWithInitialDispatch<
     unknown,
-    Action<unknown>,
+    Action<string>,
     unknown
   >;
 } = {};
@@ -97,18 +97,18 @@ export interface ConfigWithExpandedMaxAge {
   readonly actionsAllowlist?: string | readonly string[];
   serialize?: boolean | SerializeWithImmutable;
   readonly stateSanitizer?: <S>(state: S, index?: number) => S;
-  readonly actionSanitizer?: <A extends Action<unknown>>(
+  readonly actionSanitizer?: <A extends Action<string>>(
     action: A,
     id?: number,
   ) => A;
-  readonly predicate?: <S, A extends Action<unknown>>(
+  readonly predicate?: <S, A extends Action<string>>(
     state: S,
     action: A,
   ) => boolean;
   readonly latency?: number;
   readonly maxAge?:
     | number
-    | (<S, A extends Action<unknown>>(
+    | (<S, A extends Action<string>>(
         currentLiftedAction: LiftedAction<S, A, unknown>,
         previousLiftedState: LiftedState<S, A, unknown> | undefined,
       ) => number);
@@ -123,9 +123,9 @@ export interface ConfigWithExpandedMaxAge {
   readonly autoPause?: boolean;
   readonly features?: Features;
   readonly type?: string;
-  readonly getActionType?: <A extends Action<unknown>>(action: A) => A;
+  readonly getActionType?: <A extends Action<string>>(action: A) => A;
   readonly actionCreators?: {
-    readonly [key: string]: ActionCreator<Action<unknown>>;
+    readonly [key: string]: ActionCreator<Action<string>>;
   };
 }
 
@@ -137,7 +137,7 @@ interface ReduxDevtoolsExtension {
   (config?: Config): StoreEnhancer;
   open: (position?: Position) => void;
   notifyErrors: (onError?: () => boolean) => void;
-  send: <S, A extends Action<unknown>>(
+  send: <S, A extends Action<string>>(
     action: StructuralPerformAction<A> | StructuralPerformAction<A>[],
     state: LiftedState<S, A, unknown>,
     config: Config,
@@ -158,7 +158,7 @@ declare global {
   }
 }
 
-function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
+function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<string>>(
   config?: Config,
 ): StoreEnhancer {
   /* eslint-disable no-param-reassign */

packages/redux-devtools-app/src/actions/index.ts

@@ -53,7 +53,7 @@ import { LiftedState } from '@redux-devtools/core';
 let monitorReducer: (
   monitorProps: unknown,
   state: unknown | undefined,
-  action: Action<unknown>,
+  action: Action<string>,
 ) => unknown;
 let monitorProps: unknown = {};
 
@@ -110,7 +110,7 @@ export interface InitMonitorAction {
   update: (
     monitorProps: unknown,
     state: unknown | undefined,
-    action: Action<unknown>,
+    action: Action<string>,
   ) => unknown;
   monitorProps: unknown;
 }
@@ -120,7 +120,7 @@ export interface MonitorActionAction {
   monitorReducer: (
     monitorProps: unknown,
     state: unknown | undefined,
-    action: Action<unknown>,
+    action: Action<string>,
   ) => unknown;
   monitorProps: unknown;
 }
@@ -159,8 +159,8 @@ interface ReorderActionAction {
 interface ImportStateAction {
   type: 'IMPORT_STATE';
   nextLiftedState:
-    | LiftedState<unknown, Action<unknown>, unknown>
+    | LiftedState<unknown, Action<string>, unknown>
-    | readonly Action<unknown>[];
+    | readonly Action<string>[];
   preloadedState?: unknown;
   noRecompute?: boolean | undefined;
 }
@@ -211,7 +211,7 @@ export function liftedDispatch(
     | InitMonitorAction
     | JumpToStateAction
     | JumpToActionAction
-    | LiftedAction<unknown, Action<unknown>, unknown>,
+    | LiftedAction<unknown, Action<string>, unknown>,
 ): MonitorActionAction | LiftedActionDispatchAction {
   if (action.type[0] === '@') {
     if (action.type === '@@INIT_MONITOR') {

packages/redux-devtools-app/src/components/TopButtons.tsx

@@ -14,7 +14,7 @@ import { Options, State } from '../reducers/instances';
 const { reset, rollback, commit, sweep } = ActionCreators;
 
 interface Props {
-  dispatch: (action: LiftedAction<unknown, Action<unknown>, unknown>) => void;
+  dispatch: (action: LiftedAction<unknown, Action<string>, unknown>) => void;
   liftedState: State;
   options: Options;
 }

packages/redux-devtools-app/src/containers/DevTools.tsx

@@ -14,7 +14,7 @@ interface Props {
   liftedState: State;
   monitorState: MonitorStateMonitorState | undefined;
   dispatch: (
-    action: LiftedAction<unknown, Action<unknown>, unknown> | InitMonitorAction,
+    action: LiftedAction<unknown, Action<string>, unknown> | InitMonitorAction,
   ) => void;
   features: Features | undefined;
   theme: ThemeFromProvider;
@@ -24,12 +24,12 @@ interface Props {
 class DevTools extends Component<Props> {
   monitorProps?: object;
   Monitor?: React.ComponentType<
-    LiftedState<unknown, Action<unknown>, unknown>
+    LiftedState<unknown, Action<string>, unknown>
   > & {
     update(
       monitorProps: unknown,
       state: unknown | undefined,
-      action: Action<unknown>,
+      action: Action<string>,
     ): unknown;
   };
   preventRender?: boolean;
@@ -58,7 +58,7 @@ class DevTools extends Component<Props> {
         newMonitorState = update(
           this.monitorProps,
           undefined,
-          {} as Action<unknown>,
+          {} as Action<string>,
         );
         if (newMonitorState !== monitorState) {
           this.preventRender = true;
@@ -88,7 +88,7 @@ class DevTools extends Component<Props> {
   }
 
   dispatch = (
-    action: LiftedAction<unknown, Action<unknown>, unknown> | InitMonitorAction,
+    action: LiftedAction<unknown, Action<string>, unknown> | InitMonitorAction,
   ) => {
     this.props.dispatch(action);
   };

packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/SubTabs.tsx

@@ -19,7 +19,7 @@ type StateProps = ReturnType<typeof mapStateToProps>;
 type DispatchProps = ResolveThunks<typeof actionCreators>;
 type Props = StateProps &
   DispatchProps &
-  TabComponentProps<unknown, Action<unknown>>;
+  TabComponentProps<unknown, Action<string>>;
 
 class SubTabs extends Component<Props> {
   tabs?: (Tab<Props> | Tab<{ data: unknown }> | Tab<{ data?: Delta }>)[];

packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/index.tsx

@@ -39,17 +39,17 @@ class InspectorWrapper extends Component<Props> {
 
   render() {
     const { features, ...rest } = this.props;
-    let tabs: () => Tab<unknown, Action<unknown>>[];
+    let tabs: () => Tab<unknown, Action<string>>[];
     if (features && features.test) {
       tabs = () => [
-        ...(DEFAULT_TABS as Tab<unknown, Action<unknown>>[]),
+        ...(DEFAULT_TABS as Tab<unknown, Action<string>>[]),
         { name: 'Test', component: TestTab } as unknown as Tab<
           unknown,
-          Action<unknown>
+          Action<string>
         >,
       ];
     } else {
-      tabs = () => DEFAULT_TABS as Tab<unknown, Action<unknown>>[];
+      tabs = () => DEFAULT_TABS as Tab<unknown, Action<string>>[];
     }
 
     return (

packages/redux-devtools-app/src/containers/monitors/Slider.tsx

@@ -14,7 +14,7 @@ const SliderWrapper = styled.div`
 
 interface Props {
   liftedState: State;
-  dispatch: (action: LiftedAction<unknown, Action<unknown>, unknown>) => void;
+  dispatch: (action: LiftedAction<unknown, Action<string>, unknown>) => void;
   theme: ThemeFromProvider;
 }
 

packages/redux-devtools-app/src/reducers/instances.ts

@@ -45,7 +45,7 @@ export interface Options {
 }
 
 export interface State {
-  actionsById: { [actionId: number]: PerformAction<Action<unknown>> };
+  actionsById: { [actionId: number]: PerformAction<Action<string>> };
   computedStates: { state: unknown; error?: string }[];
   currentStateIndex: number;
   nextActionId: number;
@@ -109,7 +109,7 @@ function updateState(
   let newState;
   const liftedState = state[id] || state.default;
   const action = ((request.action && parseJSON(request.action, serialize)) ||
-    {}) as PerformAction<Action<unknown>>;
+    {}) as PerformAction<Action<string>>;
 
   switch (request.type) {
     case 'INIT':
@@ -129,7 +129,7 @@ function updateState(
           newState = recompute(
             newState,
             request.batched ? payload : (payload as unknown as State[])[i],
-            action[i] as PerformAction<Action<unknown>>,
+            action[i] as PerformAction<Action<string>>,
             newState.nextActionId + 1,
             maxAge,
             isExcess,

packages/redux-devtools-app/src/utils/updateState.ts

@@ -7,8 +7,8 @@ export function recompute(
   previousLiftedState: State,
   storeState: State,
   action:
-    | PerformAction<Action<unknown>>
+    | PerformAction<Action<string>>
-    | { action: Action<unknown>; timestamp?: number; stack?: string },
+    | { action: Action<string>; timestamp?: number; stack?: string },
   nextActionId = 1,
   maxAge?: number,
   isExcess?: boolean,
@@ -24,10 +24,8 @@ export function recompute(
   }
   liftedState.stagedActionIds = [...liftedState.stagedActionIds, actionId];
   liftedState.actionsById = { ...liftedState.actionsById };
-  if ((action as PerformAction<Action<unknown>>).type === 'PERFORM_ACTION') {
+  if ((action as PerformAction<Action<string>>).type === 'PERFORM_ACTION') {
-    liftedState.actionsById[actionId] = action as PerformAction<
+    liftedState.actionsById[actionId] = action as PerformAction<Action<string>>;
-      Action<unknown>
-    >;
   } else {
     liftedState.actionsById[actionId] = {
       action: action.action || action,

packages/redux-devtools-chart-monitor/src/Chart.tsx

@@ -11,7 +11,7 @@ const wrapperStyle = {
   height: '100%',
 };
 
-export interface Props<S, A extends Action<unknown>>
+export interface Props<S, A extends Action<string>>
   extends LiftedState<S, A, ChartMonitorState>,
     Options {
   dispatch: Dispatch<LiftedAction<S, A, ChartMonitorState>>;
@@ -24,7 +24,7 @@ export interface Props<S, A extends Action<unknown>>
   defaultIsVisible?: boolean;
 }
 
-class Chart<S, A extends Action<unknown>> extends Component<Props<S, A>> {
+class Chart<S, A extends Action<string>> extends Component<Props<S, A>> {
   divRef = createRef<HTMLDivElement>();
   // eslint-disable-next-line @typescript-eslint/ban-types
   renderChart?: (state?: {} | null | undefined) => void;

packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx

@@ -39,7 +39,7 @@ function invertColors(theme: themes.Base16Theme) {
   };
 }
 
-export interface ChartMonitorProps<S, A extends Action<unknown>>
+export interface ChartMonitorProps<S, A extends Action<string>>
   extends LiftedState<S, A, ChartMonitorState>,
     Options {
   dispatch: Dispatch<LiftedAction<S, A, ChartMonitorState>>;
@@ -51,7 +51,7 @@ export interface ChartMonitorProps<S, A extends Action<unknown>>
   defaultIsVisible?: boolean;
 }
 
-class ChartMonitor<S, A extends Action<unknown>> extends PureComponent<
+class ChartMonitor<S, A extends Action<string>> extends PureComponent<
   ChartMonitorProps<S, A>
 > {
   static update = reducer;

packages/redux-devtools-chart-monitor/src/reducers.ts

@@ -2,7 +2,7 @@ import { Action } from 'redux';
 import { ChartMonitorAction, TOGGLE_VISIBILITY } from './actions';
 import { ChartMonitorProps } from './ChartMonitor';
 
-function toggleVisibility<S, A extends Action<unknown>>(
+function toggleVisibility<S, A extends Action<string>>(
   props: ChartMonitorProps<S, A>,
   state = props.defaultIsVisible,
   action: ChartMonitorAction,
@@ -22,7 +22,7 @@ export interface ChartMonitorState {
   isVisible?: boolean;
 }
 
-export default function reducer<S, A extends Action<unknown>>(
+export default function reducer<S, A extends Action<string>>(
   props: ChartMonitorProps<S, A>,
   state: ChartMonitorState | undefined = {},
   action: ChartMonitorAction,

packages/redux-devtools-dock-monitor/src/DockMonitor.tsx

@@ -23,7 +23,7 @@ interface KeyObject {
   sequence: string;
 }
 
-interface ExternalProps<S, A extends Action<unknown>> {
+interface ExternalProps<S, A extends Action<string>> {
   defaultPosition: 'left' | 'top' | 'right' | 'bottom';
   defaultIsVisible: boolean;
   defaultSize: number;
@@ -35,8 +35,8 @@ interface ExternalProps<S, A extends Action<unknown>> {
   dispatch: Dispatch<DockMonitorAction>;
 
   children:
-    | Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<unknown>>
+    | Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<string>>
-    | Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<unknown>>[];
+    | Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<string>>[];
 }
 
 interface DefaultProps {
@@ -46,7 +46,7 @@ interface DefaultProps {
   fluid: boolean;
 }
 
-export interface DockMonitorProps<S, A extends Action<unknown>>
+export interface DockMonitorProps<S, A extends Action<string>>
   extends LiftedState<S, A, DockMonitorState> {
   defaultPosition: 'left' | 'top' | 'right' | 'bottom';
   defaultIsVisible: boolean;
@@ -59,11 +59,11 @@ export interface DockMonitorProps<S, A extends Action<unknown>>
   dispatch: Dispatch<DockMonitorAction>;
 
   children:
-    | Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<unknown>>
+    | Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<string>>
-    | Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<unknown>>[];
+    | Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<string>>[];
 }
 
-class DockMonitor<S, A extends Action<unknown>> extends Component<
+class DockMonitor<S, A extends Action<string>> extends Component<
   DockMonitorProps<S, A>
 > {
   static update = reducer;
@@ -179,7 +179,7 @@ class DockMonitor<S, A extends Action<unknown>> extends Component<
   };
 
   renderChild(
-    child: Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<unknown>>,
+    child: Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<string>>,
     index: number,
     otherProps: Omit<
       DockMonitorProps<S, A>,
@@ -214,19 +214,13 @@ class DockMonitor<S, A extends Action<unknown>> extends Component<
       >
         {Children.map(
           children as
+            | Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<string>>
             | Monitor<
                 S,
                 A,
                 LiftedState<S, A, unknown>,
                 unknown,
-                Action<unknown>
+                Action<string>
-              >
-            | Monitor<
-                S,
-                A,
-                LiftedState<S, A, unknown>,
-                unknown,
-                Action<unknown>
               >[],
           (child, index) => this.renderChild(child, index, rest),
         )}
@@ -236,10 +230,10 @@ class DockMonitor<S, A extends Action<unknown>> extends Component<
 }
 
 export default DockMonitor as unknown as React.ComponentType<
-  ExternalProps<unknown, Action<unknown>>
+  ExternalProps<unknown, Action<string>>
 > & {
   update(
-    monitorProps: ExternalProps<unknown, Action<unknown>>,
+    monitorProps: ExternalProps<unknown, Action<string>>,
     state: DockMonitorState | undefined,
     action: DockMonitorAction,
   ): DockMonitorState;

packages/redux-devtools-dock-monitor/src/reducers.ts

@@ -18,7 +18,7 @@ export interface DockMonitorState {
   childMonitorIndex: number;
 }
 
-function position<S, A extends Action<unknown>>(
+function position<S, A extends Action<string>>(
   props: DockMonitorProps<S, A>,
   state = props.defaultPosition,
   action: DockMonitorAction,
@@ -28,7 +28,7 @@ function position<S, A extends Action<unknown>>(
     : state;
 }
 
-function size<S, A extends Action<unknown>>(
+function size<S, A extends Action<string>>(
   props: DockMonitorProps<S, A>,
   state = props.defaultSize,
   action: DockMonitorAction,
@@ -36,7 +36,7 @@ function size<S, A extends Action<unknown>>(
   return action.type === CHANGE_SIZE ? action.size : state;
 }
 
-function isVisible<S, A extends Action<unknown>>(
+function isVisible<S, A extends Action<string>>(
   props: DockMonitorProps<S, A>,
   state = props.defaultIsVisible,
   action: DockMonitorAction,
@@ -44,7 +44,7 @@ function isVisible<S, A extends Action<unknown>>(
   return action.type === TOGGLE_VISIBILITY ? !state : state;
 }
 
-function childMonitorStates<S, A extends Action<unknown>>(
+function childMonitorStates<S, A extends Action<string>>(
   props: DockMonitorProps<S, A>,
   state: unknown[] = [],
   action: DockMonitorAction,
@@ -54,7 +54,7 @@ function childMonitorStates<S, A extends Action<unknown>>(
   );
 }
 
-function childMonitorIndex<S, A extends Action<unknown>>(
+function childMonitorIndex<S, A extends Action<string>>(
   props: DockMonitorProps<S, A>,
   state = 0,
   action: DockMonitorAction,
@@ -67,7 +67,7 @@ function childMonitorIndex<S, A extends Action<unknown>>(
   }
 }
 
-export default function reducer<S, A extends Action<unknown>>(
+export default function reducer<S, A extends Action<string>>(
   props: DockMonitorProps<S, A>,
   state: Partial<DockMonitorState> = {},
   action: DockMonitorAction,

packages/redux-devtools-extension/src/index.ts

@@ -220,7 +220,7 @@ export interface Config extends EnhancerOptions {
 
 interface ConnectResponse {
   init: (state: unknown) => void;
-  send: (action: Action<unknown>, state: unknown) => void;
+  send: (action: Action<string>, state: unknown) => void;
 }
 
 interface ReduxDevtoolsExtension {

packages/redux-devtools-extension/src/logOnly.ts

@@ -17,7 +17,7 @@ function enhancer(options?: EnhancerOptions): StoreEnhancer {
   if (config.latency === undefined) config.latency = 500;
 
   return function (createStore) {
-    return function <S, A extends Action<unknown>>(
+    return function <S, A extends Action<string>>(
       reducer: Reducer<S, A>,
       preloadedState: PreloadedState<S> | undefined,
     ) {

packages/redux-devtools-inspector-monitor-test-tab/demo/src/DevTools.tsx

@@ -30,7 +30,7 @@ export const getDevTools = (location: { search: string }) =>
               component: TestTab,
             },
             ...defaultTabs,
-          ] as Tab<unknown, Action<unknown>>[]
+          ] as Tab<unknown, Action<string>>[]
         }
       />
     </DockMonitor>,

packages/redux-devtools-inspector-monitor-test-tab/src/TestGenerator.tsx

@@ -60,7 +60,7 @@ export function compare<S>(
   ).forEach(generate);
 }
 
-interface Props<S, A extends Action<unknown>>
+interface Props<S, A extends Action<string>>
   extends Omit<TabComponentProps<S, A>, 'monitorState' | 'updateMonitorState'> {
   name?: string;
   isVanilla?: boolean;
@@ -74,10 +74,10 @@ interface Props<S, A extends Action<unknown>>
 
 export default class TestGenerator<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
 > extends (PureComponent || Component)<Props<S, A>> {
   getMethod(action: A) {
-    let type: string = action.type as string;
+    let type = action.type;
     if (type[0] === '┗') type = type.substr(1).trim();
     const args = (action as unknown as { arguments: unknown[] }).arguments
       ? (action as unknown as { arguments: unknown[] }).arguments
@@ -143,11 +143,11 @@ export default class TestGenerator<
       if (
         !isVanilla ||
         /* eslint-disable-next-line no-useless-escape */
-        /^┗?\s?[a-zA-Z0-9_@.\[\]-]+?$/.test(actions[i].action.type as string)
+        /^┗?\s?[a-zA-Z0-9_@.\[\]-]+?$/.test(actions[i].action.type)
       ) {
         if (isFirst) isFirst = false;
         else r += space;
-        if (!isVanilla || (actions[i].action.type as string)[0] !== '@') {
+        if (!isVanilla || actions[i].action.type[0] !== '@') {
           r +=
             (dispatcher as (locals: DispatcherLocals) => string)({
               action: !isVanilla
@@ -184,10 +184,7 @@ export default class TestGenerator<
           actionName:
             (selectedActionId === null || selectedActionId > 0) &&
             actions[startIdx]
-              ? (actions[startIdx].action.type as string).replace(
+              ? actions[startIdx].action.type.replace(/[^a-zA-Z0-9_-]+/, '')
-                  /[^a-zA-Z0-9_-]+/,
-                  '',
-                )
               : 'should return the initial state',
           initialState: stringify(computedStates[startIdx - 1].state),
           assertions: r,

packages/redux-devtools-inspector-monitor-test-tab/src/index.tsx

@@ -42,7 +42,7 @@ interface State {
   dialogStatus: 'Add' | 'Edit' | null;
 }
 
-export class TestTab<S, A extends Action<unknown>> extends Component<
+export class TestTab<S, A extends Action<string>> extends Component<
   TabComponentProps<S, A>,
   State
 > {

packages/redux-devtools-inspector-monitor-test-tab/test/TestGenerator.spec.tsx

@@ -8,7 +8,7 @@ import strTemplate from '../src/redux/mocha/template';
 import fnVanillaTemplate from '../src/vanilla/mocha';
 import strVanillaTemplate from '../src/vanilla/mocha/template';
 
-const actions: { [actionId: number]: PerformAction<Action<unknown>> } = {
+const actions: { [actionId: number]: PerformAction<Action<string>> } = {
   0: {
     type: 'PERFORM_ACTION',
     action: { type: '@@INIT' },

packages/redux-devtools-inspector-monitor-trace-tab/src/StackTraceTab.tsx

@@ -10,7 +10,7 @@ import { ErrorLocation } from './react-error-overlay/utils/parseCompileError';
 
 const rootStyle = { padding: '5px 10px' };
 
-interface Props<S, A extends Action<unknown>> extends TabComponentProps<S, A> {
+interface Props<S, A extends Action<string>> extends TabComponentProps<S, A> {
   openFile: (
     fileName: string,
     lineNumber: number,
@@ -24,7 +24,7 @@ interface State {
   showDocsLink?: boolean;
 }
 
-export class TraceTab<S, A extends Action<unknown>> extends Component<
+export class TraceTab<S, A extends Action<string>> extends Component<
   Props<S, A>,
   State
 > {

packages/redux-devtools-inspector-monitor/src/ActionList.tsx

@@ -22,7 +22,7 @@ import { CSS } from '@dnd-kit/utilities';
 import ActionListRow from './ActionListRow';
 import ActionListHeader from './ActionListHeader';
 
-function getTimestamps<A extends Action<unknown>>(
+function getTimestamps<A extends Action<string>>(
   actions: { [actionId: number]: PerformAction<A> },
   actionIds: number[],
   actionId: number,
@@ -40,7 +40,7 @@ function scrollToBottom(node: HTMLDivElement) {
   node.scrollTop = node.scrollHeight;
 }
 
-interface Props<A extends Action<unknown>> {
+interface Props<A extends Action<string>> {
   actions: { [actionId: number]: PerformAction<A> };
   actionIds: number[];
   isWideLayout: boolean;
@@ -63,7 +63,7 @@ interface Props<A extends Action<unknown>> {
   lastActionId: number;
 }
 
-export default function ActionList<A extends Action<unknown>>({
+export default function ActionList<A extends Action<string>>({
   styling,
   actions,
   actionIds,
@@ -140,7 +140,7 @@ export default function ActionList<A extends Action<unknown>>({
   const filteredActionIds = searchValue
     ? actionIds.filter(
         (id) =>
-          (actions[id].action.type as string)
+          actions[id].action.type
             .toLowerCase()
             .indexOf(lowerSearchValue as string) !== -1,
       )

packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx

@@ -12,7 +12,7 @@ const BUTTON_JUMP = 'Jump';
 
 type Button = typeof BUTTON_SKIP | typeof BUTTON_JUMP;
 
-interface Props<A extends Action<unknown>> {
+interface Props<A extends Action<string>> {
   styling: StylingFunction;
   actionId: number;
   isInitAction: boolean;
@@ -33,7 +33,7 @@ interface State {
 }
 
 export default class ActionListRow<
-  A extends Action<unknown>,
+  A extends Action<string>,
 > extends PureComponent<Props<A>, State> {
   state: State = { hover: false };
 
@@ -73,7 +73,7 @@ export default class ActionListRow<
     let actionType = action.type;
     if (typeof actionType === 'undefined') actionType = '<UNDEFINED>';
     else if (actionType === null) actionType = '<NULL>';
-    else actionType = (actionType as string).toString() || '<EMPTY>';
+    else actionType = actionType.toString() || '<EMPTY>';
 
     return (
       <div
@@ -106,7 +106,7 @@ export default class ActionListRow<
             isSkipped && 'actionListItemNameSkipped',
           ])}
         >
-          {actionType as string}
+          {actionType}
         </div>
         {hideActionButtons ? (
           <RightSlider styling={styling} shown>

packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx

@@ -11,7 +11,7 @@ import DiffTab from './tabs/DiffTab';
 import StateTab from './tabs/StateTab';
 import ActionTab from './tabs/ActionTab';
 
-export interface TabComponentProps<S, A extends Action<unknown>> {
+export interface TabComponentProps<S, A extends Action<string>> {
   labelRenderer: LabelRenderer;
   styling: StylingFunction;
   computedStates: { state: S; error?: string }[];
@@ -31,7 +31,7 @@ export interface TabComponentProps<S, A extends Action<unknown>> {
   updateMonitorState: (monitorState: Partial<DevtoolsInspectorState>) => void;
 }
 
-export interface Tab<S, A extends Action<unknown>> {
+export interface Tab<S, A extends Action<string>> {
   name: string;
   component: React.ComponentType<TabComponentProps<S, A>>;
 }
@@ -51,7 +51,7 @@ const DEFAULT_TABS = [
   },
 ];
 
-interface Props<S, A extends Action<unknown>> {
+interface Props<S, A extends Action<string>> {
   base16Theme: Base16Theme;
   invertTheme: boolean;
   isWideLayout: boolean;
@@ -76,7 +76,7 @@ interface Props<S, A extends Action<unknown>> {
   disableStateTreeCollection: boolean;
 }
 
-class ActionPreview<S, A extends Action<unknown>> extends Component<
+class ActionPreview<S, A extends Action<string>> extends Component<
   Props<S, A>
 > {
   static defaultProps = {
@@ -123,7 +123,7 @@ class ActionPreview<S, A extends Action<unknown>> extends Component<
     return (
       <div key="actionPreview" {...styling('actionPreview')}>
         <ActionPreviewHeader
-          tabs={renderedTabs as unknown as Tab<unknown, Action<unknown>>[]}
+          tabs={renderedTabs as unknown as Tab<unknown, Action<string>>[]}
           {...{ styling, inspectedPath, onInspectPath, tabName, onSelectTab }}
         />
         {!error && (

packages/redux-devtools-inspector-monitor/src/ActionPreviewHeader.tsx

@@ -4,7 +4,7 @@ import { Action } from 'redux';
 import { StylingFunction } from 'react-base16-styling';
 import { Tab } from './ActionPreview';
 
-interface Props<S, A extends Action<unknown>> {
+interface Props<S, A extends Action<string>> {
   tabs: Tab<S, A>[];
   styling: StylingFunction;
   inspectedPath: (string | number)[];
@@ -14,7 +14,7 @@ interface Props<S, A extends Action<unknown>> {
 }
 
 const ActionPreviewHeader: FunctionComponent<
-  Props<unknown, Action<unknown>>
+  Props<unknown, Action<string>>
 > = ({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) => (
   <div key="previewHeader" {...styling('previewHeader')}>
     <div {...styling('tabSelector')}>

packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx

@@ -43,13 +43,13 @@ const {
   reorderAction,
 } = ActionCreators;
 
-function getLastActionId<S, A extends Action<unknown>>(
+function getLastActionId<S, A extends Action<string>>(
   props: DevtoolsInspectorProps<S, A>,
 ) {
   return props.stagedActionIds[props.stagedActionIds.length - 1];
 }
 
-function getCurrentActionId<S, A extends Action<unknown>>(
+function getCurrentActionId<S, A extends Action<string>>(
   props: DevtoolsInspectorProps<S, A>,
   monitorState: DevtoolsInspectorState,
 ) {
@@ -73,7 +73,7 @@ function getFromState<S>(
   return computedStates[fromStateIdx];
 }
 
-function createIntermediateState<S, A extends Action<unknown>>(
+function createIntermediateState<S, A extends Action<string>>(
   props: DevtoolsInspectorProps<S, A>,
   monitorState: DevtoolsInspectorState,
 ) {
@@ -126,7 +126,7 @@ function createIntermediateState<S, A extends Action<unknown>>(
   };
 }
 
-function createThemeState<S, A extends Action<unknown>>(
+function createThemeState<S, A extends Action<string>>(
   props: DevtoolsInspectorProps<S, A>,
 ) {
   const base16Theme = getBase16Theme(props.theme, base16Themes)!;
@@ -137,7 +137,7 @@ function createThemeState<S, A extends Action<unknown>>(
   return { base16Theme, styling };
 }
 
-export interface ExternalProps<S, A extends Action<unknown>> {
+export interface ExternalProps<S, A extends Action<string>> {
   dispatch: Dispatch<
     DevtoolsInspectorAction | LiftedAction<S, A, DevtoolsInspectorState>
   >;
@@ -165,7 +165,7 @@ interface DefaultProps {
   invertTheme: boolean;
 }
 
-export interface DevtoolsInspectorProps<S, A extends Action<unknown>>
+export interface DevtoolsInspectorProps<S, A extends Action<string>>
   extends LiftedState<S, A, DevtoolsInspectorState> {
   dispatch: Dispatch<
     DevtoolsInspectorAction | LiftedAction<S, A, DevtoolsInspectorState>
@@ -186,7 +186,7 @@ export interface DevtoolsInspectorProps<S, A extends Action<unknown>>
   tabs: Tab<S, A>[] | ((tabs: Tab<S, A>[]) => Tab<S, A>[]);
 }
 
-interface State<S, A extends Action<unknown>> {
+interface State<S, A extends Action<string>> {
   delta: Delta | null | undefined | false;
   nextState: S;
   action: A;
@@ -195,7 +195,7 @@ interface State<S, A extends Action<unknown>> {
   themeState: { base16Theme: Base16Theme; styling: StylingFunction };
 }
 
-class DevtoolsInspector<S, A extends Action<unknown>> extends PureComponent<
+class DevtoolsInspector<S, A extends Action<string>> extends PureComponent<
   DevtoolsInspectorProps<S, A>,
   State<S, A>
 > {
@@ -474,10 +474,10 @@ class DevtoolsInspector<S, A extends Action<unknown>> extends PureComponent<
 }
 
 export default DevtoolsInspector as unknown as React.ComponentType<
-  ExternalProps<unknown, Action<unknown>>
+  ExternalProps<unknown, Action<string>>
 > & {
   update(
-    monitorProps: ExternalProps<unknown, Action<unknown>>,
+    monitorProps: ExternalProps<unknown, Action<string>>,
     state: DevtoolsInspectorState | undefined,
     action: DevtoolsInspectorAction,
   ): DevtoolsInspectorState;

packages/redux-devtools-inspector-monitor/src/redux.ts

@@ -45,7 +45,7 @@ function reduceUpdateState(
     : state;
 }
 
-export function reducer<S, A extends Action<unknown>>(
+export function reducer<S, A extends Action<string>>(
   props: DevtoolsInspectorProps<S, A>,
   state = DEFAULT_STATE,
   action: DevtoolsInspectorAction,

packages/redux-devtools-inspector-monitor/src/tabs/ActionTab.tsx

@@ -7,7 +7,7 @@ import getJsonTreeTheme from './getJsonTreeTheme';
 import { TabComponentProps } from '../ActionPreview';
 
 const ActionTab: FunctionComponent<
-  TabComponentProps<unknown, Action<unknown>>
+  TabComponentProps<unknown, Action<string>>
 > = ({
   action,
   styling,

packages/redux-devtools-inspector-monitor/src/tabs/DiffTab.tsx

@@ -5,7 +5,7 @@ import { TabComponentProps } from '../ActionPreview';
 import { Action } from 'redux';
 
 const DiffTab: FunctionComponent<
-  TabComponentProps<unknown, Action<unknown>>
+  TabComponentProps<unknown, Action<string>>
 > = ({
   delta,
   styling,

packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx

@@ -7,7 +7,7 @@ import getJsonTreeTheme from './getJsonTreeTheme';
 import { TabComponentProps } from '../ActionPreview';
 
 const StateTab: React.FunctionComponent<
-  TabComponentProps<any, Action<unknown>>
+  TabComponentProps<any, Action<string>>
 > = ({
   nextState,
   styling,

packages/redux-devtools-instrument/src/instrument.ts

@@ -42,7 +42,7 @@ const isChromeOrNode =
     process.release &&
     process.release.name === 'node');
 
-export interface PerformAction<A extends Action<unknown>> {
+export interface PerformAction<A extends Action<string>> {
   type: typeof ActionTypes.PERFORM_ACTION;
   action: A;
   timestamp: number;
@@ -96,7 +96,7 @@ interface JumpToActionAction {
   actionId: number;
 }
 
-interface ImportStateAction<S, A extends Action<unknown>, MonitorState> {
+interface ImportStateAction<S, A extends Action<string>, MonitorState> {
   type: typeof ActionTypes.IMPORT_STATE;
   nextLiftedState: LiftedState<S, A, MonitorState> | readonly A[];
   preloadedState?: S;
@@ -113,7 +113,7 @@ interface PauseRecordingAction {
   status: boolean;
 }
 
-export type LiftedAction<S, A extends Action<unknown>, MonitorState> =
+export type LiftedAction<S, A extends Action<string>, MonitorState> =
   | PerformAction<A>
   | ResetAction
   | RollbackAction
@@ -132,7 +132,7 @@ export type LiftedAction<S, A extends Action<unknown>, MonitorState> =
  * Action creators to change the History state.
  */
 export const ActionCreators = {
-  performAction<A extends Action<unknown>>(
+  performAction<A extends Action<string>>(
     action: A,
     trace?: ((action: A) => string | undefined) | boolean,
     traceLimit?: number,
@@ -243,7 +243,7 @@ export const ActionCreators = {
     return { type: ActionTypes.JUMP_TO_ACTION, actionId };
   },
 
-  importState<S, A extends Action<unknown>, MonitorState = null>(
+  importState<S, A extends Action<string>, MonitorState = null>(
     nextLiftedState: LiftedState<S, A, MonitorState> | readonly A[],
     noRecompute?: boolean,
   ): ImportStateAction<S, A, MonitorState> {
@@ -264,7 +264,7 @@ export const INIT_ACTION = { type: '@@INIT' };
 /**
  * Computes the next entry with exceptions catching.
  */
-function computeWithTryCatch<S, A extends Action<unknown>>(
+function computeWithTryCatch<S, A extends Action<string>>(
   reducer: Reducer<S, A>,
   action: A,
   state: S,
@@ -295,7 +295,7 @@ function computeWithTryCatch<S, A extends Action<unknown>>(
 /**
  * Computes the next entry in the log by applying an action.
  */
-function computeNextEntry<S, A extends Action<unknown>>(
+function computeNextEntry<S, A extends Action<string>>(
   reducer: Reducer<S, A>,
   action: A,
   state: S,
@@ -310,7 +310,7 @@ function computeNextEntry<S, A extends Action<unknown>>(
 /**
  * Runs the reducer on invalidated actions to get a fresh computation log.
  */
-function recomputeStates<S, A extends Action<unknown>>(
+function recomputeStates<S, A extends Action<string>>(
   computedStates: { state: S; error?: string }[],
   minInvalidatedStateIndex: number,
   reducer: Reducer<S, A>,
@@ -367,7 +367,7 @@ function recomputeStates<S, A extends Action<unknown>>(
 /**
  * Lifts an app's action into an action on the lifted store.
  */
-export function liftAction<A extends Action<unknown>>(
+export function liftAction<A extends Action<string>>(
   action: A,
   trace?: ((action: A) => string | undefined) | boolean,
   traceLimit?: number,
@@ -382,13 +382,13 @@ export function liftAction<A extends Action<unknown>>(
   );
 }
 
-function isArray<S, A extends Action<unknown>, MonitorState>(
+function isArray<S, A extends Action<string>, MonitorState>(
   nextLiftedState: LiftedState<S, A, MonitorState> | readonly A[],
 ): nextLiftedState is readonly A[] {
   return Array.isArray(nextLiftedState);
 }
 
-export interface LiftedState<S, A extends Action<unknown>, MonitorState> {
+export interface LiftedState<S, A extends Action<string>, MonitorState> {
   monitorState: MonitorState;
   nextActionId: number;
   actionsById: { [actionId: number]: PerformAction<A> };
@@ -406,9 +406,9 @@ export interface LiftedState<S, A extends Action<unknown>, MonitorState> {
  */
 export function liftReducerWith<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
   MonitorState,
-  MonitorAction extends Action<unknown>,
+  MonitorAction extends Action<string>,
 >(
   reducer: Reducer<S, A>,
   initialCommittedState: PreloadedState<S> | undefined,
@@ -834,7 +834,7 @@ export function liftReducerWith<
  */
 export function unliftState<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
   MonitorState,
   NextStateExt,
 >(
@@ -845,21 +845,21 @@ export function unliftState<
   return state as S & NextStateExt;
 }
 
-export type LiftedReducer<S, A extends Action<unknown>, MonitorState> = Reducer<
+export type LiftedReducer<S, A extends Action<string>, MonitorState> = Reducer<
   LiftedState<S, A, MonitorState>,
   LiftedAction<S, A, MonitorState>
 >;
 
-export type LiftedStore<S, A extends Action<unknown>, MonitorState> = Store<
+export type LiftedStore<S, A extends Action<string>, MonitorState> = Store<
   LiftedState<S, A, MonitorState>,
   LiftedAction<S, A, MonitorState>
 >;
 
-export type InstrumentExt<S, A extends Action<unknown>, MonitorState> = {
+export type InstrumentExt<S, A extends Action<string>, MonitorState> = {
   liftedStore: LiftedStore<S, A, MonitorState>;
 };
 
-export type EnhancedStore<S, A extends Action<unknown>, MonitorState> = Store<
+export type EnhancedStore<S, A extends Action<string>, MonitorState> = Store<
   S,
   A
 > &
@@ -870,9 +870,9 @@ export type EnhancedStore<S, A extends Action<unknown>, MonitorState> = Store<
  */
 export function unliftStore<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
   MonitorState,
-  MonitorAction extends Action<unknown>,
+  MonitorAction extends Action<string>,
   NextExt,
   NextStateExt,
 >(
@@ -965,9 +965,9 @@ export function unliftStore<
 
 export interface Options<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
   MonitorState,
-  MonitorAction extends Action<unknown>,
+  MonitorAction extends Action<string>,
 > {
   maxAge?:
     | number
@@ -990,9 +990,9 @@ export interface Options<
  */
 export function instrument<
   OptionsS,
-  OptionsA extends Action<unknown>,
+  OptionsA extends Action<string>,
   MonitorState = null,
-  MonitorAction extends Action<unknown> = never,
+  MonitorAction extends Action<string> = never,
 >(
   monitorReducer: Reducer<MonitorState, MonitorAction> = (() =>
     null) as unknown as Reducer<MonitorState, MonitorAction>,
@@ -1008,7 +1008,7 @@ export function instrument<
   return <NextExt, NextStateExt>(
       createStore: StoreEnhancerStoreCreator<NextExt, NextStateExt>,
     ) =>
-    <S, A extends Action<unknown>>(
+    <S, A extends Action<string>>(
       reducer: Reducer<S, A>,
       initialState?: PreloadedState<S>,
     ) => {

packages/redux-devtools-instrument/test/instrument.spec.ts

@@ -1152,7 +1152,7 @@ describe('instrument', () => {
     });
   });
 
-  function filterStackAndTimestamps<S, A extends Action<unknown>>(
+  function filterStackAndTimestamps<S, A extends Action<string>>(
     state: LiftedState<S, A, null>,
   ) {
     state.actionsById = _.mapValues(state.actionsById, (action) => {

packages/redux-devtools-log-monitor/src/LogMonitor.tsx

@@ -45,7 +45,7 @@ const styles: {
   },
 };
 
-interface ExternalProps<S, A extends Action<unknown>> {
+interface ExternalProps<S, A extends Action<string>> {
   dispatch: Dispatch<LogMonitorAction | LiftedAction<S, A, LogMonitorState>>;
 
   preserveScrollTop: boolean;
@@ -66,7 +66,7 @@ interface DefaultProps<S> {
   markStateDiff: boolean;
 }
 
-export interface LogMonitorProps<S, A extends Action<unknown>>
+export interface LogMonitorProps<S, A extends Action<string>>
   extends LiftedState<S, A, LogMonitorState> {
   dispatch: Dispatch<LogMonitorAction | LiftedAction<S, A, LogMonitorState>>;
 
@@ -79,7 +79,7 @@ export interface LogMonitorProps<S, A extends Action<unknown>>
   hideMainButtons?: boolean;
 }
 
-class LogMonitor<S, A extends Action<unknown>> extends PureComponent<
+class LogMonitor<S, A extends Action<string>> extends PureComponent<
   LogMonitorProps<S, A>
 > {
   static update = reducer;
@@ -274,10 +274,10 @@ class LogMonitor<S, A extends Action<unknown>> extends PureComponent<
 }
 
 export default LogMonitor as unknown as React.ComponentType<
-  ExternalProps<unknown, Action<unknown>>
+  ExternalProps<unknown, Action<string>>
 > & {
   update(
-    monitorProps: ExternalProps<unknown, Action<unknown>>,
+    monitorProps: ExternalProps<unknown, Action<string>>,
     state: LogMonitorState | undefined,
     action: LogMonitorAction,
   ): LogMonitorState;

packages/redux-devtools-log-monitor/src/LogMonitorButtonBar.tsx

@@ -20,7 +20,7 @@ const style: CSSProperties = {
   flexDirection: 'row',
 };
 
-interface Props<S, A extends Action<unknown>> {
+interface Props<S, A extends Action<string>> {
   theme: Base16Theme;
   dispatch: Dispatch<LogMonitorAction | LiftedAction<S, A, LogMonitorState>>;
   hasStates: boolean;
@@ -29,7 +29,7 @@ interface Props<S, A extends Action<unknown>> {
 
 export default class LogMonitorButtonBar<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
 > extends PureComponent<Props<S, A>> {
   static propTypes = {
     dispatch: PropTypes.func,

packages/redux-devtools-log-monitor/src/LogMonitorEntry.tsx

@@ -29,7 +29,7 @@ const dataIsEqual = (
   return getDeepItem(data, path) === getDeepItem(previousData, path);
 };
 
-interface Props<S, A extends Action<unknown>> {
+interface Props<S, A extends Action<string>> {
   theme: Base16Theme;
   select: (state: any) => unknown;
   action: A;
@@ -49,7 +49,7 @@ interface Props<S, A extends Action<unknown>> {
 
 export default class LogMonitorEntry<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
 > extends PureComponent<Props<S, A>> {
   static propTypes = {
     state: PropTypes.object.isRequired,

packages/redux-devtools-log-monitor/src/LogMonitorEntryAction.tsx

@@ -17,7 +17,7 @@ const styles = {
   },
 };
 
-interface Props<A extends Action<unknown>> {
+interface Props<A extends Action<string>> {
   theme: Base16Theme;
   collapsed: boolean;
   action: A;
@@ -27,7 +27,7 @@ interface Props<A extends Action<unknown>> {
 }
 
 export default class LogMonitorAction<
-  A extends Action<unknown>,
+  A extends Action<string>,
 > extends Component<Props<A>> {
   renderPayload(payload: Record<string, unknown>) {
     return (
@@ -71,7 +71,7 @@ export default class LogMonitorAction<
         }}
       >
         <div style={styles.actionBar} onClick={this.props.onClick}>
-          {type !== null && (type as string).toString()}
+          {type !== null && type.toString()}
         </div>
         {!this.props.collapsed ? this.renderPayload(payload) : ''}
       </div>

packages/redux-devtools-log-monitor/src/LogMonitorEntryList.tsx

@@ -5,7 +5,7 @@ import { PerformAction } from '@redux-devtools/core';
 import { Base16Theme } from 'redux-devtools-themes';
 import LogMonitorEntry from './LogMonitorEntry';
 
-interface Props<S, A extends Action<unknown>> {
+interface Props<S, A extends Action<string>> {
   actionsById: { [actionId: number]: PerformAction<A> };
   computedStates: { state: S; error?: string }[];
   stagedActionIds: number[];
@@ -24,7 +24,7 @@ interface Props<S, A extends Action<unknown>> {
 
 export default class LogMonitorEntryList<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
 > extends PureComponent<Props<S, A>> {
   static propTypes = {
     actionsById: PropTypes.object,

packages/redux-devtools-log-monitor/src/reducers.ts

@@ -6,7 +6,7 @@ import {
 } from './actions';
 import { LogMonitorProps } from './LogMonitor';
 
-function initialScrollTop<S, A extends Action<unknown>>(
+function initialScrollTop<S, A extends Action<string>>(
   props: LogMonitorProps<S, A>,
   state = 0,
   action: LogMonitorAction,
@@ -18,7 +18,7 @@ function initialScrollTop<S, A extends Action<unknown>>(
   return action.type === UPDATE_SCROLL_TOP ? action.scrollTop : state;
 }
 
-function startConsecutiveToggle<S, A extends Action<unknown>>(
+function startConsecutiveToggle<S, A extends Action<string>>(
   props: LogMonitorProps<S, A>,
   state: number | null | undefined,
   action: LogMonitorAction,
@@ -31,7 +31,7 @@ export interface LogMonitorState {
   consecutiveToggleStartId: number | null | undefined;
 }
 
-export default function reducer<S, A extends Action<unknown>>(
+export default function reducer<S, A extends Action<string>>(
   props: LogMonitorProps<S, A>,
   state: Partial<LogMonitorState> = {},
   action: LogMonitorAction,

packages/redux-devtools-remote/src/configureStore.ts

@@ -3,9 +3,9 @@ import { Action, Reducer, StoreEnhancerStoreCreator } from 'redux';
 
 export default function configureStore<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
   MonitorState,
-  MonitorAction extends Action<unknown>,
+  MonitorAction extends Action<string>,
 >(
   // eslint-disable-next-line @typescript-eslint/ban-types
   next: StoreEnhancerStoreCreator<{}, unknown>,

packages/redux-devtools-remote/src/devTools.ts

@@ -74,7 +74,7 @@ interface Filters {
   readonly allowlist?: string | readonly string[];
 }
 
-interface Options<S, A extends Action<unknown>> {
+interface Options<S, A extends Action<string>> {
   readonly hostname?: string;
   readonly realtime?: boolean;
   readonly maxAge?: number;
@@ -106,11 +106,11 @@ interface Options<S, A extends Action<unknown>> {
   readonly sendTo?: string;
   readonly id?: string;
   readonly actionCreators?: {
-    [key: string]: ActionCreator<Action<unknown>>;
+    [key: string]: ActionCreator<Action<string>>;
   };
   readonly stateSanitizer?: ((state: S, index?: number) => S) | undefined;
   readonly actionSanitizer?:
-    | (<A extends Action<unknown>>(action: A, id?: number) => A)
+    | (<A extends Action<string>>(action: A, id?: number) => A)
     | undefined;
 }
 
@@ -158,13 +158,13 @@ interface ActionMessage {
   readonly action: string | { args: string[]; rest: string; selected: number };
 }
 
-interface DispatchMessage<S, A extends Action<unknown>> {
+interface DispatchMessage<S, A extends Action<string>> {
   readonly type: 'DISPATCH';
   // eslint-disable-next-line @typescript-eslint/ban-types
   readonly action: LiftedAction<S, A, {}>;
 }
 
-type Message<S, A extends Action<unknown>> =
+type Message<S, A extends Action<string>> =
   | ImportMessage
   | SyncMessage
   | UpdateMessage
@@ -174,7 +174,7 @@ type Message<S, A extends Action<unknown>> =
   | ActionMessage
   | DispatchMessage<S, A>;
 
-class DevToolsEnhancer<S, A extends Action<unknown>> {
+class DevToolsEnhancer<S, A extends Action<string>> {
   // eslint-disable-next-line @typescript-eslint/ban-types
   store!: EnhancedStore<S, A, {}>;
   filters: LocalFilter | undefined;
@@ -260,7 +260,7 @@ class DevToolsEnhancer<S, A extends Action<unknown>> {
                   index?: number,
                 ) => unknown,
                 this.actionSanitizer as
-                  | ((action: Action<unknown>, id: number) => Action)
+                  | ((action: Action<string>, id: number) => Action)
                   | undefined,
                 nextActionId!,
               ),
@@ -492,25 +492,19 @@ class DevToolsEnhancer<S, A extends Action<unknown>> {
       if (
         this.startOn &&
         !this.started &&
-        this.startOn.indexOf(
+        this.startOn.indexOf((action as PerformAction<A>).action.type) !== -1
-          (action as PerformAction<A>).action.type as string,
-        ) !== -1
       )
         async(this.start);
       else if (
         this.stopOn &&
         this.started &&
-        this.stopOn.indexOf(
+        this.stopOn.indexOf((action as PerformAction<A>).action.type) !== -1
-          (action as PerformAction<A>).action.type as string,
-        ) !== -1
       )
         async(this.stop);
       else if (
         this.sendOn &&
         !this.started &&
-        this.sendOn.indexOf(
+        this.sendOn.indexOf((action as PerformAction<A>).action.type) !== -1
-          (action as PerformAction<A>).action.type as string,
-        ) !== -1
       )
         async(this.send);
     }
@@ -584,24 +578,24 @@ class DevToolsEnhancer<S, A extends Action<unknown>> {
   };
 }
 
-export default <S, A extends Action<unknown>>(options?: Options<S, A>) =>
+export default <S, A extends Action<string>>(options?: Options<S, A>) =>
   new DevToolsEnhancer<S, A>().enhance(options);
 
 const compose =
-  (options: Options<unknown, Action<unknown>>) =>
+  (options: Options<unknown, Action<string>>) =>
   (...funcs: StoreEnhancer[]) =>
   (...args: unknown[]) => {
     const devToolsEnhancer = new DevToolsEnhancer();
 
     function preEnhancer(createStore: StoreEnhancerStoreCreator) {
-      return <S, A extends Action<unknown>>(
+      return <S, A extends Action<string>>(
         reducer: Reducer<S, A>,
         preloadedState: PreloadedState<S>,
       ) => {
         devToolsEnhancer.store = createStore(reducer, preloadedState) as any;
         return {
           ...devToolsEnhancer.store,
-          dispatch: (action: Action<unknown>) =>
+          dispatch: (action: Action<string>) =>
             devToolsEnhancer.locked
               ? action
               : devToolsEnhancer.store.dispatch(action),
@@ -618,7 +612,7 @@ const compose =
   };
 
 export function composeWithDevTools(
-  ...funcs: [Options<unknown, Action<unknown>>] | StoreEnhancer[]
+  ...funcs: [Options<unknown, Action<string>>] | StoreEnhancer[]
 ) {
   if (funcs.length === 0) {
     return new DevToolsEnhancer().enhance();

packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryInspector.tsx

@@ -19,12 +19,12 @@ import { QueryList } from '../components/QueryList';
 import { QueryForm } from '../components/QueryForm';
 import { QueryPreview } from './QueryPreview';
 
-type ForwardedMonitorProps<S, A extends Action<unknown>> = Pick<
+type ForwardedMonitorProps<S, A extends Action<string>> = Pick<
   LiftedState<S, A, RtkQueryMonitorState>,
   'monitorState' | 'currentStateIndex' | 'computedStates' | 'actionsById'
 >;
 
-export interface RtkQueryInspectorProps<S, A extends Action<unknown>>
+export interface RtkQueryInspectorProps<S, A extends Action<string>>
   extends ForwardedMonitorProps<S, A> {
   dispatch: Dispatch<LiftedAction<S, A, RtkQueryMonitorState>>;
   styleUtils: StyleUtils;
@@ -35,7 +35,7 @@ type RtkQueryInspectorState<S> = {
   isWideLayout: boolean;
 };
 
-class RtkQueryInspector<S, A extends Action<unknown>> extends PureComponent<
+class RtkQueryInspector<S, A extends Action<string>> extends PureComponent<
   RtkQueryInspectorProps<S, A>,
   RtkQueryInspectorState<S>
 > {
@@ -55,10 +55,10 @@ class RtkQueryInspector<S, A extends Action<unknown>> extends PureComponent<
   static wideLayout = 600;
 
   static getDerivedStateFromProps(
-    props: RtkQueryInspectorProps<unknown, Action<unknown>>,
+    props: RtkQueryInspectorProps<unknown, Action<string>>,
     state: RtkQueryInspectorState<unknown>,
   ): null | Partial<RtkQueryInspectorState<unknown>> {
-    const selectorsSource = computeSelectorSource<unknown, Action<unknown>>(
+    const selectorsSource = computeSelectorSource<unknown, Action<string>>(
       props,
       state.selectorsSource,
     );

packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryMonitor.tsx

@@ -23,7 +23,7 @@ export interface RtkQueryComponentState {
   readonly styleUtils: StyleUtils;
 }
 
-class RtkQueryMonitor<S, A extends Action<unknown>> extends Component<
+class RtkQueryMonitor<S, A extends Action<string>> extends Component<
   RtkQueryMonitorProps<S, A>,
   RtkQueryComponentState
 > {
@@ -79,10 +79,10 @@ class RtkQueryMonitor<S, A extends Action<unknown>> extends Component<
 }
 
 export default RtkQueryMonitor as unknown as React.ComponentType<
-  ExternalProps<unknown, Action<unknown>>
+  ExternalProps<unknown, Action<string>>
 > & {
   update(
-    monitorProps: ExternalProps<unknown, Action<unknown>>,
+    monitorProps: ExternalProps<unknown, Action<string>>,
     state: RtkQueryMonitorState | undefined,
     action: Action,
   ): RtkQueryMonitorState;

packages/redux-devtools-rtk-query-monitor/src/reducers.ts

@@ -53,7 +53,7 @@ const monitorSlice = createSlice({
   },
 });
 
-export function reducer<S, A extends Action<unknown>>(
+export function reducer<S, A extends Action<string>>(
   props: RtkQueryMonitorProps<S, A>,
   state: RtkQueryMonitorState | undefined,
   action: AnyAction,

packages/redux-devtools-rtk-query-monitor/src/selectors.ts

@@ -26,7 +26,7 @@ import {
 
 type InspectorSelector<S, Output> = Selector<SelectorsSource<S>, Output>;
 
-export function computeSelectorSource<S, A extends Action<unknown>>(
+export function computeSelectorSource<S, A extends Action<string>>(
   props: RtkQueryInspectorProps<S, A>,
   previous: SelectorsSource<S> | null = null,
 ): SelectorsSource<S> {

packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts

@@ -526,7 +526,7 @@ export const createStylingFromTheme: CurriedFunction1<
   base16Themes: { ...reduxThemes },
 });
 
-export function createThemeState<S, A extends Action<unknown>>(
+export function createThemeState<S, A extends Action<string>>(
   props: RtkQueryMonitorProps<S, A>,
 ): StyleUtils {
   const base16Theme =

packages/redux-devtools-rtk-query-monitor/src/types.ts

@@ -31,7 +31,7 @@ export interface RtkQueryMonitorState {
   readonly selectedPreviewTab: QueryPreviewTabs;
 }
 
-export interface RtkQueryMonitorProps<S, A extends Action<unknown>>
+export interface RtkQueryMonitorProps<S, A extends Action<string>>
   extends LiftedState<S, A, RtkQueryMonitorState> {
   dispatch: Dispatch<Action | LiftedAction<S, A, RtkQueryMonitorState>>;
   theme: keyof typeof themes | Base16Theme;
@@ -54,7 +54,7 @@ export type RtkQueryApiConfig = RtkQueryApiState['config'];
 
 export type RtkQueryProvided = RtkQueryApiState['provided'];
 
-export interface ExternalProps<S, A extends Action<unknown>> {
+export interface ExternalProps<S, A extends Action<string>> {
   dispatch: Dispatch<Action | LiftedAction<S, A, RtkQueryMonitorState>>;
   theme: keyof typeof themes | Base16Theme;
   hideMainButtons?: boolean;

packages/redux-devtools-slider-monitor/src/SliderMonitor.tsx

@@ -22,7 +22,7 @@ import SliderButton from './SliderButton';
 // eslint-disable-next-line @typescript-eslint/unbound-method
 const { reset, jumpToAction } = ActionCreators;
 
-interface ExternalProps<S, A extends Action<unknown>> {
+interface ExternalProps<S, A extends Action<string>> {
   // eslint-disable-next-line @typescript-eslint/ban-types
   dispatch: Dispatch<LiftedAction<S, A, {}>>;
   preserveScrollTop: boolean;
@@ -39,7 +39,7 @@ interface DefaultProps {
   keyboardEnabled: boolean;
 }
 
-interface SliderMonitorProps<S, A extends Action<unknown>> // eslint-disable-next-line @typescript-eslint/ban-types
+interface SliderMonitorProps<S, A extends Action<string>> // eslint-disable-next-line @typescript-eslint/ban-types
   extends LiftedState<S, A, {}> {
   // eslint-disable-next-line @typescript-eslint/ban-types
   dispatch: Dispatch<LiftedAction<S, A, {}>>;
@@ -55,7 +55,7 @@ interface State {
   replaySpeed: string;
 }
 
-class SliderMonitor<S, A extends Action<unknown>> extends (PureComponent ||
+class SliderMonitor<S, A extends Action<string>> extends (PureComponent ||
   Component)<SliderMonitorProps<S, A>, State> {
   static update = reducer;
 
@@ -333,7 +333,7 @@ class SliderMonitor<S, A extends Action<unknown>> extends (PureComponent ||
     let actionType = actionsById[actionId].action.type;
     if (actionType === undefined) actionType = '<UNDEFINED>';
     else if (actionType === null) actionType = '<NULL>';
-    else actionType = (actionType as string).toString() || '<EMPTY>';
+    else actionType = actionType.toString() || '<EMPTY>';
 
     const onPlayClick =
       replaySpeed === 'Live' ? this.startRealtimeReplay : this.startReplay;
@@ -352,7 +352,7 @@ class SliderMonitor<S, A extends Action<unknown>> extends (PureComponent ||
       <Toolbar noBorder compact fullHeight theme={theme}>
         {playPause}
         <Slider
-          label={actionType as string}
+          label={actionType}
           sublabel={`(${actionId})`}
           min={0}
           max={max}
@@ -391,13 +391,13 @@ class SliderMonitor<S, A extends Action<unknown>> extends (PureComponent ||
 }
 
 export default SliderMonitor as unknown as React.ComponentType<
-  ExternalProps<unknown, Action<unknown>>
+  ExternalProps<unknown, Action<string>>
 > & {
   update(
-    monitorProps: ExternalProps<unknown, Action<unknown>>,
+    monitorProps: ExternalProps<unknown, Action<string>>,
     // eslint-disable-next-line @typescript-eslint/ban-types
     state: {} | undefined,
-    action: Action<unknown>,
+    action: Action<string>,
     // eslint-disable-next-line @typescript-eslint/ban-types
   ): {};
   defaultProps: DefaultProps;

packages/redux-devtools-utils/src/filters.ts

@@ -3,7 +3,7 @@ import { PerformAction } from '@redux-devtools/core';
 import { Action } from 'redux';
 
 export interface State {
-  actionsById: { [actionId: number]: PerformAction<Action<unknown>> };
+  actionsById: { [actionId: number]: PerformAction<Action<string>> };
   computedStates: { state: unknown; error?: string }[];
   stagedActionIds: number[];
 }
@@ -19,10 +19,8 @@ export function arrToRegex(v: string | string[]) {
 }
 
 function filterActions(
-  actionsById: { [actionId: number]: PerformAction<Action<unknown>> },
+  actionsById: { [actionId: number]: PerformAction<Action<string>> },
-  actionSanitizer:
+  actionSanitizer: ((action: Action<string>, id: number) => Action) | undefined,
-    | ((action: Action<unknown>, id: number) => Action)
-    | undefined,
 ) {
   if (!actionSanitizer) return actionsById;
   return mapValues(actionsById, (action, id: number) => ({
@@ -93,25 +91,25 @@ function getDevToolsOptions() {
 }
 
 export function isFiltered(
-  action: PerformAction<Action<unknown>> | Action<unknown>,
+  action: PerformAction<Action<string>> | Action<string>,
   localFilter?: LocalFilter,
 ) {
-  const { type } = (action as PerformAction<Action<unknown>>).action || action;
+  const { type } = (action as PerformAction<Action<string>>).action || action;
   const opts = getDevToolsOptions();
   if (
     (!localFilter &&
       opts.filter &&
       opts.filter === FilterState.DO_NOT_FILTER) ||
-    (type && typeof (type as string).match !== 'function')
+    (type && typeof type.match !== 'function')
   )
     return false;
 
   const { allowlist, denylist } = localFilter || opts;
   return (
     // eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
-    (allowlist && !(type as string).match(allowlist)) ||
+    (allowlist && !type.match(allowlist)) ||
     // eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
-    (denylist && (type as string).match(denylist))
+    (denylist && type.match(denylist))
   );
 }
 
@@ -146,11 +144,9 @@ export function filterState(
   type: string,
   localFilter: LocalFilter | undefined,
   stateSanitizer: ((state: unknown, actionId: number) => unknown) | undefined,
-  actionSanitizer:
+  actionSanitizer: ((action: Action<string>, id: number) => Action) | undefined,
-    | ((action: Action<unknown>, id: number) => Action)
-    | undefined,
   nextActionId: number,
-  predicate?: (currState: unknown, currAction: Action<unknown>) => boolean,
+  predicate?: (currState: unknown, currAction: Action<string>) => boolean,
 ) {
   if (type === 'ACTION')
     return !stateSanitizer ? state : stateSanitizer(state, nextActionId - 1);
@@ -169,7 +165,7 @@ export function filterState(
     }[] = [];
     const sanitizedActionsById:
       | {
-          [id: number]: PerformAction<Action<unknown>>;
+          [id: number]: PerformAction<Action<string>>;
         }
       | undefined = actionSanitizer && {};
     const { actionsById } = state;

packages/redux-devtools-utils/src/importState.ts

@@ -5,7 +5,7 @@ import Immutable from 'immutable';
 import { PerformAction } from '@redux-devtools/core';
 
 interface State {
-  actionsById: { [actionId: number]: PerformAction<Action<unknown>> };
+  actionsById: { [actionId: number]: PerformAction<Action<string>> };
   computedStates: { state: unknown; error?: string }[];
   committedState?: unknown;
 }

packages/redux-devtools-utils/src/index.ts

@@ -11,13 +11,13 @@ export function generateId(id: string | undefined) {
 
 export interface ActionCreatorObject {
   readonly name: string;
-  readonly func: ActionCreator<Action<unknown>>;
+  readonly func: ActionCreator<Action<string>>;
   readonly args: readonly string[];
 }
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 function flatTree(
-  obj: { [key: string]: ActionCreator<Action<unknown>> },
+  obj: { [key: string]: ActionCreator<Action<string>> },
   namespace = '',
 ) {
   let functions: ActionCreatorObject[] = [];
@@ -65,7 +65,7 @@ export function getMethods(obj: unknown) {
 }
 
 export function getActionsArray(actionCreators: {
-  [key: string]: ActionCreator<Action<unknown>>;
+  [key: string]: ActionCreator<Action<string>>;
 }) {
   if (Array.isArray(actionCreators)) return actionCreators;
   return flatTree(actionCreators);

packages/redux-devtools/src/createDevTools.tsx

@@ -28,19 +28,19 @@ function logError(type: string) {
 
 export interface Props<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
   MonitorState,
-  MonitorAction extends Action<unknown>,
+  MonitorAction extends Action<string>,
 > {
   store?: EnhancedStore<S, A, MonitorState>;
 }
 
 export type Monitor<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
   MonitorProps extends LiftedState<S, A, MonitorState>,
   MonitorState,
-  MonitorAction extends Action<unknown>,
+  MonitorAction extends Action<string>,
 > = React.ReactElement<
   MonitorProps,
   React.ComponentType<MonitorProps & LiftedState<S, A, MonitorState>> & {
@@ -54,10 +54,10 @@ export type Monitor<
 
 export default function createDevTools<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
   MonitorProps extends LiftedState<S, A, MonitorState>,
   MonitorState,
-  MonitorAction extends Action<unknown>,
+  MonitorAction extends Action<string>,
 >(children: Monitor<S, A, MonitorProps, MonitorState, MonitorAction>) {
   const monitorElement = Children.only(children);
   const monitorProps = monitorElement.props;

packages/redux-devtools/src/persistState.ts

@@ -3,11 +3,7 @@ import identity from 'lodash/identity';
 import { Action, PreloadedState, Reducer, StoreEnhancer } from 'redux';
 import { LiftedState } from '@redux-devtools/instrument';
 
-export default function persistState<
+export default function persistState<S, A extends Action<string>, MonitorState>(
-  S,
-  A extends Action<unknown>,
-  MonitorState,
->(
   sessionId?: string | null,
   deserializeState: (state: S) => S = identity,
   deserializeAction: (action: A) => A = identity,
@@ -36,7 +32,7 @@ export default function persistState<
   }
 
   return (next) =>
-    <S2, A2 extends Action<unknown>>(
+    <S2, A2 extends Action<string>>(
       reducer: Reducer<S2, A2>,
       initialState?: PreloadedState<S2>,
     ) => {