Add Item Form – react-redux example

We have built a React Application that connects with Redux, then filter with input text and sort list of items. In this tutorial, we continue to create a Form for adding item to list using react-redux.

Example Overview

Our app has add item form. If we fill in title, author(, description), published year and click on Add Book button, the list of Book items will be updated immediately.


Add Item Form


Remember that our App state is like this:

We also have addBook action:

=> dispatch(addBook(bookFromForm)) will add Book to the List.


We need:
– a Form to fill in Book fields => create BookForm Component with form and onSubmit function. BookForm Component has its own state to update data from form elements.
– an AddBook Component to contain BookForm Component => it connects with Redux to pass dispatch(addBook) to BookForm Component.


Create BookForm Component


This Component uses onSubmitBook() received from its parent – AddBook Component.

Create AddBook Component


After adding Book, our app goes to the main page to show list of Book items with props.history.push('/').

Run and Check Result

Check Result

– click on AddBook, fill in Book fields:


– Click on Add Book button, the Browser will go to main page with new Book:


Source Code


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

By grokonez | April 19, 2018.

Related Posts

Got Something To Say:

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