Possible issues blocking upgrades to 2.0

[markerikson]

Playing with some real-world repos using RTK and TS, to see what happens if I try to upgrade to a local 2.0-rc+ build.

InvokeAI

• Code: https://github.com/invoke-ai/InvokeAI/tree/main/invokeai/frontend/web
• Usage: everything latest and greatest RTK. enhancers, middleware, RTKQ, listeners, entity adapters, even RTKQ "infinite queries" with entity adapters for the cache

Expected Issues

• Extensive use of EntityState<T> errors because it needs the second <Type, Id> generic
• use of memoizeOptions: {equalityCheck}

Unexpected Issues

• Listener inferred type was UnknownAction, but worked okay when the isAnyOf() was moved outside This is actually expected behavior per TS Bug found while testing the 2.0.0-beta.4 #3862 - TS has done this for a while, we now just infer as UnknownAction instead of AnyAction:

// boardIdSelected.ts
export const addBoardIdSelectedListener = () => {
  startAppListening({
    matcher: isAnyOf(boardIdSelected, galleryViewChanged),
    effect: async (
      action,
      { getState, dispatch, condition, cancelActiveListeners }
    ) => {

• configureStore() has TS errors when enhancers is provided, and middleware returns more than one middleware entry in the tuple. (Something about a tuple size mismatch, maybe? https://stackoverflow.com/questions/64308563/source-has-x-elements-but-target-allows-only-1 ) Apparently we need to have middleware declared before configureStore, so that we can infer the type of getDefaultEnhancers correctly. 🧙

export const store = configureStore({
  reducer: rememberedRootReducer,
  enhancers: (getDefaultEnhancers) => {
    // Edited - this was originally `existingEnhancers.concat`
    return getDefaultEnhancers()
      .concat(
        rememberEnhancer(window.localStorage, rememberedKeys, {
          persistDebounce: 300,
          serialize,
          unserialize,
          prefix: LOCALSTORAGE_PREFIX,
        })
      )
      .concat(autoBatchEnhancer());
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false,
    })
      .concat(api.middleware)
      .concat(dynamicMiddlewares)
      .prepend(listenerMiddleware.middleware),

[markerikson]

Grafana

• Code: https://github.com/grafana/grafana/tree/main/public/app

Unexpected Issues

• The same kind of tuple size mismatch as InvokeAI, except that the store isn't using enhancers

// public/test/core/redux/reduxTester.ts
export const reduxTester = <State>(args?: ReduxTesterArguments<State>): ReduxTesterGiven<State> => {
  const dispatchedActions: UnknownAction[] = [];
  const logActionsMiddleWare: Middleware<{}, Partial<StoreState>> =
    (store: MiddlewareAPI<Dispatch, Partial<StoreState>>) => (next) => (action) => {
      // filter out thunk actions
      if (action && typeof action !== 'function') {
        dispatchedActions.push(action);
      }

      return next(action);
    };

  const preloadedState = args?.preloadedState ?? ({} as unknown as Partial<State>);
  const debug = args?.debug ?? false;
  let store: EnhancedStore<State, UnknownAction, []> | null = null;

  // const defaultMiddleware = getDefaultMiddleware<State>({
  //   thunk: false,
  //   serializableCheck: false,
  //   immutableCheck: false,
  // } as any);

  const givenRootReducer = (rootReducer: Reducer<State>): ReduxTesterWhen<State> => {
    store = configureStore({
      reducer: rootReducer,
      // middleware: [...defaultMiddleware, logActionsMiddleWare, thunk] as unknown as [ThunkMiddleware<State>],
      middleware: (gDM) => {
        return gDM().concat(logActionsMiddleWare);
      },
      preloadedState,
    });

    setStore(store as any);

    return instance;
  };

Other Issues

• They've got some hooks where they're calling createSelector inline????? This merits filing an issue

  const alertmanagerDatasources = useSelector(
    createSelector(
      (state: StoreState) => state.dataSources.dataSources.filter((ds) => ds.type === 'alertmanager'),
      (datasources) => keyBy(datasources, (ds) => ds.uid)
    )
  );

export function usePageNav(navId?: string, oldProp?: NavModel): NavModel | undefined {
  if (oldProp) {
    return oldProp;
  }

  if (!navId) {
    return;
  }

  // Page component is used in so many tests, this simplifies not having to initialize a full redux store
  if (!store) {
    return;
  }

  // eslint-disable-next-line react-hooks/rules-of-hooks
  return useSelector(createSelector(getNavIndex, (navIndex) => getNavModel(navIndex, navId ?? 'home')));
}

or this one:

export const isLeftPaneSelector = (exploreId: string) =>
  createSelector(selectPanes, (panes) => {
    return Object.keys(panes)[0] === exploreId;
  });

// other file entirely
const isLeftPane = useSelector(isLeftPaneSelector(exploreId));