diff --git a/packages/redux-devtools-instrument/src/getSymbolObservable.ts b/packages/redux-devtools-instrument/src/getSymbolObservable.ts new file mode 100644 index 0000000000..d50609a0fb --- /dev/null +++ b/packages/redux-devtools-instrument/src/getSymbolObservable.ts @@ -0,0 +1,3 @@ +export default function getSymbolObservable() { + return (typeof Symbol === 'function' && Symbol.observable) || '@@observable'; +} diff --git a/packages/redux-devtools-instrument/src/instrument.ts b/packages/redux-devtools-instrument/src/instrument.ts index 11f04366a1..457d9ab3d1 100644 --- a/packages/redux-devtools-instrument/src/instrument.ts +++ b/packages/redux-devtools-instrument/src/instrument.ts @@ -1,16 +1,16 @@ import difference from 'lodash/difference'; import union from 'lodash/union'; import isPlainObject from 'lodash/isPlainObject'; -import $$observable from './symbol-observable'; import { Action, - Observable, + Observer, PreloadedState, Reducer, Store, StoreEnhancer, StoreEnhancerStoreCreator, } from 'redux'; +import getSymbolObservable from './getSymbolObservable'; export const ActionTypes = { PERFORM_ACTION: 'PERFORM_ACTION', @@ -903,13 +903,21 @@ export function unliftStore< return action; } - return { - ...liftedStore, + const $$observable = getSymbolObservable(); + if (!($$observable in liftedStore)) { + console.warn( + 'Symbol.observable as defined by Redux and Redux DevTools do not match. This could cause your app to behave differently if the DevTools are not loaded. Consider polyfilling Symbol.observable before Redux is imported or avoid polyfilling Symbol.observable altogether.' + ); + } + return { liftedStore, dispatch, + // eslint-disable-next-line @typescript-eslint/unbound-method + subscribe: liftedStore.subscribe, + getState, replaceReducer(nextReducer: Reducer) { @@ -923,10 +931,9 @@ export function unliftStore< ); }, - [$$observable](): Observable { + [$$observable]() { return { - ...(liftedStore as any)[$$observable](), - subscribe(observer) { + subscribe(observer: Observer) { if (typeof observer !== 'object') { throw new TypeError('Expected the observer to be an object.'); } diff --git a/packages/redux-devtools-instrument/src/symbol-observable.ts b/packages/redux-devtools-instrument/src/symbol-observable.ts deleted file mode 100644 index b98c715eb5..0000000000 --- a/packages/redux-devtools-instrument/src/symbol-observable.ts +++ /dev/null @@ -1,10 +0,0 @@ -declare global { - interface SymbolConstructor { - readonly observable: symbol; - } -} - -const $$observable = /* #__PURE__ */ (() => - (typeof Symbol === 'function' && Symbol.observable) || '@@observable')(); - -export default $$observable;