2.0 RTK Query Macro Error Handling middleware type error on the `payload`

[n-ii-ma]

I'm following the docs in handling RTK Query error and while I got no type errors in versions prior to v2.0, now I'm getting type errors when trying to access the payload properties.

/** Handle error logging */
export const errorLogger: Middleware =
  (api: MiddlewareAPI) => (next) => (action) => {
    if (isRejectedWithValue(action)) {
      // Handle errors based on their status codes
      switch (action?.payload?.status) {
        // If server has errors
        case 500:
          Toast.show({
            type: "error",
            text1: "Server Error",
            text2: action?.payload?.data?.message,
          });
          break;

        default:
          Toast.show({
            type: "error",
            text1: "Error",
            text2: action?.payload?.data?.message,
          });
      }
    }

    return next(action);
  };

Type error for action?.payload?.status: Property 'status' does not exist on type '{}'.

I'm wondering why this didn't happen in versions prior to v2.0 and also how can I fix this?

[markerikson]

This is because RTK 2.0 and Redux core 5.0 changed the default type of action in middleware to be unknown. You'll need to do appropriate type guard checks to validate the potential fields in the action object, in order for TS to accept the accesses:

• https://redux-toolkit.js.org/usage/migrating-rtk-2#middleware-type-changed---middleware-action-and-next-are-typed-as-unknown