如何用RxJS实现Redux Form

document.forms[0].elements[0].value; // 获取第一个 form 中第一个表单元素的值

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

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

<form novalidate>
 <input name='username' required/>
 <input name='password' type='password' required minlength="6" maxlength="6"/>
 <input name='email' type='email'/>
 <input type='submit' value='submit'/>
</form>

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

// 伪代码
<Form>
  <FieldA/>
  <FieldB/>
  <FieldC/>
</Form>

interface IFormState {
 [fieldName: string]: {
  dirty"htmlcode">

interface IFormState {
 fields: {
  [fieldName: string]: {
   dirty"text-align: center">

为了更好的理解数据流，让我们来看一个简单的例子。我们有一个 Form 组件，它的内部包含了一个 Field 组件，在 Field 组件内部又包含了一个 Text Input。数据流可能是像下面这样的:

  
用户在输入框中输入一个字符。
  
Input 的 onChange 事件会被 Trigger。
  
Field 的 onChange Action 会被 Dispatch。
  
根据 Field 的 onChange Action 对 formState 进行修改。
  
Form State 更新之后会通知 Field 的观察者。
  
Field 的观察者将当前 Field 的 State pick 出来，如果发现有更新则 setState ，如果没有更新则什么都不做。
  
setState 会使 Field rerender ，新的 Field Value 就可以通知给 Input 了。

核心组件
首先，我们需要创建两个基本组件，一个 Field 组件，一个 Form 组件。
Field 组件
Field 组件是连接 Form 组件和表单元素的中间层。它的作用是让 Input 组件的职责更单一。有了它之后，Input 只需要做显示就可以了，不需要再关心其他复杂逻辑(validate/normalize等)。况且，对于 Input 组件来说，不仅可以用在 Form 组件中，也可以用在 Form 组件之外的地方(有些地方可能并不需要 validate 等逻辑)，所以 Field 这一层的抽象还是非常重要的。

  
拦截和转换。 format/parse/normalize。
  
表单校验。 参考 HTML Form 的表单校验，我们可以把 validation 放在 Field 组件上，通过组合验证规则来适应不同的需求。
  
触发 field 状态的 改变(如 touched，visited)
  
给子组件提供所需信息。 向下提供 Field 的状态 (error, touched, visited...)，以及用于表单元素绑定事件的回调函数 (onChange，onBlur...)。

利用 RxJS 的特性来控制 Field 组件的更新，减少不必要的 rerender。
与 Form 进行通信。 当 Field 状态发生变化时，需要通知 Form。在 Form 中改变了某个 Field 的状态，也需要通知给 Field。

Form 组件

  
管理表单状态。 Form 组件将表单状态提供给 Field，当 Field 发生变化时通知 Form。
  
提供 formValues。
  
在表单校验失败的时候，阻止表单的提交。

通知 Field 每一次 Form State 的变化。 在 Form 中会创建一个 formSubject$，每一次 Form State 的变化都会向 formSubject$ 上发送一个数据，每一个 Field 都会注册成为 formSubject$ 的观察者。也就是说 Field 知道 Form State 的每一次变化，因此可以决定在适当的时候进行更新。

当 FormAction 发生变化时，通知给 Field。 比如 startSubmit 的时候。
组件之间的通信
1、Form 和 Field 通信。
Context 主要用于跨级组件通信。在实际开发中，Form 和 Field 之间可能会跨级，因此我们需要用 Context 来保证 Form 和 Field 的通信。Form 通过 context 将其 instance 方法和 formState 提供给 Field。
2、Field 和 Form 通信。
Form 组件会向 Field 组件提供一个 d__ispatch__ 方法，用于 Field 和 Form 进行通信。所有 Field 的状态和值都由 Form 统一管理。如果期望更新某个 Field 的状态或值，必须 dispatch 相应的 action。
3、表单元素和 Field 通信
表单元素和 Field 通信主要是通过回调函数。Field 会向表单元素提供 onChange，onBlur 等回调函数。
接口的设计
对于接口的设计来说，简单清晰是很重要的。所以 Field 只保留了必要的属性，没有将表单元素需要的其他属性通过 Field 透传下去，而是交给表单元素自己去定义。
通过 Child Render，将对应的状态和方法提供给子组件，结构和层级更加清晰了。
Field:


type TValidator = (value: string | boolean) => string | undefined;

interface IFieldProps {
 children: (props: IFieldInnerProps)=> React.ReactNode;
 name: string;
 defaultValue"htmlcode">

interface IRxFormProps {
 children: (props: IRxFormInnerProps) => React.ReactNode;
 initialValues"color: #ff0000">Enhance
FieldArray
FieldArray 主要用于渲染多组 Fields。
回到我们之前的那个问题，为什么要把 formState 的结构分为 fileds 和 values"htmlcode">

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


FormSection
FormSection 主要是用于将一组 Fields group 起来，以便在复用在多个 form 中复用。主要是通过给 name添加前缀来实现的。
那么怎样给 Field 和 FieldArray 的 name 添加前缀呢？
我首先想到的是通过 React.Children 拿到子组件的 name，再和 FormSection 的 name 拼接起来。
但是，FormSection 和 Field 有可能不是父子关系！因为 Field 组件还可以被抽成一个独立的组件。因此，存在跨级组件通信的问题。
没错！跨级组件通信我们还是会用到 context。不过这里我们需要先从 FormConsumer 中拿到对应的 context value，再通过 Provider 将 prefix 提供给 Consumer。这时 Field/FieldArray 通过 Consumer 拿到的就是 FormSection 中的 Provider 提供的值，而不再是由 Form 组件的 Provider 所提供。因为 Consumer 会消费离自己最近的那个 Provider 提供的值。


<FormConsumer>
 {(formContextValue) => {
  return (
   <FormProvider
    value={{
     ...formContextValue,
     fieldPrefix: `${formContextValue.fieldPrefix || ""}${name}.`,
    }}
   >
    {children}
   </FormProvider>
  );
 }}
</FormConsumer>


测试
Unit Test
主要用于工具类方法。
Integration Test
主要用于 Field，FieldArray 等组件。因为它们不能脱离 Form 独立存在，所以无法对其使用单元测试。
Note: 在测试中，无法直接修改 instance 上的某一个属性，以为 React 将 props 上面的节点都设置成了 readonly (通过 Object.defineProperty 方法)。 但是可以通过整体设置 props 绕过。


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


Auto Fill Form Util
如果项目中的表单过多，那么对于 QA 测试来说无疑是一个负担。这个时候我们希望能够有一个自动填表单的工具，来帮助我们提高测试的效率。
在写这个工具的时候，我们需要模拟 Input 事件。


input.value = 'v';
const event = new Event('input', {bubbles: true});
input.dispatchEvent(event);


我们的期望是，通过上面的代码去模拟 DOM 的 input 事件，然后触发 React 的 onChange 事件。但是 React 的 onChange 事件却没有被触发。因此无法给 input 元素设置 value。
因为 ReactDOM 在模拟 onChange 事件的时候有一个逻辑：只有当 input 的 value 改变，ReactDOM 才会产生 onChange 事件。
React 16+ 会覆写 input value setter，具体可以参考 ReactDOM 的 inputValueTracking。因此我们只需要拿到原始的 value setter，call 调用就行了。


const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter.call(input, "v");

const event = new Event("input", { bubbles: true});
input.dispatchEvent(event);


Debug
打印 Log
在 Dev 环境中，可以通过 Log 来进行 Debug。目前在 Dev 环境下会自动打印 Log，其他环境则不会打印 Log。

Log 的信息主要包括: prevState, action, nextState。
Note: 由于 prevState, action, nextState 都是 Object，所以别忘了在打印的时候调用 cloneDeep，否则无法保证最后打印出来的值的正确性，也就是说最后得到的结果可能不是打印的那一时刻的值。
最后
这篇文章只讲了关于 React Rx Form 的思路以及一些核心技术，大家也可以按照这个思路自己去实现一版。当然，也可以参考一下源码，欢迎来提建议和 issue。Github 地址: https://github.com/reeli/react-rx-form
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

        

            
上一篇：vue实现分页组件
            
下一篇：Vue.js结合bootstrap前端实现分页和排序效果