Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Best practice multiple api filters with epics #152

Open
oli06 opened this issue Aug 7, 2019 · 0 comments
Open

Best practice multiple api filters with epics #152

oli06 opened this issue Aug 7, 2019 · 0 comments

Comments

@oli06
Copy link

oli06 commented Aug 7, 2019

This is more a question of "how to code" instead of an issue.

I got a view, very you can server-side filter a list. The filters are applied to a http.get request as URI-Parameters, e.g. https://example.com/data?name=ABC&range=25

For this request, there are three filters, which the user can apply to the search request. A name filter, a range filter and a category filter. I started implementing an EpicMiddleware the same way, as shown in the GithubSearch example. It uses a debounce time to wait till the user stops typing and then executes the search with all filters.
Because I use three different EpicMiddleware´s I also call a normal reducer function to update the search string in the redux store.

Example of NameSearchEpic (range and category filters are provided from the store, nameFilter comes from the action):

return Observable(actions)
        .ofType(TypeToken<NameFilterSearchAction>())
        .debounceTime(const Duration(milliseconds: 250))
        .switchMap((action) => _search(CompanySearchFilter(action.nameFilter, store.state.rangeFilter, store.state.categoryFilter)));

For the range filter I use again an epicMiddleware with a slightly shorter debounceTime but on the same time, the filter value should be updated instantly in the redux store because otherwise the Range-Widget would not be rebuild with the new value.

Example of the reducer function to instantly update the range value:

SelectCompanyViewModel _updateCompanyRangeFilter(
    SelectCompanyViewModel vm, CompanyFilterRangeAction action) {
  return SelectCompanyViewModel(
    categoryFilter: vm.categoryFilter,
    nameFilter: vm.nameFilter,
    rangeFilter: action.range,
    companySearchState: vm.companySearchState,
    categories: vm.categories,
  );
}

The third filter can`t be changed thus often and fast, has no debounce time and can be set on another page (No problems with that).

My questions are:
Is there a better way to use EpicMiddleware (e.g. one for all three filters) instead of using three different with three different actions?
Is it the right way to use a normal reducer function to update the filters?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant