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").