Now using redux to not create sound player every time the phaser is also implicitely cached

front/state/SoundPlayerSlice.ts

@@ -0,0 +1,19 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { SplendidGrandPiano } from 'smplr';
+
+export const soundPlayerSlice = createSlice({
+	name: 'soundPlayer',
+	initialState: {
+		soundPlayer: undefined as SplendidGrandPiano | undefined,
+	},
+	reducers: {
+		setSoundPlayer: (state, action: PayloadAction<SplendidGrandPiano>) => {
+			state.soundPlayer = action.payload;
+		},
+		unsetSoundPlayer: (state) => {
+			state.soundPlayer = undefined;
+		},
+	},
+});
+export const { setSoundPlayer, unsetSoundPlayer } = soundPlayerSlice.actions;
+export default soundPlayerSlice.reducer;

front/state/Store.ts

@@ -1,5 +1,6 @@
 import userReducer from '../state/UserSlice';
-import settingsReduder from './SettingsSlice';
+import settingsReducer from './SettingsSlice';
+import SoundPlayerSliceReducer from './SoundPlayerSlice';
 import { StateFromReducersMapObject, configureStore } from '@reduxjs/toolkit';
 import languageReducer from './LanguageSlice';
 import {
@@ -28,7 +29,8 @@ const persistConfig = {
 const reducers = {
 	user: userReducer,
 	language: languageReducer,
-	settings: settingsReduder,
+	settings: settingsReducer,
+	soundPlayer: SoundPlayerSliceReducer,
 };
 
 type State = StateFromReducersMapObject<typeof reducers>;