Redux Reducer example - filter & sort data
redux
25
reducer
1
sort
6
filter
5
Male avatar

loveprogramming viết ngày 31/03/2021

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

444 bài viết.
77 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 6 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 5 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 5 tháng trước
1 0
Bài viết liên quan
Male avatar
0 0
https://grokonez.com/kotlin/kotlinarraysortsortbysortwith Kotlin Array sort(), sortBy(), sortWith() In the tutorial, JavaSampleApproach will guid...
loveprogramming viết 16 ngày trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
444 bài viết.
77 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!