Производные хранилища Svelte и сортировка по массивам

Question

Я создал магазин, содержащий список поездок, загруженных из моего API:

const loadRides = () => client.service('rides').find({
  query: {
    $sort: {
      date: -1,
    }
  }
});

const createRides = () => {
  const { subscribe, update } = writable([], async (set) => {
    try {
      const rides = await loadRides().then((result) => result.data);
      set(rides);
    } catch (e) {
      console.error(e);
    }
    // Socket update binding?
  });

  subscribe((rides) => console.debug('rides', rides));

  return {
    subscribe,
    refresh: () => loadRides().then((result) => update(() => result.data)),
  };
};
export const rides = createRides();

Затем я установил два производных магазина для прошлых и будущих поездок:

export const pastRides = derived(
  rides,
  ($rides) => $rides
    .filter((ride) => ride.steps.every((step) => step.doneAt))
  ,
);
export const comingRides = derived(
  rides,
  ($rides) => $rides
    .filter((ride) => ride.steps.some((step) => !step.doneAt))
    .sort((rideA, rideB) => {
      const compare = new Date(rideA.date) - new Date(rideB.date);
      console.log(rideA.date, rideB.date, compare);
      return compare;
    })
  ,
);

В sort метод на втором не имеет никакого эффекта.

Поэтому я попытался поставить этот метод до filterодин. Это работает, но также сортирует$pastRides. Фактически, это сортировка полного$rides массив, и это делает смысл.

Но я не понимаю, почему sort после filter не работает.

Что я пропустил?

Answer 1

Array.sortизменчив. То есть, когда вы звонитеrides.sort, он сортирует и изменит rides и верните отсортированный rides.

Когда вы используете derived(rides, ($rides) => ... ), то $rides вы получили оригинал rides массив, который вы называете set(rides). Итак, вы можете представить, что обаpastRides а также comingRides получил то же самое $rides массив.

вы можете наблюдать это поведение в этом ответе

Чтобы не иметь обоих derived мешают друг другу, вы можете создать новый массив и отсортировать новый массив:

const sorted_1 = derived(array, $a => [...$a].sort());

вы можете попробовать это в этом ответе.