在 React Redux 上组合多个过滤器答案

【问题标题】：Combine multiple filters on React Redux在 React Redux 上组合多个过滤器
【发布时间】：2021-03-28 17:24:19
【问题描述】：

这是我的 redux 状态：

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 的完整对象。

然后，如果我删除国家过滤器，我将获得 id 10 和 24

有什么办法？

你知道怎么做吗？

提前致谢

【问题讨论】：

这行得通吗？ people.filter(p => p.country === 'NZ' && p.id === 10)
不，因为它必须是动态的，而且我必须能够在我的组件中切换这些过滤器。实际上，我有很多过滤器，不止两个。这些被分成不同的组件，连接到我的商店。为了理解问题，这只是一个最小的例子

标签： reactjs list redux filter react-redux

【解决方案1】：

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

对于打篮球和国家的过滤器是NZ。代码应如下所示：

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

对于这种情况，您需要在许多 reducer 中进行过滤，并且不想重复编写这些行。您可以编写一个实用程序或适配器函数，例如：

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
...
...

除了你的组件，你应该导入标准并传递给实用函数：

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

【讨论】：

【解决方案2】：

在同一个 reducer 中，您需要存储一个过滤器列表，其中包含要过滤的键和要过滤的值。例如

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

然后您只需在人员列表中应用过滤器：

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

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

【讨论】：