How to filter list with input text – react-redux example

We have created a React Application that connects with Redux. In this tutorial, we’re gonna filter list of items with input text using react-redux.

Example Overview

We will build a React Application that has input text to look up for filtering items.
The filter works and updates every time we type in the textbox.

react-redux-example-filter-list-goal

Filter list with input text

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.text. To do this, we need:
– input text box to receive characters => create BookFilters Component that has html input.
– to connect BookFilters Component with Redux store to get access to filters state => import react-redux connect() and use mapStateToProps.
– to update result every time characters are typed => add onChange event and use Redux dispatch() with filterText Action imported from actions/filters.

Practice

Create BookFilters Component

Inside components folder, create BookFilters.js:

Add BookFilters to its parent Component

DashBoard.js:

Run and Check Result
app.js

Check Result

react-redux-example-filter-list-goal

Source Code

ReactRedux-filter

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

More Practice

Year Filters

BookFilters.js

Result:

react-redux-example-filter-list-year-result

Source Code

ReactRedux-fullfilters

By grokonez | April 17, 2018.



Related Posts


Got Something To Say:

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

*