Redux Form实现疑问：示例中showResults的values参数来源及获取

Hey there! Let me walk you through exactly where that values parameter comes from and how Redux Form handles form data collection.

1. values参数的直接来源 #

当你在WizardFormThirdPage.js中提交表单时，showResults收到的values参数直接来自Redux Form内置的handleSubmit函数。

关键细节是：你的向导表单里肯定用了Redux Form注入的handleSubmit属性来包裹showResults函数，代码大概是这样的：

<form onSubmit={handleSubmit(showResults)}>
  {/* 你的表单字段 */}
</form>

handleSubmit在调用showResults前会做两件核心事：

• 先执行你配置的表单校验逻辑（校验通过才会继续，不通过则触发错误提示）；
• 从Redux Store中提取当前表单所有已收集的字段值，打包成一个对象（也就是values参数），再传递给showResults。

2. Redux Form收集表单数据的流程 #

Redux Form会把表单和Redux Store深度绑定，数据收集的完整流程是这样的：

• 字段注册：每当你用Field（或FieldArray）组件渲染表单输入框时，Redux Form会自动把这个字段注册到对应表单的Store切片中，跟踪字段的当前值、校验状态、是否被触碰等信息。
• 实时同步：用户输入或交互表单字段时，Redux Form会把输入变化实时同步到Redux Store里。因为你的向导所有页面都在reduxForm()高阶组件中用了同一个form: 'wizard'标识，所以所有步骤的字段值都会存在同一个Store节点下。
• 提交时聚合：触发提交后，handleSubmit会把Store中该表单的所有字段值（覆盖所有向导步骤）聚合为values对象，再传给showResults。

3. values对象的示例 #

如果你的向导三步分别有firstName、email、favoriteColor字段，那么传给showResults的values会是这样的结构：

{
  firstName: "John",
  email: "john@example.com",
  favoriteColor: "blue"
}

所有步骤的字段值都会被包含进来，因为整个向导共用同一个表单标识。

内容的提问来源于stack exchange，提问作者TiernO