3

I created an app which uses the flux pattern and pulls data from an API. This is updating data how it works now:

  1. Component calls the get() action
  2. The action pulls data from an API
  3. The action dispatches a storechange event to the related store containing the new data
  4. The store updates its state with the received payload from the action and emits a viewchange event
  5. The component listens to the viewchange event, pulls the new items from the store and re-renders

This is working fine so far. But now I wonder how I would do filtering. E.g. for a specific component ("Notifications") I only want to return the unread notifications, or the notifications in a given time-period. When I implement an action getByStatus(status) getByDate(start, end), the whole store would only contain unread notifications or the ones in the time period, which is a problem when you want to show all notifications and the unread ones at the same time.

Is the only way to do this to create a filter-method with javascript / lodash or similiar? This would make any filtering on the server side obsolete and cause a lot of (uneeded) traffic. And creating separate stores like "UnreadNotificationStore" would be pretty annyoing to handle, and in case of the time period the problem would still exist. The only way I can think of is to add the getByStatus(status) action without updating the store, and returning the data directly to the component.

Felix Hagspiel
  • 2,634
  • 2
  • 30
  • 43
  • Have you tried `.filter` function ? like `this.getState().filter( element => element.color !== "blue")` – cristiandley May 06 '16 at 13:33
  • Having the same issue as you, and still looking for a solution. To clarify: the filtering happens **server side**, and this means that when the server returns filtered data, that data is *all there is going to be in the store*, which is where the problem is. – Jeff May 10 '16 at 17:31

1 Answers1

1

Are you actually talking about filtering items down from a payload that you already have in memory client-side, or do you need to do a new fetch from the server for those "filters"?

If just filtering client-side:

  1. Store all fetched items in something like a collection branch of your store.
  2. Dispatch your filter choice and store that in a filter variable.
  3. Filter your collection using something like that .filter method that @cley suggested, and store the filtered ids in a filteredCollection variable.
  4. Add a getter to your store like getFilteredItems that returns your filtered ids mapped to the full records in collection.

If fetching each time from the server:

  1. Same as above but store the full items in filteredCollection rather than just the ids. (Unless you are going to end up with lots of data in memory, in which case you can consider maintaining a single collection that you augment with each fetch from the server and then filter from, but this adds a good bit of complexity that I wouldn't recommend unless you're certain you'll have memory issues.)

There are a number of other possibilities, but this is a reasonable place to start.

glortho
  • 13,120
  • 8
  • 49
  • 45