refactor: use RxJS

package.json

@@ -28,7 +28,8 @@
     "pako": "2.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-redux": "8.1.2"
+    "react-redux": "8.1.2",
+    "rxjs": "8.0.0-alpha.10"
   },
   "devDependencies": {
     "@types/jest": "28.1.8",

src/app/actionObserver.ts

@@ -0,0 +1,28 @@
+import { Middleware, PayloadActionCreator, Action, isAction } from '@reduxjs/toolkit'
+import { Observable, Subject, filter, map } from 'rxjs'
+
+interface ActionObserver {
+  middleware: Middleware
+  onAction: <TPayload>(actionCreator: PayloadActionCreator<TPayload>) => Observable<TPayload>
+}
+
+export const createActionObserver = (): ActionObserver => {
+  const action$ = new Subject<Action>()
+
+  const middleware: Middleware = () => next => action => {
+    const result = next(action)
+    if (isAction(action)) {
+      action$.next(action)
+    }
+    return result
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const onAction = (actionCreator: PayloadActionCreator<any>): Observable<any> =>
+    action$.pipe(
+      filter(actionCreator.match),
+      map(action => action.payload)
+    )
+
+  return { middleware, onAction }
+}

src/app/hooks.ts

@@ -7,6 +7,6 @@ import type { RootState, Store } from './store'
 
 type TypedUseStoreHook = () => Store
 
-export const useStore: TypedUseStoreHook = __useStore
+export const useStore = __useStore as TypedUseStoreHook
 
 export const useSelector: TypedUseSelectorHook<RootState> = __useSelector

src/app/stateObserver.ts

@@ -0,0 +1,36 @@
+import type { Middleware } from '@reduxjs/toolkit'
+import { Observable, ReplaySubject, map, distinctUntilChanged, skip } from 'rxjs'
+import type { RootState, RootStateSelector } from './store'
+
+interface StateObserver {
+  middleware: Middleware
+  onState: <TSelected>(selector: RootStateSelector<TSelected>) => Observable<TSelected>
+}
+
+export const createStateObserver = (): StateObserver => {
+  const state$ = new ReplaySubject<RootState>(1)
+  const distinctState$ = state$.pipe(distinctUntilChanged())
+
+  const middleware: Middleware = api => {
+    state$.next(api.getState())
+    let nestedDepth = 0
+
+    return next => action => {
+      try {
+        nestedDepth += 1
+        const result = next(action)
+        if (nestedDepth === 1) {
+          state$.next(api.getState())
+        }
+        return result
+      } finally {
+        nestedDepth -= 1
+      }
+    }
+  }
+
+  const onState = <TSelected>(selector: RootStateSelector<TSelected>): Observable<TSelected> =>
+    distinctState$.pipe(map(selector), distinctUntilChanged(), skip(1))
+
+  return { middleware, onState }
+}

src/app/stateSaver.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { useStore } from './hooks'
-import { watch } from './watcher'
+import { subscribe } from './subscribe'
 import { StateToPersist, selectStateToPersist } from './persist'
 import { saveState as saveStateToUrl } from './url'
 import { saveState as saveStateToLocalStorage } from './localStorage'
@@ -16,6 +16,6 @@ export const useStateSaver = (): void => {
   useEffect(() => {
     const stateToPersist = selectStateToPersist(store.getState())
     saveState(stateToPersist)
-    return watch(selectStateToPersist, saveState)
+    return subscribe(store.onState(selectStateToPersist), saveState)
   }, [])
 }

src/app/store.ts

@@ -9,8 +9,8 @@ import exceptionReducer from '@/features/exception/exceptionSlice'
 import { loadState as loadStateFromLocalStorage } from './localStorage'
 import { loadState as loadStateFromUrl } from './url'
 import { getInitialStateToPersist } from './persist'
-import { actionListener } from './actionListener'
-import { watcher } from './watcher'
+import { createActionObserver } from './actionObserver'
+import { createStateObserver } from './stateObserver'
 import { merge } from '@/common/utils'
 
 const rootReducer = combineReducers({
@@ -34,14 +34,23 @@ const getPreloadedState = (): Partial<RootState> => {
   return merge(getInitialStateToPersist(), stateFromLocalStorage, stateFromUrl)
 }
 
-const store = configureStore({
-  reducer: rootReducer,
-  middleware: getDefaultMiddleware => {
-    const defaultMiddleware = getDefaultMiddleware()
-    return defaultMiddleware.prepend(watcher, actionListener)
-  },
-  preloadedState: getPreloadedState()
-})
+const actionObserver = createActionObserver()
+const stateObserver = createStateObserver()
+
+const store = Object.assign(
+  configureStore({
+    reducer: rootReducer,
+    middleware: getDefaultMiddleware => {
+      const defaultMiddleware = getDefaultMiddleware()
+      return defaultMiddleware.prepend(stateObserver.middleware, actionObserver.middleware)
+    },
+    preloadedState: getPreloadedState()
+  }),
+  {
+    onAction: actionObserver.onAction,
+    onState: stateObserver.onState
+  }
+)
 
 export type Store = typeof store
 

src/app/subscribe.ts

@@ -0,0 +1,11 @@
+import type { Observable, Observer, Subscription } from 'rxjs'
+
+export type Unsubscribe = Subscription['unsubscribe']
+
+export const subscribe = <T>(
+  observable: Observable<T>,
+  observerOrNext?: Partial<Observer<T>> | ((value: T) => void) | null
+): Unsubscribe => {
+  const subscription = observable.subscribe(observerOrNext)
+  return () => subscription.unsubscribe()
+}

src/features/assembler/assemblerSlice.ts

@@ -43,6 +43,9 @@ export const assemblerSlice = createSlice({
 
 export const selectAssembledSource = (state: RootState): string => state.assembler.source
 
+export const selectIsAssembled = (state: RootState): boolean =>
+  state.assembler.source !== initialState.source
+
 export const selectAddressToStatementMap = (state: RootState): Partial<AddressToStatementMap> =>
   state.assembler.addressToStatementMap