항목 추가 양식 – react-redux 예제

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

항목 추가 양식 – react-redux 예제

React Application that connects with Redux , filter with input text 및 sort 항목 목록을 작성했습니다. 이 튜토리얼에서는 react-redux를 사용하여 목록에 항목을 추가하기 위한 양식을 계속 생성합니다.

예제 개요

우리 앱에는 항목 추가 양식이 있습니다. 제목, 저자(, 설명), 발행 연도를 입력하고 도서 추가 버튼을 클릭하면 도서 항목 목록이 즉시 업데이트됩니다.

항목 양식 추가

문맥

앱 상태는 다음과 같습니다.

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
    }
};

또한 addBook 작업도 있습니다.

// actions/books.js

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

=> dispatch(addBook(bookFromForm))는 책을 목록에 추가합니다.

해결책

우리는 다음이 필요합니다:

책 필드를 채울 양식 => form 및 onSubmit 기능을 사용하여 책 양식 구성 요소를 만듭니다. BookForm 구성 요소에는 form 요소에서 데이터를 업데이트하는 자체 상태가 있습니다.

BookForm 구성 요소를 포함하는 AddBook 구성 요소 => Redux와 연결하여 BookForm 구성 요소에 전달합니다dispatch(addBook).

관행

책 양식 구성 요소 만들기

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

항목 추가 양식 – react-redux 예제