Redux Reducer example - filter & sort data

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