addListener giving type error wrt actionCreator

[SansPapyrus683]

I have the following code inside of a React component:

 const dispatch = useDispatch<AppDispatch>(); useEffect(() => { return dispatch( addListener.withTypes<RootState, AppDispatch>()({ actionCreator: setFindWindowOpen, effect: (action) => { // ... }, }) ); }, [dispatch]);

But I'm getting the following error:

I know someone was having a similar problem here, but I believe this is different as the target type is just straight up undefined despite me providing types in all the relevant locations. What might be the issue here?

[markerikson]

Does anything change if you save the addListener.withTypes() result into a separate variable first?

const addTypedListener = addListener.withTypes<RootState, AppDispatch>(); function MyComponent() { const dispatch = useDispatch<AppDispatch>(); useEffect(() => { return dispatch( addTypedListener ({ actionCreator: setFindWindowOpen, effect: (action) => { // ... }, }) ); }, [dispatch]); }

[SansPapyrus683]

Yeah; it unfortunately gives the same error.

Thank you so much for the quick reply, by the way!

[markerikson]

Can you provide a CodeSandbox or repo that shows this happening? As part of that, how is setFindWindowOpen defined, and what is its current TS type?

[SansPapyrus683]

I'll try to get a sandbox up, but FWIW here's how things currently are in the slice file:

export const findSlice: Slice<FindState> = createSlice({ name: 'find', initialState, reducers: { setFindWindowOpen: (state, action: PayloadAction<boolean>) => { state.findWindowOpen = action.payload; } }, }); export const { setFindWindowOpen } = findSlice.actions;

and how they are in the actual store.ts:

const listenerMiddleware = createListenerMiddleware(); export const store = configureStore({ reducer: { find: findReducer, }, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActionPaths: [/* ... */], }, }).prepend(listenerMiddleware.middleware), }); export type RootState = ReturnType<typeof store.getState>; export type AppDispatch = typeof store.dispatch;

The setFindWindowOpen is the same as that in the erroring file.

[EskiMojo14]

export const findSlice: Slice<FindState> =

never do this

you are throwing away all of the information it knows about your slice

remove the type annotation and everything should be a lot happier

[markerikson]

Ah yes, good eye. Yeah, RTK was designed around type inference - manually using types like Slice and Store will generally break TS results.

[SansPapyrus683]

oh my god
tysm!