Unable to define asyncThunk inside of a slice

[olegus199]

Hello! I'm walking through an official redux tutorial "Redux Essentials". I'm at part 6: Performance, Normalizing Data, and Reactive Logic. I'm doing pretty much everything like the guide suggests, but with only one difference - I define asyncThunks inside of slices.
So far, everything went well, but in this example I just couldn't do it.

import { RootState } from "@/app/store";
import { client } from "@/api/client";
import { createAppSlice } from "@/app/createAppSlice";
import { createAppAsyncThunk } from "@/app/withTypes";

interface ServerNotification {
  id: string;
  date: string;
  message: string;
  user: string;
}

interface InitialState {
  notifications: ServerNotification[];
}

const initialState: InitialState = {
  notifications: [],
};

export const fetchNotifications = createAppAsyncThunk(
  "notifications/fetchNotifications",
  async (_unused, thunkApi) => {
    const allNotifications = selectAllNotifications(thunkApi.getState());
    const [latestNotification] = allNotifications;
    const latestTimestamp = latestNotification ? latestNotification.date : "";
    const response = await client.get<ServerNotification[]>(
      `/fakeApi/notifications?since=${latestTimestamp}`,
    );
    return response.data;
  },
);

const notificationsSlice = createAppSlice({
  name: "notifications",
  initialState,
  reducers: {},
  // reducers: (create) => {
  //   return {
  //     fetchNotifications: create.asyncThunk<ServerNotification[]>(
  //       async (_unused, thunkAPI) => {
  //         const allNotifications = selectAllNotifications(
  //           thunkAPI.getState() as RootState,
  //         );
  //         const [latestNotification] = allNotifications;
  //         const latestTimestamp = latestNotification
  //           ? latestNotification.date
  //           : "";
  //         const response = await client.get<ServerNotification[]>(
  //           `fakeApi/notifications?since=${latestTimestamp}`,
  //         );
  //         return response.data;
  //       },
  //       {
  //         fulfilled(state: InitialState, action) {
  //           state.notifications = action.payload;
  //         },
  //       },
  //     ),
  //   };
  // },
  extraReducers: (builder) => {
    builder.addCase(fetchNotifications.fulfilled, (state, action) => {
      state.notifications = action.payload;
    });
  },
  selectors: {
    selectAllNotifications: (state) => state.notifications,
  },
});

export default notificationsSlice.reducer;

export const { selectAllNotifications } = notificationsSlice.selectors;

As you can see, I commented out the definition inside of the slice, and left the separate const definition. When I try to define the thunk inside of the slice, I get an error

"TS7023: reducers implicitly has return type any because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions."

I figured out that the problem lies in the return statement. Well, not exactly, but sort of. Here's the thing: if I remove return statement - the error's gone. Also, if I replace the latestTimestamp var with any other var or value - the error is gone too. I guess it has something to do with the selectAllNotifications logic, but it all seems so strange to me, because it should work, but it doesn't.

I'll appreciate any help, because right now I just don't get why the approach of creating thunk outside of slice works and my approach doesn't. Thanks!

[EskiMojo14]

you'll need to directly annotate the return type on your function, to prevent a circular type inference.

[olegus199]

Thanks! That did the trick!