реакция mobx на отфильтрованный список

Я хочу прослушать изменение определенных элементов списка. Я использовал reaction в своем списке и отфильтровал свой список, чтобы получить определенные элементы, которые мне нужно прослушать, но reaction срабатывает, когда в список добавляется новый новый элемент (из моего отфильтрованного списка)

Это мой код:

const MyCustomModel = types
  .model({
    id: types.identifier,
    start: types.Date,
    end: types.Date,
  });

const MyStore = types
  .model({
    id: types.identifier,
    items: types.map(MyCustomModel),
  })
  .views(self => ({
    get itemsArray() {
      return Array.from(self.items.values());
    },
  }))
  .actions(self => {
    return {
      setListener(start: Date, end: Date) {
        myReactionDisposer = reaction(
          () =>
            self.itemsArray
              .filter(
                item =>
                  item.end.getTime() >= self.start.getTime() &&
                  item.start.getTime() <= self.end.getTime(),
              )
              .map(item=> item),
          () => {
            console.log('my reaction fires!');
            // other codes
          },
        );
      },
  });

Например, если я слушаю диапазон от 2020-09-20 00:00:00 до 2020-09-21 00:00:00 и добавляю новый элемент с начальным и конечным значением в другой день {start: '2020-09-15 10:00:00' , end: '2020-09-15 16:20:00'}, срабатывает реакция!


person SiSa    schedule 20.09.2020    source источник
comment
Итак, в чем вопрос? Я не совсем понимаю. Вы не хотите вызывать реакцию при добавлении нового элемента?   -  person Danila    schedule 21.09.2020


Ответы (2)


Реакция будет срабатывать каждый раз просто потому, что вы обращаетесь к каждому элементу в itemsArray (функция фильтра).

Но у вас есть выбор, что вы от него вернете. Таким образом, вы можете вернуть пустой массив своему побочному эффекту, чтобы он знал, что ничего не должен делать.

person Ivan V.    schedule 21.09.2020

Это потому, что он всегда возвращает новый массив из функции данных (спасибо urugator )
Мне нужно изменить equal функцию для моей реакции, и она работает для меня с поверхностным компаратором

reaction(data,effect, { equals: comparer.shallow })
person SiSa    schedule 21.09.2020