From 1b29f90cf260309ce170c52c04acc2a85654fb4f Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 5 Aug 2024 21:06:31 -0400 Subject: [PATCH] Fix redux-devtools-app build --- .../src/middlewares/exportState.ts | 81 ++++++++++--------- .../redux-devtools-app/src/middlewares/api.ts | 15 ++-- .../redux-devtools-app/src/reducers/index.ts | 4 +- .../src/store/configureStore.ts | 4 +- 4 files changed, 54 insertions(+), 50 deletions(-) diff --git a/packages/redux-devtools-app-core/src/middlewares/exportState.ts b/packages/redux-devtools-app-core/src/middlewares/exportState.ts index 775c34d0..9f8cbc27 100644 --- a/packages/redux-devtools-app-core/src/middlewares/exportState.ts +++ b/packages/redux-devtools-app-core/src/middlewares/exportState.ts @@ -1,7 +1,7 @@ import { stringifyJSON } from '../utils/stringifyJSON'; import { UPDATE_STATE, LIFTED_ACTION, EXPORT } from '../constants/actionTypes'; import { getActiveInstance } from '../reducers/instances'; -import { Dispatch, MiddlewareAPI } from 'redux'; +import { Dispatch, Middleware } from 'redux'; import { CoreStoreAction } from '../actions'; import { CoreStoreState } from '../reducers'; @@ -22,44 +22,45 @@ function download(state: string) { }, 0); } -export const exportStateMiddleware = - (store: MiddlewareAPI, CoreStoreState>) => - (next: Dispatch) => - (action: CoreStoreAction) => { - const result = next(action); +export const exportStateMiddleware: Middleware< + // eslint-disable-next-line @typescript-eslint/no-empty-object-type + {}, + CoreStoreState, + Dispatch +> = (store) => (next) => (untypedAction) => { + const result = next(untypedAction); - if ( - toExport && - action.type === UPDATE_STATE && - action.request!.type === 'EXPORT' - ) { - const request = action.request!; - const id = request.instanceId || request.id; - if (id === toExport) { - toExport = undefined; - download( - JSON.stringify( - { - payload: request.payload, - preloadedState: request.committedState, - }, - null, - '\t', - ), - ); - } - } else if (action.type === EXPORT) { - const instances = store.getState().instances; - const instanceId = getActiveInstance(instances); - const options = instances.options[instanceId]; - if (options.features.export === true) { - download( - stringifyJSON(instances.states[instanceId], options.serialize), - ); - } else { - toExport = instanceId; - next({ type: LIFTED_ACTION, message: 'EXPORT', toExport: true }); - } + const action = untypedAction as CoreStoreAction; + if ( + toExport && + action.type === UPDATE_STATE && + action.request!.type === 'EXPORT' + ) { + const request = action.request!; + const id = request.instanceId || request.id; + if (id === toExport) { + toExport = undefined; + download( + JSON.stringify( + { + payload: request.payload, + preloadedState: request.committedState, + }, + null, + '\t', + ), + ); } - return result; - }; + } else if (action.type === EXPORT) { + const instances = store.getState().instances; + const instanceId = getActiveInstance(instances); + const options = instances.options[instanceId]; + if (options.features.export === true) { + download(stringifyJSON(instances.states[instanceId], options.serialize)); + } else { + toExport = instanceId; + next({ type: LIFTED_ACTION, message: 'EXPORT', toExport: true }); + } + } + return result; +}; diff --git a/packages/redux-devtools-app/src/middlewares/api.ts b/packages/redux-devtools-app/src/middlewares/api.ts index 8a4582a7..a4a74876 100644 --- a/packages/redux-devtools-app/src/middlewares/api.ts +++ b/packages/redux-devtools-app/src/middlewares/api.ts @@ -17,7 +17,7 @@ import { } from '@redux-devtools/app-core'; import socketClusterClient, { AGClientSocket } from 'socketcluster-client'; import { stringify } from 'jsan'; -import { Dispatch, MiddlewareAPI } from 'redux'; +import { Dispatch, Middleware, MiddlewareAPI } from 'redux'; import * as actions from '../constants/socketActionTypes'; import { nonReduxDispatch } from '../utils/monitorActions'; import { EmitAction, StoreAction } from '../actions'; @@ -266,10 +266,15 @@ function getReport(reportId: unknown) { })(); } -export function api(inStore: MiddlewareAPI, StoreState>) { +// eslint-disable-next-line @typescript-eslint/no-empty-object-type +export const api: Middleware<{}, StoreState, Dispatch> = ( + inStore, +) => { store = inStore; - return (next: Dispatch) => (action: StoreAction) => { - const result = next(action); + return (next) => (untypedAction) => { + const result = next(untypedAction); + + const action = untypedAction as StoreAction; switch (action.type) { case actions.CONNECT_REQUEST: connect(); @@ -299,4 +304,4 @@ export function api(inStore: MiddlewareAPI, StoreState>) { } return result; }; -} +}; diff --git a/packages/redux-devtools-app/src/reducers/index.ts b/packages/redux-devtools-app/src/reducers/index.ts index df2b2fad..38b4f358 100644 --- a/packages/redux-devtools-app/src/reducers/index.ts +++ b/packages/redux-devtools-app/src/reducers/index.ts @@ -2,15 +2,13 @@ import { CoreStoreState, coreReducers } from '@redux-devtools/app-core'; import { combineReducers } from 'redux'; import { connection, ConnectionState } from './connection'; import { socket, SocketState } from './socket'; -import { StoreAction } from '../actions'; export interface StoreState extends CoreStoreState { readonly connection: ConnectionState; readonly socket: SocketState; } -/// @ts-expect-error An error happens due to TypeScript not being able to reconcile a clash between CoreStoreAction and StoreAction in the core reducers, but this is correct as they're a superset -export const rootReducer = combineReducers({ +export const rootReducer = combineReducers({ ...coreReducers, connection, socket, diff --git a/packages/redux-devtools-app/src/store/configureStore.ts b/packages/redux-devtools-app/src/store/configureStore.ts index e4615ea4..6b3d752c 100644 --- a/packages/redux-devtools-app/src/store/configureStore.ts +++ b/packages/redux-devtools-app/src/store/configureStore.ts @@ -14,7 +14,7 @@ const persistConfig = { const persistedReducer: Reducer = persistReducer( persistConfig, - rootReducer, + rootReducer as unknown as Reducer, ) as any; export default function configureStore( @@ -41,7 +41,7 @@ export default function configureStore( persistedReducer, composeEnhancers(applyMiddleware(...middlewares, api)), ); - const persistor = persistStore(store, null, () => { + const persistor = persistStore(store as Store, null, () => { callback(store); }); return { store, persistor };