How to sort list – react-redux example

We have created a React Application that connects with Redux, then filter list of items with input text. In this tutorial, we continue to sort that list using react-redux.

Example Overview

We can sort list of items by ‘title’ or ‘published’:

react-redux-example-sort-list-goal

Sort list

Context

Remember that our App state is like this:

And our Book list is displayed based on getVisibleBooks() function:

getVisibleBooks(books, filters) returns Book list by filtering and sorting input books.

=> Updating filters state will change the list of displayed item (books).

Solution

In this example, we only update filters.sortBy. To do this, we need:
– options for choosing ‘title’ or ‘published’ => BookFilters Component has html select with 2 option inside.
– to connect BookFilters Component with Redux store to get access to filters state => import react-redux connect() and use mapStateToProps.
– to handle button click event => add onChange and use Redux dispatch() with sortBy Action imported from actions/filters.

Practice

Add select to template

Inside components/BookFilters.js:

Run and Check Result
app.js

Check Result

– sortBy Title:

– sortBy Published:

react-redux-example-sort-list-result-published

Source Code

ReactRedux-sort

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

By grokonez | April 18, 2018.



Related Posts


Got Something To Say:

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

*