DEV Community

loading...

Redux Reducer example - filter & sort data

loizenai profile image loizenai ・2 min read

Redux Reducer example - filter & sort data

https://grokonez.com/frontend/redux/redux-filter-sort-example-redux-reducer-example

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:

    
    {
    ...
    "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": [
        "transform-object-rest-spread"
    ]
    }
    

https://grokonez.com/frontend/redux/redux-filter-sort-example-redux-reducer-example

Discussion (0)

pic
Editor guide