Add Item Form – react-redux example

https://grokonez.com/frontend/react/add-item-form-react-redux-example

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

Context

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(),
        title,
        description,
        author,
        published
    }
});

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

https://grokonez.com/frontend/react/add-item-form-react-redux-example

Add Item Form – react-redux example