How to apply distinct() to array of objects RxJS?

The getJSON function will return an observable that emits one item (the response) and completes. (Or, it can emit one error.) Given your happy path example of returning an array...

The following map operator will receive the deserialized JSON array and map it to a new array. That is, the map operator will have exactly one input event and result in exactly one output event.

map(response => response.map(pet => ({
  id: pet.id,
  name: pet.name,
  status: pet.status,
}))),

The distinct operator works across multiple events. For each event, it filters out any duplicates (with the definition of duplicate customizable as you've noted). The following distinct operator will always pass through your single event. Also, take note that petList is an array. Arrays don't have an id property, so the lambda will return undefined. It doesn't really matter what the lambda returns, though. Because there's only a single event, it's not using the return value in any comparisons.

distinct(petList => petList.id),

It appears you're expecting distinct to process each element of the array. To accomplish this, you can use from to convert the array to an observable and concatMap to emit each element in order. With multiple events flowing through the pipe, distinct can do its magic:

...
concatMap(from), // shorthand for: `concatMap(response => from(response)),`
map(pet => ({
  id: pet.id,
  name: pet.name,
  status: pet.status,
})),
distinct(pet => pet.id),
...

However, this change would result in emitting multiple Redux actions (one for each distinct pet). We can use the reduce operator to accumulate each of the distinct pets back into a single array before emitting the Redux action.

...
reduce((pets, pet) => [...pets, pet], []),
map(pets => petActions.setPets(pets)),
...

Let's put it all together:

export function fetchPetEpic(action$) {
  return action$.pipe(
    ofType('GET_PETS'),
    switchMap(action =>
      ajax.getJSON(`https://petstore.swagger.io/v2/pet/findByStatus?status=${action.payload}`).pipe(
        concatMap(from), // shorthand for: `concatMap(response => from(response)),`
        map(pet => ({
          id: pet.id,
          name: pet.name,
          status: pet.status,
        })),
        distinct(pet => pet.id),
        reduce((pets, pet) => [...pets, pet], []),
        map(pets => petActions.setPets(pets)),
        catchError(error => ({ type: 'ERROR_PETS_FETCH', payload: error })),
      )
    ),
  )
}

One final note: Something looks off between the example data you provided and the map you're applying. If the array looks like the following:

[ { id: 1, pet: dog }, ...

Then each element doesn't have name or status properties, just id and pet properties. Maybe the following is intended?

map(item => ({
  id: item.id,
  name: item.pet.name,
  status: item.pet.status,
})),

Or maybe it's just a problem with the example data you provided. Either way, I'd recommend double checking the map to ensure it projects your values as expected.