Implement Redux Form with RxJS

Forms are arguably one of the biggest challenges in Web development. Compared to normal components, forms have the following characteristics:

1. More user interaction. This means that a number of custom components, such as DataPicker, Upload, AutoComplete, and so on, may be required.
2. Frequent state changes. Each time a user enters a value, the application state may change, requiring form elements to be updated or an error message displayed.
3. Form validation, which verifies the validity of user input data. Form validation can take many forms, such as validation as you type, validation after you lose focus, validation before you submit the form, and so on.
4. Asynchronous network communication.When both user input and asynchronous network communication exist, there is more to consider. AutoComplete, for example, requires asynchronous retrieval of data based on user input. If the user initiates a request for each input, it will be a waste of resources. Because every input isasynchronousIf the user input data twice in a row, there may be a “last to first” problem.

Because of these characteristics, form development becomes difficult. In the following chapters, we will combine RxJS and Form to help us solve these problems better.

For a Form component, information about all Form elements (value, validity, etc.) needs to be stored, and HTML forms are no exception. So, where do HTML forms store Form state? How do I get form element information?

There are mainly the following methods:

1. document.formsWill return all<form>Form node.
2. Htmlformelement. elements returns all form elements.
3. Event.target. elements also fetches all form elements.

document.forms[0].elements[0].value; // Get the value of the first form element in the first form

const form = document.querySelector("form");
form.elements[0].value; 

form.addEventListener('submit'.function(event) {
  console.log(event.target.elements[0].value);
});
Copy the code

• Customization is hard. For example, Inline Validation is not supported. Only submit validates the form, and the error message style cannot be customized.
• Difficult to deal with complex scenarios. For example, nesting of form elements.
• The Input component does not behave uniformly, making it difficult to get the value of the form element. For example, checkbox and multiple select cannot take value directly, and additional conversion is required.

var $form = document.querySelector('form');

function getFormValues(form) {
  var values = {};
  var elements = form.elements; // elemtns is an array-like object

  for (var i = 0; i < elements.length; i++) {
    var input = elements[i];
    if (input.name) {
      switch (input.type.toLowerCase()) {
        case 'checkbox':
          if (input.checked) {
            values[input.name] = input.checked;
          }
          break;
        case 'select-multiple':
          values[input.name] = values[input.name] || [];
          for (var j = 0; j < input.length; j++) {
            if(input[j].selected) { values[input.name].push(input[j].value); }}break;
        default:
          values[input.name] = input.value;
          break; }}}return values;
}

$form.addEventListener('submit'.function(event) {
  event.preventDefault();
  getFormValues(event.target);
  console.log(event.target.elements);
  console.log(getFormValues(event.target));
});
Copy the code

RxJS is a very powerful data management tool, but it doesn’t have user interface rendering capabilities, whereas React is particularly good at handling interfaces. Why not combine their strengths? React and RxJS to solve our Form problems. Now that their strengths are known, the division of labor is fairly clear:

RxJS manages state and React renders the interface.

The following two problems can be summarized from the above design ideas:

1. Form and Field have a one-to-many relationship, and the status of the Form needs to be notified to multiple fields.
2. Field needs to modify the state of the component based on the data.

The first problem is that you need an Observable that supports multicast. The second problem requires an Observer capability. In RxJS, a Subject is an Observable and Observer that implements multicast. Therefore, Subject is heavily used when implementing forms.

To better understand data flow, let’s look at a simple example. We have a Form component that contains a Field component and a Text Input inside the Field component. The data flow might look something like this:

1. The user enters a character in the input box.
2. The onChange event Input will be triggered.
3. Field’s onChange Action will be dispatched.
4. Modify formState according to Field’s onChange Action.
5. Field observers are notified when the Form State is updated.
6. The observer of the Field picks up the State of the current Field, setState if it finds an update, and does nothing if there is no update.
7. SetState will rerender the Field, and the new Field Value will be notified to the Input.

The Field component is the middle layer that connects the Form component to the Form element. It serves to simplify the Input component’s responsibilities. With it, Input just needs to be displayed and you don’t need to worry about complicated logic (validate/ Normalize, etc.). Moreover, the Field layer abstraction is important because the Input component can be used not only in the Form component but also outside of the Form component (some of which may not require logic like validate).

• Interception and transformation. The format/parse the normalize.
• Form validation. By referring to HTML Form validation, we can place Validation on the Field component and combine validation rules to suit different requirements.
• Trigger a change in field state (e.g. touched, visited)
• Provide the required information to the child components. Error, touched, visited… , and callback functions for form element binding events (onChange, onBlur…). .

Take advantage of RxJS features to control Field component updates and reduce unnecessary rerender.

Communicate with the Form. The Form needs to be notified when the Field state changes. The Field also needs to be notified when the state of a Field changes in a Form.

1. Form communicates with Field.

   Context is primarily used for cross-level component communication. In real development, the Form and Field may cross levels, so we need to use Context to ensure that the Form and Field communicate. The Form provides its instance method and Form State to the Field through the context.

2. Field communicates with Form.

   The Form component provides a Dispatch method to the Field component to communicate with the Form. The state and values of all fields are managed by the Form. If you want to update the state or value of a Field, you must dispatch the corresponding action.

3. Form elements communicate with fields

   Form elements communicate with fields primarily through callback functions. Field provides onChange, onBlur, and other callback functions to form elements.

With RxJS, we keep the granularity of Field updates to a minimum, meaning that if the Value of a Field changes, it will not cause the Form component and other Feild components rerender.

Since a Field can only sense its own value changes, then the question arises: how to realize the linkage between fields?

The FormValues component was born.

Whenever a formValues change, the formValues component notifies the child component of the new formValues. This means that if you use the FormValues component, every change to FormValues will result in the FormValues component and its child rerender, so extensive use of the FormValues component is not recommended as it may cause performance problems.

In general, when using FormValues, it is best to put it in a place with minimal impact. That is, rerender as few components as possible when formValues change.

In the following code, the display of FieldB depends on the value of FieldA, so you just need to apply FormValues to FieldA and FieldB.

<FormValues>
    {({ formValues, updateFormValues }) => (
        <>
            <FieldA name="A" />{!!!!! formValues.A &&<FieldB name="B" />}
        </>
    )}
</FormValues>
Copy the code

Mainly used in Field, FieldArray and other components. Because they do not exist independently of forms, you cannot unit test them.

Note: There was no way to modify a property on instance because React set all the nodes on the props to readOnly (via object.defineProperty). But this can be bypassed by setting props overall.

instance.props = { ... instance.props,subscribeFormAction: mockSubscribeFormAction,
  dispatch: mockDispatch,
};
Copy the code