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!