React / Redux获取和过滤数据

Question

Lets say for example I have a giant list of items lets call it contacts this is 1000+ items in a list we have bunch of filters such as contact type , contact location , assigned to , filter ASC, filter DESC`. That a user can input whatever they want. The redux store consists of contacts in a normalized object

{
  "1": {
    "name": "Home Simpson",
    "type": "Lead",
    "location": "California",
    "created_at": "01/01/16"
  },
  "2": {
    "name": "Ned Flanders",
    "type": "Client",
    "location": "SpringField",
    "created_at": "05/01/16"
  },
  [...1000+]
}

After fetching all of the contacts is it better to map and filter over all of the contacts on the client side based off of the user input?

Or should we be making another request to the server to get all of the contacts related to the specific filters?

Note that it is not just one param that can be queried for it is multiple params. Hence contact.type === : "Lead" || "Client", and contact.location === "Spring Field"

What are best practice for a query of this size and is making trips to the server for all the matching contacts worth the extra request or is it better to filter our redux store client side and not put the load on the server?

Answer 1

In terms of Redux: feel free to do this client side. This kind of filtering will be very fast, and Redux isn't going to slow it down.

In general, this is the type of thing that you don't want to optimize unless you actually know its going to be a problem. When you're talking about maybe there being an off-chance of someone having a data set too large many years down the road, this is a grossly premature optimization--there are probably dozens of things you're better served working on instead of this. For all you know, payload size might be a much bigger problem than this (how big are the contact objects?)

But no need to take anyone's word for it. Generate a data set on a target device (what would your typical user be using? What about worst case?), and do performance benchmarks filtering the sample data. I have a feeling you're going to discover that the kind of filtering you're doing is not going to be a bottleneck, considering it is just O(n* 1). You're filtering through n elements O(n), checking a single value on each O(1).

On the other hand, if you have a list of very complicated objects with a very complicated filter, your result might change. For example if you're looking for all contacts that know all other contacts who know the same three specific people, the complexity will go up and you're more likely to run into a bottleneck.

In any case, I really recommend trying to benchmark yourself before spending a ton of time prematurely optimizing your application.

Answer 2

IMO, the right place to filter data is not directly in the reducers but in the selectors .

From redux docs:

Computing Derived Data

Reselect is a simple library for creating memoized, composable selector functions. Reselect selectors can be used to efficiently compute derived data from the Redux store.

I'm currently using selectors to filter and sort data.

1. No data repetition in the state. You don't have to store a copy of the items filtered by one specific way.
2. The same data can be used in different components, each one using a different selector function to filter.
3. You can combine selector applying many data computations using selector that you already have in the application.
4. If you do right, your selectors will be pure functions, then you can easily test them.
5. Use the same selector in many components.