feat(utils): use dispatching reducer to sync dispatch action (#68172)

Use the new dispatching reducer in trace view to sync react to actions

Author: JonasBa

static/app/utils/useDispatchingReducer.spec.tsx

@@ -16,6 +16,7 @@ describe('useDispatchingReducer', () => {
     const reducer = jest.fn().mockImplementation(s => s) as () => {};
     const initialState = {type: 'initial'};
     const {result} = reactHooks.renderHook(() =>
+      // @ts-expect-error force undfined
       useDispatchingReducer(reducer, undefined, () => initialState)
     );
 

static/app/utils/useDispatchingReducer.tsx

@@ -1,4 +1,12 @@
-import {useCallback, useMemo, useRef, useState} from 'react';
+import type React from 'react';
+import {
+  type ReducerAction,
+  type ReducerState,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 /**
  * A hook that wraps a reducer to provide an observer pattern for the state.
@@ -10,20 +18,30 @@ import {useCallback, useMemo, useRef, useState} from 'react';
  */
 
 type ArgumentTypes<F extends Function> = F extends (...args: infer A) => any ? A : never;
-interface Middlewares<S, A> {
-  ['before action']: (S: Readonly<S>, A: A) => void;
-  ['before next state']: (P: Readonly<S>, S: Readonly<S>, A: A) => void;
+
+export interface DispatchingReducerMiddleware<R extends React.Reducer<any, any>> {
+  ['before action']: (S: Readonly<ReducerState<R>>, A: React.ReducerAction<R>) => void;
+  ['before next state']: (
+    P: Readonly<React.ReducerState<R>>,
+    S: Readonly<React.ReducerState<R>>,
+    A: React.ReducerAction<R>
+  ) => void;
 }
 
-type MiddlewaresEvent<S, A> = {[K in keyof Middlewares<S, A>]: Set<Middlewares<S, A>[K]>};
+type MiddlewaresEvent<R extends React.Reducer<any, any>> = {
+  [K in keyof DispatchingReducerMiddleware<R>]: Set<DispatchingReducerMiddleware<R>[K]>;
+};
 
-class Emitter<S, A> {
-  listeners: MiddlewaresEvent<S, A> = {
-    'before action': new Set<Middlewares<S, A>['before action']>(),
-    'before next state': new Set<Middlewares<S, A>['before next state']>(),
+class Emitter<R extends React.Reducer<any, any>> {
+  listeners: MiddlewaresEvent<R> = {
+    'before action': new Set<DispatchingReducerMiddleware<R>['before action']>(),
+    'before next state': new Set<DispatchingReducerMiddleware<R>['before next state']>(),
   };
 
-  on(key: keyof Middlewares<S, A>, fn: Middlewares<S, A>[keyof Middlewares<S, A>]) {
+  on(
+    key: keyof DispatchingReducerMiddleware<R>,
+    fn: DispatchingReducerMiddleware<R>[keyof DispatchingReducerMiddleware<R>]
+  ) {
     const store = this.listeners[key];
     if (!store) {
       throw new Error(`Unsupported reducer middleware: ${key}`);
@@ -33,9 +51,9 @@ class Emitter<S, A> {
     store.add(fn);
   }
 
-  removeListener(
-    key: keyof Middlewares<S, A>,
-    listener: Middlewares<S, A>[keyof Middlewares<S, A>]
+  off(
+    key: keyof DispatchingReducerMiddleware<R>,
+    listener: DispatchingReducerMiddleware<R>[keyof DispatchingReducerMiddleware<R>]
   ) {
     const store = this.listeners[key];
     if (!store) {
@@ -47,8 +65,8 @@ class Emitter<S, A> {
   }
 
   emit(
-    key: keyof Middlewares<S, A>,
-    ...args: ArgumentTypes<Middlewares<S, A>[typeof key]>
+    key: keyof DispatchingReducerMiddleware<R>,
+    ...args: ArgumentTypes<DispatchingReducerMiddleware<R>[typeof key]>
   ) {
     const store = this.listeners[key];
     if (!store) {
@@ -59,13 +77,15 @@ class Emitter<S, A> {
   }
 }
 
-export function useDispatchingReducer<S, A>(
-  reducer: React.Reducer<S, A>,
-  initialState: S,
-  initializer?: (arg: S) => S
-): [S, React.Dispatch<A>, Emitter<S, A>] {
-  const emitter = useMemo(() => new Emitter<S, A>(), []);
-  const [state, setState] = useState(initialState ?? (initializer?.(initialState) as S));
+export function useDispatchingReducer<R extends React.Reducer<any, any>>(
+  reducer: R,
+  initialState: ReducerState<R>,
+  initializer?: (arg: ReducerState<R>) => ReducerState<R>
+): [ReducerState<R>, React.Dispatch<ReducerAction<R>>, Emitter<R>] {
+  const emitter = useMemo(() => new Emitter<R>(), []);
+  const [state, setState] = useState(
+    initialState ?? (initializer?.(initialState) as ReducerState<R>)
+  );
 
   const reducerRef = useRef(reducer);
   reducerRef.current = reducer;
@@ -75,7 +95,7 @@ export function useDispatchingReducer<S, A>(
   stateRef.current = state;
 
   const wrappedDispatch = useCallback(
-    (action: A) => {
+    (action: ReducerAction<R>) => {
       // @TODO it is possible for a dispatched action to throw an error
       // and break the reducer. We should probably catch it, I'm just not sure
       // what would be the best mechanism to handle it. If we opt to rethrow,