Cơ bản về redux-form



  • Redux-form là một thư viện hỗ trợ trong việc quản lý React form state.

    Tổng quan

    Để kết nối giữa React form component và Redux store bạn cần những thành phần sau từ redux-form

    formReducer : function chịu trách nhiệm cập nhật Redux store dựa trên những thay đổi từ app.

    reuduxForm() : là một HOC với đầu vào là một object và đầu ra là một function mới. Sử dụng hàm này để bao lấy form component và bind các hàm xử lý tương tác người dùng và dispatch action tương ứng.

    : components bên trong form component, dùng để kết nối input component với redux-form logic.

    Luồng dữ liệu

    Dưới đây là luồng dữ liệu cơ bản

    Giả sử ta có một form chứa một text input được bao bới . Form này được bao bởi reduxForm(). Luồng dữ liệu sẽ như sau:

    1. Người dùng click vào input
    2. "Focus action" được dispatch
    3. formReducer update state
    4. State được truyền ngược lại đến input component

    Ngoài ra redux-form còn hỗ trợ về sử lý validation, fomatting, nhiều thuộc tính và action creator khác. Bạn có thể tìm hiểu thêm.

    Hướng dẫn sử dụng cơ bản

    Bước 1: Form reducer

    Đầu tiên ta truyền formReducer đến store. Reducer này sẽ phục vụ tất cả form components trong app của bạn.

    import { createStore, combineReducers } from 'redux'
    import { reducer as formReducer } from 'redux-form'
    
    const rootReducer = combineReducers({
      // ...nhung reducer khac
      form: formReducer
    })
    
    const store = createStore(rootReducer)
    

    Như vậy store sẽ biết phải handle actions đến từ các form component.

    Lưu ý : Key để truyền redux-form reducer nên được đặt là 'form'. Nếu bạn muốn sử dụng một tên key khác bạn có thể tìm hiểu thêm ở đây.

    Bước 2: Form component

    Để form component được kết nối đến store, ta cần bao component đó bởi reduxForm(). Nó sẽ cung cấp các props liên quan đến state và function để handle việc submit form.

    import React from 'react'
    import { Field, reduxForm } from 'redux-form'
    
    let ContactForm = props => {
      const { handleSubmit } = props
      return <form onSubmit={handleSubmit}>{/* form body*/}</form>
    }
    
    ContactForm = reduxForm({
      // ten cua moi form la duy nhat
      form: 'contact'
    })(ContactForm)
    
    export default ContactForm
    

    Bước 3: Component

    Component làm nhiệm vụ kết nối input đến store <Field name="inputName" component="input" type="text" />.
    Nó sẽ tạo phần tử HTML với type text và truyền vào những props như value, onChange, onBlur ,... giúp cho việc theo dõi và cập nhật state.

    Lưu ý : Component ngoài việc tạo ra input cơ bản bằng component="input", bạn có thể thay vào đó bằng một component. Tìm hiểu thêm ở đây

    Ta sẽ thêm 3 input vào form gồm "firstName", "lastName", "email".

    import React from 'react'
    import { Field, reduxForm } from 'redux-form'
    
    let ContactForm = props => {
      const { handleSubmit } = props
      return (
        <form onSubmit={handleSubmit}>
          <div>
            <label htmlFor="firstName">First Name</label>
            <Field name="firstName" component="input" type="text" />
          </div>
          <div>
            <label htmlFor="lastName">Last Name</label>
            <Field name="lastName" component="input" type="text" />
          </div>
          <div>
            <label htmlFor="email">Email</label>
            <Field name="email" component="input" type="email" />
          </div>
          <button type="submit">Submit</button>
        </form>
      )
    }
    
    ContactForm = reduxForm({
      // a unique name for the form
      form: 'contact'
    })(ContactForm)
    
    export default ContactForm
    

    Bước 4 : Handle việc submit form

    Dữ liệu submit được truyền dưới dạng object JSON đến function onSubmit. Thử console.log nó ra xem sao.

    import React from 'react'
    import ContactForm from './ContactForm'
    
    class ContactPage extends React.Component {
      submit = values => {
        // print the form values to the console
        console.log(values)
      }
      render() {
        return <ContactForm onSubmit={this.submit} />
      }
    }
    

    Như vậy bạn đã lấy được dữ liệu từ form. Việc sử dụng dữ liệu sau đó là tùy thuộc vào bạn.

    Tham khảo

    Getting Started With redux-form
    Nguồn: Viblo



Có vẻ như bạn đã mất kết nối tới LaptrinhX, vui lòng đợi một lúc để chúng tôi thử kết nối lại.