Various usage of Listener Middleware

[ryota-murakami]

I'd like to know other forks are how using a Listener Middleware.
In my case putting theme changing DOM API's task at Listener.
Because these code are completely outside of React components and should trigger on state(light/dark) change.

Screen.Recording.2022-07-08.at.0.41.28.mov

https://github.com/laststance/nsx/blob/main/src/redux/listener.ts

import type { Theme } from './themeSlice'

export function SwitchTailwindCSSTheme(theme: Theme) {
  if (
    theme === 'dark' ||
    (theme === 'system' &&
      window.matchMedia('(prefers-color-scheme: dark)').matches)
  ) {
    document.documentElement.classList.add('dark', 'changing-theme')
  } else {
    document.documentElement.classList.remove('dark', 'changing-theme')
  }
  window.setTimeout(() => {
    document.documentElement.classList.remove('changing-theme')
  })
}

store.ts

const listenerMiddleware = createListenerMiddleware()
listenerMiddleware.startListening({
  actionCreator: updateTheme,
  effect: (action) => {
    SwitchTailwindCSSTheme(action.payload)
  },
})