How to type useSelector in a shared Redux Toolkit slice inside an Nx monorepo when the component doesn't know the app’s RootState?

[michalvadak]

I'm using Redux Toolkit in an Nx monorepo and I have a shared component that lives in a library and is used across multiple apps.
This component also contains its own slice, which needs to be dynamically attached to the store in whichever app uses the component.

The problem is typing:
Typed hooks like useAppSelector require access to the application's RootState, but the shared component obviously doesn’t know which store it will be plugged into.

Because of this, I'm falling back to the untyped useSelector, but that leads to errors like:

TS2345: Argument of type 'unknown' is not assignable to type '{ autoPlay: AutoPlayState; }'

Example:

import { useSelector } from 'react-redux';

const isVisible = useSelector((state) =>
  selectIsTutorialStepVisible(state, 'select')
);

Is there a recommended way to type useSelector (or selectors in general) inside a shared component that does not have access to the application's RootState?

Should slices in shared libs define their own RootState fragment types somehow, or is using the untyped useSelector the expected approach in this scenario?

[markerikson]

At that point, yeah, you're better off just supplying a sort of partial "NotQuiteRootState" type that only reflects what the component expects will be in the store. Not truly typesafe, in that it's not coming from the actual constructed store, but it's the best you can get when you're mixing essentially dynamic app construction with static typing.

[michalvadak]

Is there any best practice for constructing this “NotQuiteRootState” type?

Or does the fact that we are mixing essentially dynamic app construction with static typing indicate that this approach is not ideal, and that the architecture should instead be handled differently?

[EskiMojo14]

for slices you know will be mounted under their name/reducerPath, we export a WithSlice helper:

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {}
})
type CounterState = WithSlice<typeof counterSlice> // { counter: { value: 0 } }

For other locations you'd have to be a bit more manual:

interface PartialRootState {
  features: {
    counter: ReturnType<typeof counterSlice.getInitialState>
  }
}

[michalvadak]

Thanks!

For now I'm always mounting it under their name/reducerPath... If I understand this correctly this gives me the ability to do this:

export const useSliceSelector = useSelector.withTypes<CounterState>();

but what about this?

export const useSliceDispatch = useDispatch.withTypes<...>();

[markerikson]

@michalvadak : withTypes<CounterState> wouldn't be right - that would say that CounterState is the entire state object, when it should really be a nested field in the state object.

For useDispatch, typically you'd want to make sure it includes the ThunkDispatch type (ie, "dispatch knows how to accept a thunk function as an argument, not just plain action objects").

[michalvadak]

Sorry but I'm little lost now... so I would have to use it like so?

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {}
})

type CounterState = WithSlice<typeof counterSlice> // { counter: { value: 0 } }

...

const counterValue = useSelector<CounterState>(selectCounterValue);
const dispatch = useDispatch<ThunkDispatch<CounterState, any, any>>();

[markerikson]

No, not CounterState by itself. It's the difference between:

const counterState = {
  value: 0
}

vs:

const counterStateInAnObject = {
  counter: {
    value: 0
  }
}

You need the types equivalent of the second approach:

type MiniRootStateWithCounter = {
  counter: CounterState
}

// later
const value = useSelector<MiniRootStateWithCounter>(selectCount)

That said, you should also still use the .withTypes() methods to only have to define the typed versions of these hooks once and then use those everywhere:

const useAppSelector = useSelector.withTypes<MiniRootStateWithCounter>()
const useAppDispatch = useDispatch.withTypes<ThunkDispatch<MiniRootStateWithCounter, any, any>>()

// later
const value = useAppSelector(selectCount)

[lamhungypl]

I have a question on this NX context. What is the type of SlicedQueryRootState, SlicedQueryRootDispatch,

On libs/features-a, I have featureAQuery. My utility functions need to pass the store object or dispatch to the params.

import { queryApi } from '@org/store-data-access';

import { getSomeData } from './feature-a.services';
import { SomeDataResponse } from './feature-a.types';

export const meQueryApi = queryApi.injectEndpoints({
  endpoints: (builder) => ({
    getMe: builder.query<SomeDataResponse, void>({
      queryFn: async () => {
        try {
          const result = await getSomeData();
          return { data: result };
        } catch (error) {
          return { error };
        }
      },
    }),
  }),
});


export const someFunction = async (
  /**
   * TODO: typing for dispatch, SlicedQueryRootDispatch
   */
  dispatch: (arg: any) => Promise<{ data: Data | undefined }>
) => {
  const { data: myData } = await dispatch(
    myQueryApi.endpoints.someEndpoints.initiate()
  );

  if (!myData) {
    throw redirect(getPath('home'));
  }

  return myData;
};

export const clientLoader: ClientLoaderFunction = async () => {
  await someFunction(store.dispatch);
  return null;
};