diff --git a/packages/webamp/js/reducers/index.ts b/packages/webamp/js/reducers/index.ts index d018c168b3..05780ea023 100644 --- a/packages/webamp/js/reducers/index.ts +++ b/packages/webamp/js/reducers/index.ts @@ -1,5 +1,5 @@ import { AppState, Action } from "../types"; -import { combineReducers } from "redux"; +import { Reducer, combineReducers } from "redux"; import playlist from "./playlist"; import windows from "./windows"; @@ -12,7 +12,7 @@ import settings from "./settings"; import tracks from "./tracks"; import milkdrop from "./milkdrop"; -const reducer = combineReducers({ +const reducer: Reducer = combineReducers({ userInput, windows, display, diff --git a/packages/webamp/js/serialization.test.ts b/packages/webamp/js/serialization.test.ts index af16d104cf..d8e8d2d6c2 100644 --- a/packages/webamp/js/serialization.test.ts +++ b/packages/webamp/js/serialization.test.ts @@ -5,7 +5,7 @@ import * as Selectors from "./selectors"; import * as Actions from "./actionCreators"; import { kebabCase } from "lodash"; -import { createStore, applyMiddleware } from "redux"; +import { legacy_createStore as createStore, applyMiddleware } from "redux"; import thunk from "redux-thunk"; import { LOAD_SERIALIZED_STATE } from "./actionTypes"; import { SerializedStateV1 } from "./serializedStates/v1Types"; @@ -83,7 +83,7 @@ function testSerialization({ function getStore() { const extras = {}; const enhancer = applyMiddleware(thunk.withExtraArgument(extras)); - return createStore(reducer, enhancer); + return createStore(reducer, undefined, enhancer); } describe("can serialize", () => { diff --git a/packages/webamp/js/store.ts b/packages/webamp/js/store.ts index c3eaed9847..c25e0453c9 100644 --- a/packages/webamp/js/store.ts +++ b/packages/webamp/js/store.ts @@ -1,4 +1,8 @@ -import { createStore, applyMiddleware } from "redux"; +import { + legacy_createStore as createStore, + applyMiddleware, + Middleware as ReduxMiddleware, +} from "redux"; import thunk from "redux-thunk"; import { composeWithDevTools } from "redux-devtools-extension"; import reducer from "./reducers"; @@ -7,20 +11,27 @@ import { merge } from "./utils"; import { UPDATE_TIME_ELAPSED, STEP_MARQUEE } from "./actionTypes"; import Media from "./media"; import Emitter from "./emitter"; -import { Extras, Dispatch, Action, Middleware, PartialState } from "./types"; +import { + Extras, + Dispatch, + Action, + PartialState, + Middleware, + Store, +} from "./types"; // TODO: Move to demo const compose = composeWithDevTools({ actionsBlacklist: [UPDATE_TIME_ELAPSED, STEP_MARQUEE], }); -export default function ( +export default function createWebampStore( media: Media, actionEmitter: Emitter, customMiddlewares: Middleware[] = [], stateOverrides: PartialState | undefined, extras: Extras -) { +): Store { let initialState; if (stateOverrides) { initialState = merge( @@ -34,21 +45,17 @@ export default function ( return next(action); }; - const enhancer = compose( - applyMiddleware( - ...[ - thunk.withExtraArgument(extras), - mediaMiddleware(media), - emitterMiddleware, - ...customMiddlewares, - ].filter(Boolean) - ) - ); + const middlewares: Middleware[] = [ + thunk.withExtraArgument(extras), + mediaMiddleware(media), + emitterMiddleware, + ...customMiddlewares, + ]; - // The Redux types are a bit confused, and don't realize that passing an - // undefined initialState is allowed. - const store = initialState - ? createStore(reducer, initialState, enhancer) - : createStore(reducer, enhancer); - return store; + // @ts-expect-error Typing of these is too hard to get right, so we cheat + const coercedMiddlewares: ReduxMiddleware[] = middlewares; + + const enhancer = compose(applyMiddleware(...coercedMiddlewares)); + + return createStore(reducer, initialState, enhancer); }