在React Redux上组合多个过滤器

Question

这是我的冗余状态：

people: [
{
id: 1,
name: 'John',
weight: 4500000,
category: 'employee',
brand: 'sony',
sport: 'baseball',
country: 'NZ'
},
{
id: 24,
name: 'Frank',
weight: 7210000,
category: 'admin',
brand: 'sony',
sport: 'basketball',
country: 'Australia'
},
{
id: 10,
name : 'George',
weight: 5800000,
category: 'admin',
brand: 'samsung',
sport: 'basketball',
country: 'NZ'
}
]

我想通过多个参数进行筛选并组合这些筛选，所以每次添加条件时，结果都会缩小或扩大。

例如，如果我想要来自新西兰的打篮球的人，那么我将获得id为10的完整对象。

然后，如果我删除国家/地区过滤器，我将获得id10和24

做这件事的方法是什么？

你知道怎么做吗？

提前感谢

Answer 1

在同一个reducer中，您需要存储一个筛选器列表，其中包括要筛选的关键字和要筛选的值。例如

[{ key: 'sport', value: 'basketball'}, { key: 'country', value: 'NZ'}]

然后你只需在人员列表上应用过滤器：

people.filter(person => filters.every(filter => person[filter.key] === filter.value))

这只是检查每个人是否匹配的所有过滤器

Answer 2

我认为使用lodash过滤器可以满足您的需要，并且可以编写最少的代码：

对于过滤人们打篮球和国家是NZ。代码应该看起来像：

_.filter(people, { sport:"basketball", country: "NZ" })

对于这种情况，你需要过滤许多减速器，不想重复自己写这些行。您可以编写一个ultality或适配器函数，如：

const filterByCreteria = (people, creteria) => _.filter(people, criteria);

您应该创建一个列表标准对象并将其导出，只要您需要，就可以将标准导入到组件中

Creteria.js

export const BASKET_BALL = { sport: 'basketball' };
export const NEWZELAND = { country: 'NZ' };
// Go on for other criteria
...
...

Iside您的组件您应该导入标准并传递给ultality函数：

import { BASKET_BALL, NEWZELAND} from '/path/to/Criteria.js';
// ...
const creteria = {...BASKET_BALL, ...NEWZELAND}
Utils.filterByCreteria(people, criteria);
// ...