React / Redux获取和过滤数据

时间:2016-08-02 18:50:36

标签: javascript reactjs redux

让我们举例来说,我有一个巨大的项目列表,我们可以称之为contacts这是列表中的1000多个项目,我们有一堆过滤器,例如contact typecontact location,{ {1}},assigned to过滤DESC`。用户可以输入他们想要的任何内容。 redux存储由标准化对象中的联系人组成

filter ASC,

获取所有联系人后,最好根据用户输入映射和过滤客户端上的所有联系人吗?

或者我们是否应该向服务器发出另一个请求以获取与特定过滤器相关的所有联系人?

请注意,它不仅仅是一个可以查询的参数,因为它是多个参数。因此contact.type ===:“Lead”|| “客户”,以及contact.location ===“Spring Field”

对于此大小的查询,最佳实践是什么,并且正在为服务器访问所有匹配的联系人以获得额外请求,或者更好地过滤我们的redux存储客户端而不是将负载放在服务器上? / p>

2 个答案:

答案 0 :(得分:3)

就Redux而言:随意做这个客户端。这种过滤速度非常快,而且Redux不会减慢速度。

一般来说,除非您确实知道它会成为一个问题,否则这是您不想优化的类型。当你谈论也许时,有一个人有可能在未来几年有太大的数据集,这是一个非常不成熟的优化 - 你可能有很多事情'更好地服务而不是这个。如你所知,有效负载大小可能是一个比这更大的问题(联系对象有多大?)

但不需要任何人的话。在目标设备上生成数据集(典型用户将使用什么?最坏情况怎么办?),并对性能基准进行筛选以过滤样本数据。我有一种感觉,你会发现你正在做的那种过滤不会成为瓶颈,因为它只是O(n * 1)。您要过滤n个元素O(n),检查每个O(1)上的单个值。

另一方面,如果您有一个非常复杂的对象列表,其中包含非常复杂的过滤器,您的结果可能会发生变化。例如,如果您正在寻找知道所有其他知道相同三个特定人员的联系人的所有联系人,那么复杂性将会增加,并且您更有可能遇到瓶颈。

无论如何,我真的建议您在花费大量时间过早优化应用程序之前尝试自我测试。

答案 1 :(得分:1)

IMO,过滤数据的正确位置不是直接在reducer中,而是在选择器中。

来自redux docs:

Computing Derived Data

  

Reselect是一个用于创建memoized,可组合选择器函数的简单库。重选选择器可用于有效地计算Redux存储中的派生数据。

我目前正在使用选择器来过滤和排序数据。

  1. 状态中没有数据重复。您不必存储按特定方式过滤的项目副本。
  2. 可以在不同的组件中使用相同的数据,每个组件使用不同的选择器功能进行过滤。
  3. 您可以使用应用程序中已有的选择器组合选择器应用许多数据计算。
  4. 如果你做得对,你的选择器将是纯函数,那么你可以轻松地测试它们。
  5. 在许多组件中使用相同的选择器。