DEV Community


Redux Reducer example - filter & sort data

loizenai profile image loizenai ・2 min read

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.


Setup environment

This step is just like step in previous post:

  • In package.json:

    "dependencies": {
    "babel-plugin-transform-object-rest-spread": "6.26.0",
    "redux": "3.7.2",
    "uuid": "3.2.1"

    Then run cmd yarn install.

  • Add plugin to .babelrc:

    "plugins": [

Discussion (0)

Editor guide