https://grokonez.com/frontend/react/get-param-from-url-edit-item-form-react-redux-example

Get Param from Url & create Edit 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. We also created Form for adding new item. In this tutorial, we’re gonna use that form to edit and update item with id param getting from Url using react-redux and React Router v4.

Example Overview

When clicking on any item, the app will bring us to a Form (like add item form). Now we can edit item and click on Add Book button, the list of Book items will be updated immediately.

How to Get Param from Url & create Edit 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 have had BookForm Component that has its own state for Book fields and onSubmit() method:

More at:

https://grokonez.com/frontend/react/get-param-from-url-edit-item-form-react-redux-example

Get Param from Url & create Edit Item Form – react-redux example

#react #redux #example