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.

react-redux-example-add-item-form-overview

Add Item Form

Context

Remember that our App state is like this:

We also have addBook action:

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

Solution

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.

Practice

Create BookForm Component

BookForm.js

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

Create AddBook Component

AddBook.js

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

Run and Check Result
app.js

Check Result

– click on AddBook, fill in Book fields:

react-redux-example-add-item-form-overview

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

react-redux-example-add-item-form-result

Source Code

ReactRedux-addItem-Form

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

By JavaSampleApproach | April 19, 2018.

Related Posts


Got Something To Say:

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

*