Question

我使用重新选择来获得我的redux状态的一部分。我有一个州的对象列表。我的创建选择器的一个子选择器是此列表的过滤器功能：

state => state.list.filter(filterFunction)

所以我将它传递给我的createSelector：

createSelector(
  state => state.list.filter(filterFunction),
  (subsetOfObjects) => subsetOfObjects.map(doSomething)
);

此过滤器函数返回列表中我的对象的子集。因此，如果列表更改，则重新选择始终返回新对象，即使子集未更改，因为列表不相同（完全正确）。

如果对象或过滤列表有变化，

是否有可能只获取一个新对象？

Answer 1

毕竟我有一个可行的想法：

const list = {


object1: {
    id: 'object1',
  },
  object2: {
    id: 'object2',
  },
  object3: {
    id: 'object3',
  },
};

const order = ['object1', 'object3'];

const selector = (...args) => args.reduce((prev, curr) => ({...prev, [curr.id]: curr}), {});

createSelector(
  state => state.order,
  order => createSelector(
    ...order.map(id => state => state.list[id]),
    selector,
  )
);

行...order.map(id => state => state.list[id]),会将对象作为参数传播。如果不改变order-array，它们将是相同的。所以我可以生成一个只有订单中列出的对象的新对象。

只有在订单数组发生变化时，才会调用第一个创建选择器的评估函数。如果发生这种情况，无论如何都需要重新计算结果。所以这很好。第二个只会重新计算它是否获得新值。值是从订单数组生成的函数。即使列表对象发生更改（由于在当前列表中未考虑的其他对象上的更多条目或更小的更改），指向订单数组的对象的指针也保持不变。所以我们总是得到与第二个评估函数相同的对象作为参数。这可以防止不必要的更新。

Answer 2

只需使用re-reselect。

重新选择是围绕Reselect的轻量级包装，旨在通过更深的备忘录和缓存管理来增强选择器。

Answer 3

修改

对于这种情况，我正在睡觉并梦想（严重哈哈）一个简单的（但可能仍然是不必要的）解决方案。您必须在过滤器结果上返回基本类型，因此您可以在第二个选择器上JSON.stringify()它和JSON.parse()。以下测试套件通过：

const state = { list: [ { id: 1, active: true }, { id: 2, active: false }, { id: 3, active: false }, { id: 4, active: false } ] } const getFilteredListIds = createSelector( (state) => JSON.stringify(state.list.filter((object) => !!object.active)), (filteredList) => JSON.parse(filteredList).map((object) => object.id) ) expect(getFilteredListIds.recomputations()).toEqual(0) expect(getFilteredListIds(state)).toEqual([1]) expect(getFilteredListIds.recomputations()).toEqual(1) expect(getFilteredListIds(state)).toEqual([1]) expect(getFilteredListIds.recomputations()).toEqual(1) const newState = { list: [ ...state.list, { id: 5, active: false } // should not change subset ] } expect(getFilteredListIds(newState)).toEqual([1]) // subset didn't change expect(getFilteredListIds.recomputations()).toEqual(1) // pass :)

但是，根据您的使用情况，它可能比每次通话过滤都慢。如果您测试该性能，请与我们分享。

第一次发布

正如我在comments中所说，你实施的方式使createSelector无用。

const state = { list: [ { id: 1, active: true }, { id: 2, active: false }, { id: 3, active: false }, { id: 4, active: false } ] } const getFilteredListIds = createSelector( (state) => state.list.filter((object) => !!object.active), (filteredList) => filteredList.map((object) => object.id) ) expect(getFilteredListIds.recomputations()).toEqual(0) expect(getFilteredListIds(state)).toEqual([1]) expect(getFilteredListIds.recomputations()).toEqual(1) expect(getFilteredListIds(state)).toEqual([1]) expect(getFilteredListIds.recomputations()).toEqual(1) // fail

首先，我做了一些调整以解决第一个问题。

const state = { list: [ { id: 1, active: true }, { id: 2, active: false }, { id: 3, active: false }, { id: 4, active: false } ] } const getList = (state) => state.list // it makes filter only happen if state.list changes const getFilteredList = createSelector( getList, (list) => list.filter((object) => !!object.active) ) const getFilteredListIds = createSelector( getFilteredList, (filteredList) => filteredList.map((object) => object.id) ) expect(getFilteredListIds.recomputations()).toEqual(0) expect(getFilteredListIds(state)).toEqual([1]) expect(getFilteredListIds.recomputations()).toEqual(1) expect(getFilteredListIds(state)).toEqual([1]) expect(getFilteredListIds.recomputations()).toEqual(1) // everything pass

现在你的问题是有效的：

如果对象或过滤列表有变化，
是否有可能只获取一个新对象？

你想要的是这个，对吧？

const newState = { list: [ ...state.list, { id: 5, active: false } // should not change subset ] } expect(getFilteredListIds(newState)).toEqual([1]) // subset didn't change expect(getFilteredListIds.recomputations()).toEqual(1) // fail

但是最后一行会失败，因为recomputations()将是2。

我认为解决这个问题的唯一方法就是将你所在状态的filteredList部分记录下来，但这可能很奇怪。

当对象相同时，如何在更改列表上重新选择？

3 个答案: