设置自定义 immutablejs 键以防止数据重复？

Question

我有以下格式的数据action.places。

我只想将它与传入的新数据结合起来，并返回更新地点的新地图。如果我得到一个地点对象并且其中一个地点与前一个地点具有相同的纬度/经度，我不想附加该数据。

{
  places: [
    {
      place: {
        lat: 123,
        lon: 321,
      }
    },
    {
      place: {
        lat: 432,
        lon: 234,
      }
    },
  ]
}

我将如何使用地图执行此操作？目前我正在以这种方式添加，但所有内容都是重复的，我找不到非混乱的解决方案：

case RECEIVE_PLACES:
  return state
    .set('places', state.get('places').update(fromJS(action.places)))

理想情况下，我会将每个 obj 的键设置为 [${lat},${lon}]（唯一标识地点的方式），这样我只需遍历键即可获得我的地点。

Answer 1

你可以过滤掉重复的地方项

case RECEIVE_PLACES:  {
  const newPlaces = fromJS(action.places).filter((newItem) => (
    !state.get('stores').find((oldItem) => (
      oldItem.place.lat === newItem.place.lat &&
      oldItem.place.lon === newItem.place.lon
    )
  );

  return state.set('stores', state.get('stores').update(newPlaces));
}

Answer 2

如果您使用 Immutable.Set 而不是 Immutable.List 来持久化位置，那么一切都会变得更容易，性能也会更好。

所以，如果在你的减速器中你做了类似的事情：

import { Map, Set, fromJS } from 'immutable';

const initialState = new Map([
  ['places', new Set()],
  // Whatever other props that Map has
]);

const yourReducer = (state = initialState, { type, places }) => {
  switch (type) {
    RECEIVE_PLACES:
      return state.update('places', places => places.merge(
        new Set(fromJS(places))
      );
    default:
      return state;
  }
};

你应该没事的。

让我知道这是否适合你。