如果对象键存在于另一个数组中,则在重新选择选择器中使用键控对象扩充对象

In Reselect selector augment object with keyed objects if object key exist in another array

正在尝试学习一个概念。 如果我有键控对象的对象和键数组。

const orders = {
    "key1" : { id: "key1", number: "ORD001" },
    "key3" : { id: "key3", number: "ORD003" },
    "key2" : { id: "key2", number: "ORD002" },
};

和一个数组:

const selectedOrders = ["key1","key2"];

并借助 Redux Reselect。我想要一个像这样的新对象:

const orders = {
    "key1" : { id: "key1", number: "ORD001" selected: true},
    "key3" : { id: "key3", number: "ORD003" selected: false },
    "key2" : { id: "key2", number: "ORD002" selected: true },
};

所以稍后我可以通过 Object.keys(this.orders) 迭代该对象并设置所选项目的样式。 对此类用例使用 Reselect 是否正确?如果是,那么我应该如何以一种有效且惯用的方式签入,外部数组是否包含给定的键? 如果这个想法对于这样的用例是完全错误的,那么我应该如何以正确的方式做到这一点? 附录:也可能有另一个数组,其中包含按顺序显示这些订单的键。 (用户能够重新订购商品)。 P.S。我不想为 orders 集合使用对象数组。

是的,您可以使用重新选择来合并两组数据以生成第三组数据。由于reselect的memoization,如果输入没有变化,那么计算只需要执行一次。

// You'll need some input selectors to pluck the raw orders from your redux store.
//    I'm making these up, since i don't know how your store is arranged.
const getOrders = (state) => state.orders;
const getSelectedOrders = (state) => state.selectedOrders;

const getAugmentedOrders = createSelector(
  [getOrders, getSelectedOrders],
  (orders, selectedOrders) => {
    const augmentedOrders = {};
    Object.keys(orders).forEach(key => {
      augmentedOrders[key] = {
        ...orders[key],
        selected: selectedOrders.includes(key),
      }
    });
    return augmentedOrders;
  }
);

如果你有很多选择的订单,那么每次循环都做selectedOrders.includes可能是一个性能问题。在那种情况下,我会创建一组 selectedOrders,因为对该组的查找将是恒定时间。

  (orders, selectedOrders) => {
    const selectedSet = new Set(selectedOrders);
    const augmentedOrders = {};
    Object.keys(orders).forEach(key => {
      augmentedOrders[key] = {
        ...orders[key],
        selected: selectedSet.has(key),
      }
    });
    return augmentedOrders;
  }