rxjs6 - 如何将 distinct() 应用于对象数组 RxJS？

Question

我正在从 swagger 宠物 API 获取宠物列表。我想删除重复id的宠物，然后将其发送给React以避免重复键问题。我尝试了下面的代码，但对我不起作用。谁能帮我解决这个问题？

我是 RxJS 的新手，所以想删除根据宠物 ID 过滤不同对象的注释代码。

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(
                map( response => response.map( (pet) => ({
                    id: pet.id,
                    pet: pet.pet
                }))),
                distinct( petList => petList.id),
                // map( petList => petList.filter((pet, index, list) => {
                //                     return list.map(petObj =>
                //                         petObj.id).indexOf(pet.id) === index;
                //                     })),
                map(response => petActions.setPets(response))
        )),
        catchError( error => ({ type: 'ERROR_PETS_FETCH', payload: error})),
    )
}

假设 pets 数组类似于 [{ id: 1, pet: dog}, { id: 2, pet: cat }, { id: 3, pet: fish}, { id: 2, pet: rat}, { id: 4, pet: 鹦鹉}, { id: 1, 宠物: 猫头鹰}]

预期输出:[{ id: 1, pet: dog}, { id: 2, pet: cat }, { id: 3, pet: fish}, { id: 4, pet: parrot}]

我得到的输出是与输入相同的数组。

Answer 1

getJSON 函数将返回一个发出一个项目(响应)并完成的可观察对象。 (或者，它可以发出一个错误。)给定返回数组的快乐路径示例...

下面的 map 运算符将接收反序列化的 JSON 数组并将其映射到一个新数组。也就是说，map 运算符将只有一个输入事件并产生一个输出事件。

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

distinct 运算符适用于多个事件。对于每个事件，它都会过滤掉所有重复项(如您所述，可自定义重复项的定义)。以下 distinct 运算符将始终通过您的单个 事件。另外，请注意 petList 是一个数组。数组没有 id 属性，因此 lambda 将返回 undefined。不过，lambda 返回什么并不重要。因为只有一个事件，所以它不会在任何比较中使用返回值。

distinct(petList => petList.id),

看来您希望 distinct 处理数组的每个元素。为此，您可以使用 from 将数组转换为可观察对象，并使用 concatMap 按顺序发出每个元素。随着多个事件流经管道，distinct 可以发挥它的魔力:

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

但是，此更改将导致发出多个 Redux 操作(每个不同的宠物一个)。在发出 Redux 操作之前，我们可以使用 reduce 运算符将每个不同的宠物累积回一个数组中。

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

让我们把它们放在一起:

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 })),
      )
    ),
  )
}

最后一点:您提供的示例数据与您正在应用的 map 之间看起来有些不对劲。如果数组如下所示:

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

然后每个元素都没有name 或status 属性，只有id 和pet 属性。也许以下是故意的？

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

或者这可能只是您提供的示例数据的问题。无论哪种方式，我都建议仔细检查 map 以确保它按预期转换您的值(value)观。