Redux Reducer example – filter & sort data

In this tutorial, we’re gonna look at how to use Redux Reducer to filter & sort data.

Related Post: Redux combineReducers example

Example Description

From previous post, we had created a Redux Application that has:
– state that contains 2 components: books array and filters.
– 3 types of Actions:
+ 'ADD_BOOK', 'REMOVE_BOOK' for books.
+ 'FILTER_TEXT' for filters.
– 2 child Reducers (booksReducer and filtersReducer) that will be combined using combineReducers() function.

We can add/remove books to/from books, set filters.text value.
=> Today, we’re gonna add 4 types of Actions for filters: 'START_YEAR', 'END_YEAR', 'SORT_BY' and 'CLEAR'. Then we will add a function that can filter and sort books with filters condition.

Practice

Setup environment

This step is just like step in previous post:
– In package.json:

Then run cmd yarn install.

– Add plugin to .babelrc:

Create Redux Actions
Book Actions

Filter Actions

Create Redux Reducer
Books Reducer

Filters Reducer

Create Redux Store

Filter and Sort function

books is filtered by text, startYear and endYear. Then the filtered result will be sorted by sortBy parameter (‘title’ or ‘published’).

Subscribe & Unsubscribe

Every time we call store.dispatch(action), getVisibleBooks(books, filters) is invoked to return list of books with filters condition.

Run and Check result

Full code:

Result in Browser Console:
– filter text:
redux-reducer-filter-sort-example-filter-text

– filter startYear:
redux-reducer-filter-sort-example-filter-start-year

– filter endYear:
redux-reducer-filter-sort-example-filter-end-year

– filter startYear & endYear:
redux-reducer-filter-sort-example-filter-start-end-year

– sortby ‘published’:
redux-reducer-filter-sort-example-sortby-published

– sortby ‘title’:
redux-reducer-filter-sort-example-sortby-title

Source code

ReduxFilterSort

For running:
yarn install
yarn run dev-server or yarn run build, then yarn run serve.

By grokonez | April 14, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*