Add RTK listenerMiddleware

packages/mobile/package.json

@@ -69,7 +69,7 @@
     "@react-navigation/native": "6.0.8",
     "@react-navigation/native-stack": "6.6.1",
     "@react-navigation/stack": "6.2.0",
-    "@reduxjs/toolkit": "1.6.1",
+    "@reduxjs/toolkit": "1.9.2",
     "@sayem314/react-native-keep-awake": "1.1.0",
     "@sentry/react-native": "3.2.8",
     "@snapchat/snap-kit-react-native": "0.4.0",

packages/mobile/src/store/listenerMiddleware.ts

@@ -0,0 +1,13 @@
+import type { TypedStartListening } from '@reduxjs/toolkit'
+import { createListenerMiddleware } from '@reduxjs/toolkit'
+
+import type { AppState } from './store'
+import { addListeners as addThemeListeners } from './theme/listeners'
+
+export const listenerMiddleware = createListenerMiddleware()
+
+export type AppStartListening = TypedStartListening<AppState>
+
+const startListening = listenerMiddleware.startListening as AppStartListening
+
+addThemeListeners(startListening)

packages/mobile/src/store/sagas.ts

@@ -66,7 +66,6 @@ import rateCtaSagas from './rate-cta/sagas'
 import settingsSagas from './settings/sagas'
 import signOutSagas from './sign-out/sagas'
 import signUpSagas from './sign-up/sagas'
-import themeSagas from './theme/sagas'
 import walletsSagas from './wallet-connect/sagas'
 
 export default function* rootSaga() {
@@ -148,7 +147,6 @@ export default function* rootSaga() {
     ...deletePlaylistConfirmationModalSagas(),
     ...shareModalSagas(),
     ...vipDiscordModalSagas(),
-    ...themeSagas(),
     ...tokenDashboardSagas(),
     ...mobileUiSagas(),
     ...uploadSagas(),

packages/mobile/src/store/store.ts

@@ -31,6 +31,7 @@ import type { DrawersState } from './drawers/slice'
 import drawers from './drawers/slice'
 import type { KeyboardState } from './keyboard/slice'
 import keyboard from './keyboard/slice'
+import { listenerMiddleware } from './listenerMiddleware'
 import mobileUi from './mobileUi/slice'
 import type { MobileUiState } from './mobileUi/slice'
 import type { OAuthState } from './oauth/reducer'
@@ -137,7 +138,7 @@ const sagaMiddleware = createSagaMiddleware({
   onError: onSagaError
 })
 
-const middlewares = [sagaMiddleware]
+const middlewares = [sagaMiddleware, listenerMiddleware.middleware]
 
 if (__DEV__) {
   const createDebugger = require('redux-flipper').default

packages/mobile/src/store/theme/listeners.ts

@@ -0,0 +1,31 @@
+import { themeSelectors, themeActions } from '@audius/common'
+
+import { THEME_STORAGE_KEY } from 'app/constants/storage-keys'
+import { localStorage } from 'app/services/local-storage'
+import { updateStatusBarTheme } from 'app/utils/theme'
+
+import type { AppStartListening } from '../listenerMiddleware'
+const { setTheme, setSystemAppearance } = themeActions
+const { getSystemAppearance, getTheme } = themeSelectors
+
+export const addListeners = (startListening: AppStartListening) => {
+  startListening({
+    actionCreator: setTheme,
+    effect: async function setThemeEffect(action, listenerApi) {
+      const systemAppearance = getSystemAppearance(listenerApi.getState())
+      const { theme } = action.payload
+      updateStatusBarTheme(theme, systemAppearance)
+
+      await localStorage.setItem(THEME_STORAGE_KEY, theme)
+    }
+  })
+
+  startListening({
+    actionCreator: setSystemAppearance,
+    effect: async function setSystemAppearanceEffect(action, listenerApi) {
+      const { systemAppearance } = action.payload
+      const theme = getTheme(listenerApi.getState())
+      updateStatusBarTheme(theme, systemAppearance)
+    }
+  })
+}