Try to avoid creating multiple eventStreams

ui/src/App.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import ReactGA from 'react-ga'
-import { Provider, useDispatch } from 'react-redux'
+import { Provider } from 'react-redux'
 import { createHashHistory } from 'history'
 import { Admin as RAAdmin, Resource } from 'react-admin'
 import { HotKeys } from 'react-hotkeys'
@@ -29,7 +29,7 @@ import {
 import createAdminStore from './store/createAdminStore'
 import { i18nProvider } from './i18n'
 import config from './config'
-import { setDispatch, startEventStream } from './eventStream'
+import { startEventStream } from './eventStream'
 import { keyMap } from './hotkeys'
 import useChangeThemeColor from './useChangeThemeColor'
 
@@ -43,40 +43,38 @@ if (config.gaTrackingId) {
   ReactGA.pageview(window.location.pathname)
 }
 
+const adminStore = createAdminStore({
+  authProvider,
+  dataProvider,
+  history,
+  customReducers: {
+    player: playerReducer,
+    albumView: albumViewReducer,
+    theme: themeReducer,
+    addToPlaylistDialog: addToPlaylistDialogReducer,
+    expandInfoDialog: expandInfoDialogReducer,
+    listenBrainzTokenDialog: listenBrainzTokenDialogReducer,
+    activity: activityReducer,
+    settings: settingsReducer,
+  },
+})
+
 const App = () => (
-  <Provider
+  <Provider store={adminStore}>
-    store={createAdminStore({
-      authProvider,
-      dataProvider,
-      history,
-      customReducers: {
-        player: playerReducer,
-        albumView: albumViewReducer,
-        theme: themeReducer,
-        addToPlaylistDialog: addToPlaylistDialogReducer,
-        expandInfoDialog: expandInfoDialogReducer,
-        listenBrainzTokenDialog: listenBrainzTokenDialogReducer,
-        activity: activityReducer,
-        settings: settingsReducer,
-      },
-    })}
-  >
     <Admin />
   </Provider>
 )
 
 const Admin = (props) => {
   useChangeThemeColor()
-  const dispatch = useDispatch()
   useEffect(() => {
     if (config.devActivityPanel) {
-      setDispatch(dispatch)
       authProvider
         .checkAuth()
-        .then(() => startEventStream())
+        .then(() => startEventStream(adminStore.dispatch))
         .catch(() => {}) // ignore if not logged in
     }
-  }, [dispatch])
+  }, [])
 
   return (
     <RAAdmin

ui/src/eventStream.js

@@ -35,7 +35,7 @@ const setTimeout = (value) => {
       es.close()
     }
     es = null
-    await startEventStream()
+    await startEventStream(dispatch)
   }, currentIntervalCheck)
 }
 
@@ -50,10 +50,6 @@ const stopEventStream = () => {
   timeout = null
 }
 
-const setDispatch = (dispatchFunc) => {
-  dispatch = dispatchFunc
-}
-
 const eventHandler = (event) => {
   const data = JSON.parse(event.data)
   if (event.type !== 'keepAlive') {
@@ -64,7 +60,8 @@ const eventHandler = (event) => {
 
 const throttledEventHandler = throttle(eventHandler, 100, { trailing: true })
 
-const startEventStream = async () => {
+const startEventStream = async (dispatchFunc) => {
+  dispatch = dispatchFunc
   setTimeout(currentIntervalCheck)
   if (!localStorage.getItem('is-authenticated')) {
     console.log('Cannot create a unauthenticated EventSource connection')
@@ -88,4 +85,4 @@ const startEventStream = async () => {
     })
 }
 
-export { setDispatch, startEventStream, stopEventStream }
+export { startEventStream, stopEventStream }