DEV Community


Add Item Form – react-redux example

loizenai profile image loizenai ・2 min read

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:

const demoState = {
    books: [
            id: '123abcdefghiklmn',
            title: 'Origin',
            description: 'Origin thrusts Robert Langdon into the dangerous intersection of humankind’s two most enduring questions.',
            author: 'Dan Brown',
            published: 2017
    filters: {
        text: 'ori',
        sortBy: 'published', // published or title
        startYear: undefined,
        endYear: undefined

We also have addBook action:

// actions/books.js

export const addBook = ({
    title = '',
    description = '',
    author = '',
    published = 0
} = {}) => ({
    type: 'ADD_BOOK',
    book: {
        id: uuid(),

=> 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

Add Item Form – react-redux example

Discussion (0)

Forem Open with the Forem app