Get Param from Url & create Edit Item Form – react-redux example
react
38
redux
30
Male avatar

loveprogramming viết ngày 02/05/2021

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.

edit-item-form-react-redux-example-goal

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

545 bài viết.
97 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 11 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 10 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 10 tháng trước
1 0
Bài viết liên quan
White
5 2
Trải qua 1 thời gian khá dài trải nghiệm Angular, mình thấy RxJS khá hay. Bài này sẽ quay trở lại với bài toán Counter thần kì của React/Redux, như...
cdxf viết 3 năm trước
5 2
White
6 2
Chào các bạn Mình vừa mới làm một side project để cập nhật công nghệ mới nhất về React stack. Shopping Cart của mình được build bằng TypeScript, N...
Đinh Viễn viết hơn 2 năm trước
6 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
97 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!