使用传播运算符时，如何防止 Redux 上出现重复?

Question

我正在这样做：

case LOAD_PAGES:
return {
...state,
pages: [...state.pages, action.pages],
};

而且我有一个组件，每次我输入它时，它都会将相同的数据发送到商店，因此我得到了大量重复数据。

页面数组如下所示：

pages: [
{
key: 0,
menuName: 'Home',
pageType: 'HomePage',
dataIndex: 'HomePage0'
},
{
key: 1,
menuName: 'Employer Chat',
pageType: 'EmployerChat',
dataIndex: 'EmployerChat1'
},
]

这是 React 组件：

const handlePageLoad = () => {
if (siteById.data) {
siteById.data.pages.map((p, index) => {
return loadPagesAction({
key: index,
menuName: p.menuName,
pageType: p.pageType,
dataIndex: p.pageType + index,
});
});
}
};
useEffect(() => {
if (siteById.data.pages.length) {
handlePageLoad();
}
}, []);

有什么想法吗？

Answer 1

这是过滤重复项的"智能"方法。

function filterDuplicates(array, areEqual) {
return array.filter((item, pos) => {
return array.findIndex((other) => areEqual(item, other)) == pos;
});
}
console.log(
filterDuplicates([
{ key: 1, name: 'test' },
{ key: 2, name: 'apple' },
{ key: 1, name: 'test' },
], (a, b) => a.key == b.key)
);

将数组传递给第一个参数，并将相等性传递给filterDuplicates的第二个参数。我从这个答案中得到了这个想法。

打字稿

function filterDuplicates<T>(array: T[], areEqual: ((a: T, b: T) => boolean)): T[] {
return array.filter((item: T, pos: number) => {
return array.findIndex((other: T) => areEqual(item, other)) == pos;
});
}

Answer 2

你可以做这样的事情：

检查您的状态中是否存在现有页面，如果返回相同或推送

case LOAD_PAGES:
return {
...state,
pages: state.pages.findIndex(page => page.key === action.pages.key) >= 0 ?
state.pages :
[...state.pages, action.pages]
};

Answer 3

有很多方法可以解决您的问题，以下是我的方法：

不要使用数组，而是将页面存储在对象中，并使用已定义的键作为对象的键。您可以使用Object.values(store.pages)或Object.entries(store.pages)像以前一样获取页面数组。

Answer 4

只需使用 set，就可以省略重复的元素。

return { ...state, arr: Array.from(new Set([...state.arr, ...newArr]))};